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

代码语言：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) translate(100px)
        }
        .👁️ .💀:nth-child(7):after {
        	-webkit-animation-delay:-0.45s;
        	animation-delay:-0.45s;
        	border-color:#6a00ff
        }
        .👁️ .💀:nth-child(8) {
        	transform:rotate(126deg) translate(100px)
        }
        .👁️ .💀:nth-child(8):after {
        	-webkit-animation-delay:-0.525s;
        	animation-delay:-0.525s;
        	border-color:#7500ff
        }
        .👁️ .💀:nth-child(9) {
        	transform:rotate(144deg) translate(100px)
        }
        .👁️ .💀:nth-child(9):after {
        	-webkit-animation-delay:-0.6s;
        	animation-delay:-0.6s;
        	border-color:#8000ff
        }
        .👁️ .💀:nth-child(10) {
        	transform:rotate(162deg) translate(100px)
        }
        .👁️ .💀:nth-child(10):after {
        	-webkit-animation-delay:-0.675s;
        	animation-delay:-0.675s;
        	border-color:#8a00ff
        }
        .👁️ .💀:nth-child(11) {
        	transform:rotate(180deg) translate(100px)
        }
        .👁️ .💀:nth-child(11):after {
        	-webkit-animation-delay:-0.75s;
        	animation-delay:-0.75s;
        	border-color:#9500ff
        }
        .👁️ .💀:nth-child(12) {
        	transform:rotate(198deg) translate(100px)
        }
        .👁️ .💀:nth-child(12):after {
        	-webkit-animation-delay:-0.825s;
        	animation-delay:-0.825s;
        	border-color:#9f00ff
        }
        .👁️ .💀:nth-child(13) {
        	transform:rotate(216deg) translate(100px)
        }
        .👁️ .💀:nth-child(13):after {
        	-webkit-animation-delay:-0.9s;
        	animation-delay:-0.9s;
        	border-color:#a0f
        }
        .👁️ .💀:nth-child(14) {
        	transform:rotate(234deg) translate(100px)
        }
        .👁️ .💀:nth-child(14):after {
        	-webkit-animation-delay:-0.975s;
        	animation-delay:-0.975s;
        	border-color:#b500ff
        }
        .👁️ .💀:nth-child(15) {
        	transform:rotate(252deg) translate(100px)
        }
        .👁️ .💀:nth-child(15):after {
        	-webkit-animation-delay:-1.05s;
        	animation-delay:-1.05s;
        	border-color:#bf00ff
        }
        .👁️ .💀:nth-child(16) {
        	transform:rotate(270deg) translate(100px)
        }
        .👁️ .💀:nth-child(16):after {
        	-webkit-animation-delay:-1.125s;
        	animation-delay:-1.125s;
        	border-color:#ca00ff
        }
        .👁️ .💀:nth-child(17) {
        	transform:rotate(288deg) translate(100px)
        }
        .👁️ .💀:nth-child(17):after {
        	-webkit-animation-delay:-1.2s;
        	animation-delay:-1.2s;
        	border-color:#d500ff
        }
        .👁️ .💀:nth-child(18) {
        	transform:rotate(306deg) translate(100px)
        }
        .👁️ .💀:nth-child(18):after {
        	-webkit-animation-delay:-1.275s;
        	animation-delay:-1.275s;
        	border-color:#df00ff
        }
        .👁️ .💀:nth-child(19) {
        	transform:rotate(324deg) translate(100px)
        }
        .👁️ .💀:nth-child(19):after {
        	-webkit-animation-delay:-1.35s;
        	animation-delay:-1.35s;
        	border-color:#ea00ff
        }
        .👁️ .💀:nth-child(20) {
        	transform:rotate(342deg) translate(100px)
        }
        .👁️ .💀:nth-child(20):after {
        	-webkit-animation-delay:-1.425s;
        	animation-delay:-1.425s;
        	border-color:#f400ff
        }
        @-webkit-keyframes symphony {
        	50% {
        	transform:rotate(-180deg) translate3d(-100px,-100px,0)
        }
        100% {
        	transform:rotate(-360deg) translate3d(0,0,0)
        }
        }@keyframes symphony {
        	50% {
        	transform:rotate(-180deg) translate3d(-100px,-100px,0)
        }
        100% {
        	transform:rotate(-360deg) translate3d(0,0,0)
        }
        }
    </style>
</head>

<body>

    <div class='👁️'>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
    </div>
    <div class='👁️'>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
    </div>
    <div class='👁️'>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'></div>
        <div class='💀'.........完整代码请登录后点击上方下载按钮下载查看