div+css实现多个三维超新星旋转动画效果代码-html代码-BFW代码库

div+css实现多个三维超新星旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现多个三维超新星旋转动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        * {
          box-sizing: border-box;
        }
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: auto;
          height: 100vh;
          overflow: hidden;
          background: #000000;
        }
        .container {
          position: relative;
          justify-content: center;
          align-items: center;
          margin: auto;
          top: -35%;
          left: 28%;
          width: 10em;
          height: 10em;
          line-height: 14em;
          border-radius: 50%;
          background: transparent;
        }
        .planetone {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin: auto;
          width: 4em;
          height: 4em;
          border-radius: 50%;
          background-image: linear-gradient(70deg, rgba(0,26,51,0.8), rgba(96,32,64,0.8), rgba(102,0,204,0.9));
          box-shadow: inset 0 0 25px rgba255,255,255,0.5), inset 0 0 35px rgba(153,153,204,0.3), inset 0 0 45px rgba(102,204,255,0.3);
          z-index: 0;
          animation: planetonefilter 4s ease-in-out infinite alternate;
        }
        @keyframes planetonefilter {
          0% {filter: hue-rotate(60deg);}
        }
        .planetone:before {
          content: "";
          position: absolute;
          inset: 10px auto auto 12px;
          width: 3em;
          height: 1em;
          border-radius: 50%;
          background: #000066;
          filter: blur(10px);
        }
        .planetone:after {
          content: "";
          position: absolute;
          inset: 30px auto auto 30px;
          width: 1.225em;
          height: 1.225em;
          background: #000066;
          filter: blur(12px);  
        }
        .cicle {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          width: 8em;
          height: 8em;
          background: transparent;
          border-radius: 50%;
          border: 6px solid #cc66ff;
          filter: blur(8px);
          transform: rotateX(70deg) rotateY(10deg);
          z-index: -8;
        }
        .planettwo {
          position: absolute;
          top: 2%;
          left: 15%;
          width: 4em;
          height: 4em;
          border-radius: 50%;
          background-image: linear-gradient(60deg, rgba(153,153,255,0.2), rgba(102,255,255,0.7));
          animation: planettwofilter 10s ease-in-out infinite;
        }
        @keyframes planettwofilter {
          0% {filter:hue-rotate(360deg);}
        }
        .planettwo:after {
          content: "";
          inset: 5px auto auto 25px;
          position: absolute;
          width: 1em;
          height: 3.4em;
          border-radius: 60%;
          background: rgba(0,255,255,0.7);
          filter: blur(10px);
        }
        .planetthree {
          position: absolute;
          top: 28%;
          left: 5%;
          width: 3em;
          height: 3em;
          border-radius: 50%;
          background-image: linear-gradient(90deg, rgba(153,0,255,0.5) 25%, rgba(102,0,204,0.3) 45%, rgba(102,153,255,0.6));
          animation: planetthreefilter 7s ease-in-out infinite alternate;
        }
        @keyframes planetthreefilter {
          0% {filter:brightness(380%) contrast(80%);}
        }
        .supernova {
          position: absolute;
          justify-content: center;
          align-items: center;
          width: 12em;
          height: 12em;
          margin: auto;
          border-radius: 50%;
          border: 1px s.........完整代码请登录后点击上方下载按钮下载查看