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%)
          }
          #coreC.........完整代码请登录后点击上方下载按钮下载查看