css螺旋动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
li {
list-style: none;
}
ul {
display: flex;
align-items: center;
flex-direction: column;
transform-style: preserve-3d;
animation: wind 20000ms infinite alternate ease-in-out;
transform: rotateY(0deg);
height: calc(1.2em * 50);
width: 80vw;
}
li {
width: 50%;
height: 1em;
background: linear-gradient(to right, #00f, #0f0, orange, red);
margin-bottom: .2em;
transform: scaleX(var(--s, 1)) rotateY(calc(var(--ry,0) * 1deg));
}
body {
perspective: 1800px;
perspective-origin: 50% 50%;
background: radial-gradient(circle, black, #16161c);
height: calc(1.2em * 50);
overflow-y: hidden;
overflow-x: hidden;
}
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0