css五角星发光旋转动画效果代码-html代码-BFW代码库

css五角星发光旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：css五角星发光旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        *, *:before, *:after {
          margin: 0;
          padding: 0;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
        *:before, *:after {
          content: "";
        }
        
        html, body {
          height: 100%;
        }
        
        body {
          position: relative;
          background: #272727;
          overflow: hidden;
        }
        
        .container, .container *, .container *:before, .container *:after {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          -moz-transform-style: preserve-3d;
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
        }
        
        .thing {
          width: 10em;
          height: 10em;
        }
        .thing:before, .thing:after {
          width: 0.33333em;
          height: 0;
        }
        .thing:before {
          margin-top: 10em;
          bottom: auto;
          background: #272727;
        }
        .thing:after {
          top: auto;
          background: #272727;
        }
        .thing:nth-child(1) {
          -moz-transform: rotateZ(0deg);
          -ms-transform: rotateZ(0deg);
          -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
        }
        .thing:nth-child(1):before, .thing:nth-child(1):after {
          animation: thing 0.75s -0s ease-in-out infinite alternate-reverse;
        }
        .thing:nth-child(1):before {
          background: rgba(255, 77, 77, 0.1);
          animation: thing 1s -0s linear infinite;
        }
        .thing:nth-child(1):after {
          background: rgba(255, 77, 77, 0.75);
        }
        .thing:nth-child(2) {
          -moz-transform: rotateZ(12deg);
          -ms-transform: rotateZ(12deg);
          -webkit-transform: rotateZ(12deg);
          transform: rotateZ(12deg);
        }
        .thing:nth-child(2):before, .thing:nth-child(2):after {
          animation: thing 0.75s -0.25s ease-in-out infinite alternate-reverse;
        }
        .thing:nth-child(2):before {
          background: rgba(255, 112, 77, 0.1);
          animation: thing 1s -0.03333s linear infinite;
        }
        .thing:nth-child(2):after {
          background: rgba(255, 112, 77, 0.75);
        }
        .thing:nth-child(3) {
          -moz-transform: rotateZ(24deg);
          -ms-transform: rotateZ(24deg);
          -webkit-transform: rotateZ(24deg);
          transform: rotateZ(24deg);
        }
        .thing:nth-child(3):before, .thing:nth-child(3):after {
          animation: thing 0.75s -0.5s ease-in-out infinite alternate-reverse;
        }
        .thing:nth-child(3):before {
          background: rgba(255, 148, 77, 0.1);
          animation: thing 1s -0.06667s linear infinite;
        }
        .thing:nth-child(3):after {
          background: rgba(255, 148, 77, 0.75);
        }
        .thing:nth-child(4) {
          -moz-transform: rotateZ(36deg);
          -ms-transform: rotateZ(36deg);
          -webkit-transform: rotateZ(36deg);
          transform: rotateZ(36deg);
        }
        .thing:nth-child(4):before, .thing:nth-child(4):after {
          animation: thing 0.75s -0.75s ease-in-out infinite alternate-reverse;
        }
        .thing:nth-child(4):before {
          background: rgba(255, 184, 77, 0.1);
          animation: .........完整代码请登录后点击上方下载按钮下载查看