Stack Overflow Asked on February 14, 2021
Hello I am trying to make smoother changing angle (deg) of gradient in CSS. I wanna to make it animated like rolling.
Video showcase:
https://imgur.com/a/IM3o7qK
body {
min-height: 100vh;
min-width: 100vw;
margin:0;
background: linear-gradient(115deg, #007fff 55%, #f5fafa 45%);
}
@media only screen and (max-width: 800px) {
body {
background: linear-gradient(340deg, #f5fafa 60%, #007fff 40%);
}
}
You cannot do this with gradient but you can use rotation like below:
html::before {
content: "";
position: fixed;
top: 50%;
left: 50%;
height: 150vmax;
width: 150vmax;
background: linear-gradient(0deg, #007fff 55%, #f5fafa 45%);
transform: translate(-50%, -50%) rotate(115deg);
transition: transform 1s;
}
@media only screen and (max-width: 800px) {
html::before {
transform: translate(-50%, -50%) rotate(155deg);
}
}
Correct answer by Temani Afif on February 14, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP