div+css实现炫酷动画旋转效果代码-html代码-BFW代码库

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.........完整代码请登录后点击上方下载按钮下载查看