div+css实现炫酷动画旋转效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现炫酷动画旋转效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@charset "UTF-8";
html,body {
width:100%;
height:100%
}
body {
background-color:#140032;
overflow:hidden;
margin:0
}
body *,body *:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
border-radius:50%
}
.👁️:nth-child(1) {
transform:rotate(0deg) translate(100px)
}
.👁️:nth-child(2) {
transform:rotate(36deg) translate(100px)
}
.👁️:nth-child(3) {
transform:rotate(72deg) translate(100px)
}
.👁️:nth-child(4) {
transform:rotate(108deg) translate(100px)
}
.👁️:nth-child(5) {
transform:rotate(144deg) translate(100px)
}
.👁️:nth-child(6) {
transform:rotate(180deg) translate(100px)
}
.👁️:nth-child(7) {
transform:rotate(216deg) translate(100px)
}
.👁️:nth-child(8) {
transform:rotate(252deg) translate(100px)
}
.👁️:nth-child(9) {
transform:rotate(288deg) translate(100px)
}
.👁️:nth-child(10) {
transform:rotate(324deg) translate(100px)
}
.👁️ .💀:after {
content:"";
width:50px;
height:500px;
border-top:3px solid transparent;
-webkit-animation:symphony 3s linear infinite;
animation:symphony 3s linear infinite
}
.👁️ .💀:nth-child(1) {
transform:rotate(0deg) translate(100px)
}
.👁️ .💀:nth-child(1):after {
-webkit-animation-delay:0s;
animation-delay:0s;
border-color:#2b00ff
}
.👁️ .💀:nth-child(2) {
transform:rotate(18deg) translate(100px)
}
.👁️ .💀:nth-child(2):after {
-webkit-animation-delay:-0.075s;
animation-delay:-0.075s;
border-color:#3500ff
}
.👁️ .💀:nth-child(3) {
transform:rotate(36deg) translate(100px)
}
.👁️ .💀:nth-child(3):after {
-webkit-animation-delay:-0.15s;
animation-delay:-0.15s;
border-color:#4000ff
}
.👁️ .💀:nth-child(4) {
transform:rotate(54deg) translate(100px)
}
.👁️ .💀:nth-child(4):after {
-webkit-animation-delay:-0.225s;
animation-delay:-0.225s;
border-color:#4a00ff
}
.👁️ .💀:nth-child(5) {
transform:rotate(72deg) translate(100px)
}
.👁️ .💀:nth-child(5):after {
-webkit-animation-delay:-0.3s;
animation-delay:-0.3s;
border-color:#50f
}
.👁️ .💀:nth-child(6) {
transform:rotate(90deg) translate(100px)
}
.👁️ .💀:nth-child(6):after {
-webkit-animation-delay:-0.375s;
animation-delay:-0.375s;
border-color:#6000ff
}
.👁️ .💀:nth-child(7) {
transform:rotate(108deg) t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0