[英]Fullscreen CSS Spinning Background
我正在尝试复制(在 css 中)我在 tiktok 的 figma 项目中看到的背景。
它基本上是一个旋转的圆锥渐变背景。
问题是我无法让它全屏工作。
你可以在这里看到我所要做的:
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
有小费吗?
谢谢
我想我修好了。
.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; } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.