div+css实现炫酷动画旋转效果代码

代码语言:html

所属分类:动画

代码描述:div+css实现炫酷动画旋转效果代码

代码标签: 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