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

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

代码语言：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 {
            animatio.........完整代码请登录后点击上方下载按钮下载查看