I am trying to replicate (in css) a background that i saw on a figma project on tiktok.
It's basically a spinning conic gradient background.
The problem is that I can't get it to work fullscreen.
You can see what I have to far here:
html, body {
margin: 0;
width: 100vw;
height: 100vh;
}
body {
background: #000;
}
#conic-bg {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
/* Center text */
text-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
#conic-bg::before {
background-image: conic-gradient(red, yellow);
content: "";
width: 100vw;
height: 100vh;
position: absolute;
animation: spin 3s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.content {
font-size: 1.5vw;
line-height: 0;
color: #fff;
position: relative;
margin: 0 auto;
}
.text {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 4vw;
line-height: 3vw;
}
https://codepen.io/makemept/pen/mdKNagg
Any tips?
Thanks
I think that I fixed it.
.out {
width:100vw;
height:100vh;
overflow:hidden;
position: absolute;
top: 0%;
left: 0%;
}
.in {
position: absolute;
top: -150vh;
left: -150vw;
width: 400vw;
height: 400vh;
background-image: conic-gradient(red, yellow);
animation:spin 5s linear infinite;
}
@keyframes spin { 100% { transform:rotate(360deg);transform-origin: center; } }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.