vue实现一个全息分层三维粒子发射器动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：vue实现一个全息分层三维粒子发射器动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>

    <style>
        :root {
          --main-blue-color: #13aeff;
          --main-white-color: #ffffff;
          --main-orange-color: #d66b18;
        }
          body {
            width:100vw;
            height:100vh;
            margin:0;
            padding:0;
            overflow:hidden;
            background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(28,38,47,1) 0%, rgba(37,47,57,1) 90% );
          }
          .testbtn {
            position: absolute;
            top: 20px;
            left: calc(50vw - 25px);
            height: 20px;
            box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            height: 25px;
            width: 70px;
            background-color: transparent;
            z-index: 10000000000000;
            color: white;
            border: 1px solid white;
          }
          .cloud {
            z-index:-1;
            opacity:0.5;
            animation:cloudFade;
          }
         @keyframes cloudFade {
          0%    {opacity:0.5;}
          50%   {opacity:0;}
          100%  {opacity:0.5;}
        }
          
          @keyframes reverseRotate {
          from { transform:rotate(0deg) } 
          to { transform:rotate(360deg) } 
        }
            @keyframes rotate {
          from { transform:rotate(360deg) } 
          to { transform:rotate(0deg) } 
        }
          
          #secondCircle .slider {
            background-color: transparent;
            width: calc(50% + 4px);
            box-sizing: border-box;
            height: 8px;
            top:calc(50% - 4px);
            left:calc(50% - 4px);
            position: relative;
            animation:rotate 8s infinite linear;
            transform-origin: 4px 4px;
        
          }
          
          #secondCircle .sliderPoint.a {
            box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);
            left: calc(100% - 2px);
            width: 4px;
            background-color: rgba(255,255,255,0.55);
            position:relative;
            box-sizing: border-box;
            border-radius: 100%;
            height: 4px;
          }
          
          #secondCircle .sliderPoint.a:before {
            content: '';
            box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);
            width: 4px;
            position: relative;
           	top: 183px;
        	  left: -285px;
            border-radius: 90px;
            height: 4px;
            display: block;
            background-color: rgba(255,255,255,0.55);
          }
          #secondCircle .sliderPoint.a:after {
            content: '';
            box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);
            width: 4px;
            position: relative;
            top: -190px;
        	  left: -270px;
            border-radius: 90px;
            height: 4px;
            display: block;
            background-color: rgba(255,255,255,0.55);
          }
          #holoLoader.active .sliderPoint.a:after {
            animation:sparks 3s infinite linear 0s;
          }
          #holoLoader.active .sliderPoint.a:before {
            animation:sparks 3s infinite linear 1.2s;
          }
          #holoLoader.active .sliderPoint.a {
            animation:sparks 3s infinite linear 0.3s;
          }
          
          @keyframes sparks {
            0% {
             box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);
            }
            60% {
             box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); 
            }
            61% {
             box-shadow: 0px 0px 5px 8px rgba(255,255,255,0.75); 
            }
            62% {
             box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); 
            }
            84% {
             box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); 
            }
            85% {
             box-shadow: 0px 0px 5px 8px rgba(255,255,255,0.75); 
            }
            86% {
             box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); 
            }
          }
          
          #holoLoader {
            z-index:1;
            //box-shadow: 0px 0px 39px 0px rgba(148,255,241,1);
            position:relative;
            border-radius:50%;
            background-color:rgba(255,255,255,0);
            width:500px;
            height:500px;
            margin:auto;
            margin-top:calc(50vh - 250px);
            transition:all 0.5s ease-in-out 0.4s;
            //transform: perspective(1000px) rotateX(30deg) rotateY(-50deg) rotateZ(0deg);
        
          }
          
          .holoLayer {
            //background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(202,226,255,0) 65%, rgba(147,196,255,1) 100%);
            //box-shadow: 0px 0px 39px 0px rgba(148,255,241,0.3);
            border-radius:360px;
            transition:all 0.5s ease-in-out 0s;
          }
          
          #holoLoader.active {
            transform: perspective(1000px) rotateX(30deg) rotateY(-50deg) rotateZ(0deg);
            transition:all 0.5s ease-in-out;
          }
          
          #core {
            width:100%;
            height:100%;
            background:radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 17%, rgba(147,196,255,0.1) 24%, rgba(255,255,255,0) 30%)
          }
          #coreCanvas, #firstCanvas, #secondCanvas {
           width:100%;
           height:100%;
          }
          #firstCircle {
            position:absolute;
            top:0px;
            width:90%;
            height:90%;
            margin:5%;
          }
          
          @keyframes stutterMovement {
            0% {
              transform:rotate(0deg)
            }
            10% {
              transform:rotate(50deg)
            }
            30% {
              transform:rotate(50deg)
            }
            40% {
              transform:rotate(50deg)
            }
            45% {
              transform:rotate(70deg)
            }
            60% {
              transform:rotate(-20deg)
            }
            70% {
              transform:rotate(0deg)
            }
            85% {
              transform:rotate(20deg)
            }
            90% {
              transform:rotate(0deg)
            }
            100% {
              transform:rotate(0deg)
            }
          }
          
          #holoLoader.active #firstCircle {
            transform: translateX(-130px) translateY(-80px);
            transition:all 0.5s ease-in-out 0.4s;
          }
          #secondCircle {
            position:absolute;
            top:0px;
            width:80%;
            height:80%;
            margin:10%;
            border:1px solid var(--main-orange-color);
          }
         
          #secondCircle:before {
            transition:all 0.5s ease-in-out 0s;
            content:'';
            border:7px dotted rgba(79, 223, 255,0.3);
            position:absolute;
            top:0px;
            width:100%;
            height:100%;
            top: 0px;
            left: 0px;
            border-radius:360%;
            opacity:0;
          }
          #secondCircle:after {
            transition:all 0.5s ease-in-out 0s;
            content:'';
            border:5px solid rgba(79, 223, 255,0.7);
            position:absolute;
            top:0px;
            width:100%;
            height:100%;
            border-radius:360%;
            opacity:0;
          }
          #holoLoader.active #secondCircle {
            border:2px solid rgba(255, 255, 255,0.5);
            transform:translateX(-180px) translateY(-120px);
            transition:all 0.5s ease-in-out 0.4s;
          }
          
          #holoLoader.active #secondCircle:before {
            opacity:1;
            top: -55px;
            left: -75px;
            transition:all 0.5s ease-in-out 0.4s;
            animation: rotation 5s linear 0s infinite;
            transformation-origin:100% 100%;
          }
          
          @keyframes rotation {
            0% {
              transform:rotateZ(0deg)
            }
            100% {
              transform:rotateZ(360deg)
            }
          }
          #holoLoader.active #secondCircle:after {
            opacity:1;
            transform: translateX(45px) translateY(35px);
            transition:all 0.5s ease-in-out 0.4s;
            
          }
          #thirdCircle {
            position:absolute;
            top:0px;
            width:70%;
            height:70%;
            margin:15%;
            border:0px solid white;
            opacity:0;
            transition:all 0.5s ease-in-out 0s;
          }
          #holoLoader.active #thirdCircle:before {
            content:'';
            display:block;
            width:100%;
            height:100%;
            position:absolute;
          }
          #holoLoader.active #thirdCircle:after {
            content:'';
            position:absolute;
            display:block;
            border-radius:180%;
            width:100%;
            height:100%;
          }
          #holoLoader.active #thirdCircle {
            border:5px solid white;
            opacity:1;
            transform: translateX(-520px) translateY(-330px);
            transition:all 0.5s ease-in-out 0.4s;
          }
          #fourthCircle {
            position:absolute;
            top:0px;
            width:60%;
            height:60%;
            margin:20%;
          }
           #holoLoader.active #fourthCircle {
            transform: translateX(-810px) translateY(-540px);
            transition:all 0.5s ease-in-out 0.4s;
          }
          #fifthCircle {
            position:absolute;
            top:0px;
            width:50%;
            height:50%;
            margin:25%;
            animation: stutterMovement 5s infinite linear;
          }
          #holoLoader.active #fifthCircle {
            transform: translateX(-600px) translateY(-400px);
            transition:all 0.5s ease-in-out 0.4s;
          }
          #sixthCircle {
            position:absolute;
            top:0px;
            width:40%;
            height:40%;
            margin:30%;
            border:1px dashed var(--main-orange-color);
            border-radius:180%;
          }
          #holoLoader.active #sixthCircle {
            border:3px solid var(--main-white-color);
            transition:all 0.5s ease-in-out 0.4s;
          }
          
          #holoLoader.active #sixthCircle:before {
            position:absolute;
            width:40%;
            height:40%;
            margin:30%;
            top:-5px;
            left:-5px;
            border:1px dashed var(--main-white-color);
            border-radius:180%;
            transition: all 0.5s ease-in-out 0s;
            animation: bubbleEffect 4s infinite linear;
            box-shadow: 0px 0px 0px rgba(255,255,255,0);
          }
           #sixthCircle:before {
            content:'';
            position:absolute;
            border-radius:180%;
            width:20%;
           	display: block;
            height:20%;
            margin:40%;
            top: -5px;
        	  left: -5px;
            border:1px solid var(--main-white-color);
            box-shadow: 0px 0px 5px 2px rgba(214,107,24,1), inset 0 0px 5px rgba(214,107,24,1);
            transition:all 0.5s ease-in-out 0.4s;
            animation: rotationY 4s infinite linear;
          }
          #holoLoader.active #sixthCircle:after {
            position:absolute;
            width:40%;
            height:40%;
            margin:30%;
            top:-5px;
            left:-5px;
            border:1px dashed var(--main-white-color);
            border-radius:180%;
            transition: all 0.5s ease-in-out 0s;
            animation: bubbleEffect 4s infinite linear;
            box-shadow: 0px 0px 0px rgba(255,255,255,0);
          }
          #sixthCircle:after {
            content:'';
            position:absolute;
            display: block;
            width:20%;
            height:20%;
            border-radius:180%;
            margin:40%;
            top: -5px;
        	  left: -5px;
            box-shadow: 0px 0px 5px 2px var(--main-orange-color), inset 0 0px 5px var(--main-orange-color);
            border:1px solid var(--main-white-color);
            transition:all 0.5s ease-in-out 0.4s;
            animation: rotationX 8s infinite linear;
          }
          
          @keyframes rotationX {
            0% {
              transform:rotateX(0deg) rotateY(0deg) scale(1);
            }
            100% {
              transform:rotateX(360deg) rotateY(-360deg) scale(1);
            }
          }
          
          @keyframes rotationY {
             0% {
              transform:rotateY(0deg) rotateX(0deg) scale(1)
            }
            100% {
              transform:rotateY(360deg) rotateX(360deg) scale(1)
            }
          }
          
          @keyframes bubbleEffect {
            0% {
              animation-timing-function: linear;
              transform:scale(1);
            }
            25% {
              animation-timing-function: linear;
              opacity:1;
              transform:scale(1.2);
            }
            50% {
              animation-timing-function: linear;
              opacity:0.5;
              transform:scale(1);
            }
            75% {
              animation-timing-function: linear;
              opacity:0.5;
              transform:scale(0.8);
            }
            100%{
              animation-timing-function: linear;
              opacity:1;
              transform:scale(1);
            }
          }
          
          #shootingParticles {
            opacity:0;
            width: 470px;
            height: 200px;
            z-index:1;
            position: absolute;
            top: calc(50vh - 168px);
        	  left: calc(50vw - 460px);
            transform: rotateZ(18deg);
            transition:all 0.5s linear 0.5s;
          }
          
          #shootingParticles.active {
             transition:all 0.5s linear 1s;
             opacity:1;
          }
    </style>
</head>

<body>

        <div id="app">
            <div v-for="(item, index) in clouds" class="cloud" :id="'cloud-' + index" :style="makeStarStyles(index)"></div>
            <!--<button class="testbtn" @click="changeDisplay">Fire!</button> -->
            <div id="holoLoader" :class="displayMode ? 'active' : 'notActive'">
                <div class="holoLayer" id="core"><canvas id="coreCanvas" /></div>
                <div class="holoLayer" id="firstCircle">
                    <canvas width="450" height="450" id="secondCanvas" />
                </div>
                <div class="holoLayer" id="secondCircle">
                    <div class="slider a">
                        <div class="sliderPoint a">
                            <!-- <div v-for="item in sparks" class="spark" /> -->
                        </div>
                    </div>
                </div>
                <div class="holoLayer" id="thirdCircle"></div>
                <div class="holoLayer" id="fourthCircle"></div>
                <div class="holoLayer" id="fifthCircle">
                    <canvas id="firstCanvas" />
                </div>
                <div class="holoLayer" id="sixthCircle"></div>
            </div>
            <canvas width="470" height="200" id="shootingParticles" :class="displayMode ? 'active' : 'notActive'" />
        </div>


    <script>
        var Main =  
      {
      data() {
        return {
          clouds: 50,
          particles:300,
          particleArray:[],
          shootingParticles:100,
          shootingParticlesArray:[],
          ringNumber:8,
          stylesArray:[],
          ringArray:[],
          instances: 4,
          count:300,
          countArray:[],
          start:65,
          then: Date.now(),
          displayModeEngage:Date.now(),
          displayMode:false,
          angles:[[0,25,10,'rgba(255,255,255,1)'],
                  [50,76,10,'.........完整代码请登录后点击上方下载按钮下载查看