彩色光束

下载代码

html

css

js

分享到微信朋友圈

X

html

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <path id="portal" d="M316.21,372.22a217.3,217.3,0,0,1-57,21.32A200.5,200.5,0,0,1,229,397.85c-5.09.47-10.2.43-15.32.58-5.1-.17-10.23-.14-15.32-.63a218.2,218.2,0,0,1-114-42.35,214.68,214.68,0,0,1-73.13-98.09A195.19,195.19,0,0,1,36.47,78.69,190.7,190.7,0,0,1,80.7,34.48,184.2,184.2,0,0,1,137,6.74,173.93,173.93,0,0,1,345.59,107.25a152.82,152.82,0,0,1,11.23,62.32A155.75,155.75,0,0,1,304,281.66c-3.81,3.72-8.22,6.69-12.49,9.86-4.15,3.32-8.88,5.78-13.42,8.51a142.35,142.35,0,0,1-29.3,12.65A137.15,137.15,0,0,1,185.49,316,137.54,137.54,0,0,1,87,242.1C77.66,222.94,73,201.33,74.65,180c1.24-21.34,8.75-42,20.4-59.75,1.52-2.18,3.17-4.27,4.75-6.4l2.4-3.18c.86-1,1.79-2,2.67-3l5.4-5.86,5.93-5.32,3-2.65c1-.82,2.13-1.57,3.2-2.36l6.44-4.67c2.23-1.42,4.56-2.69,6.84-4a57.33,57.33,0,0,1,7-3.73,106.07,106.07,0,0,1,62.09-9.45A103.18,103.18,0,0,1,235,78.94c2.35,1.22,4.83,2.18,7,3.63l6.75,4.15c2.18,1.48,4.23,3.15,6.35,4.72a56.6,56.6,0,0,1,6,5.14c4,3.43,7.38,7.52,10.89,11.45,3.06,4.28,6.42,8.37,8.86,13l2,3.42a24.69,24.69,0,0,1,1.82,3.5l3.24,7.22,2.51,7.5c.87,2.49,1.23,5.13,1.87,7.68a93.17,93.17,0,0,1-8.42,61.15,95.06,95.06,0,0,1-18.55,25,92.31,92.31,0,0,1-25.74,17.25,80.68,80.68,0,0,1-105.26-37.15,79.74,79.74,0,0,0,45.53,37.57A78.44,78.44,0,0,0,238,250.37a87.85,87.85,0,0,0,24.14-17.1,90.07,90.07,0,0,0,16.94-24.1,87,87,0,0,0,6.43-57.32c-.66-2.35-1-4.77-1.9-7l-2.44-6.89-3.12-6.61a22.73,22.73,0,0,0-1.75-3.21L274.43,125c-2.34-4.31-5.56-8-8.45-11.94-3.33-3.57-6.48-7.31-10.27-10.39A49,49,0,0,0,250.08,98c-2-1.41-3.9-2.91-5.93-4.25L237.86,90c-2.06-1.29-4.37-2.12-6.54-3.21a94.57,94.57,0,0,0-27.86-8,97.33,97.33,0,0,0-56.3,9.43,49.81,49.81,0,0,0-6.36,3.49c-2.06,1.27-4.18,2.45-6.21,3.78l-5.82,4.35c-1,.73-2,1.43-2.89,2.19l-2.68,2.46-5.33,4.91L113,114.88c-.79.91-1.63,1.78-2.4,2.71l-2.13,2.93c-1.41,2-2.9,3.87-4.25,5.87-10.35,16.28-16.92,35.1-17.75,54.38-1.34,19.24,3,38.61,11.6,55.79a124.64,124.64,0,0,0,89.74,66.28,125.56,125.56,0,0,0,57.09-3.26,128.47,128.47,0,0,0,26.42-11.5c4.12-2.52,8.46-4.73,12.22-7.8,3.87-2.9,7.91-5.59,11.35-9a141,141,0,0,0,34.46-46.1,142.74,142.74,0,0,0,13.31-56,139.1,139.1,0,0,0-10.05-56.68,160.19,160.19,0,0,0-78.24-83,164.4,164.4,0,0,0-56-15.54,160.16,160.16,0,0,0-57.92,5.2,171.67,171.67,0,0,0-52.6,25.42C55.71,67.1,31.35,100.43,19.05,137.9a184.94,184.94,0,0,0,.55,116.54,205.19,205.19,0,0,0,27.47,52.67A224.13,224.13,0,0,0,66.26,330,216.23,216.23,0,0,0,88.5,350a212.9,212.9,0,0,0,110.13,44.11A216.1,216.1,0,0,0,316.21,372.22Z" />   
        <path class="hoop" id="hoopBg" d="M49.07,160.22c10,0,23.92-27.54,23.92-72.38S59.06,15.45,49.07,15.45c-2.63,0-5.53,1.92-8.37,5.55,6,3.18,17.45,26.36,17.45,66.84S46.71,151.5,40.7,154.67C43.54,158.3,46.44,160.22,49.07,160.22Z" fill="url(#rainbowGrad)"/>
        <path class="hoop"  id="hoopFront" d="M54.91,169.48a16.9,16.9,0,0,1-5.84,1c-22.23,0-34.23-42.6-34.23-82.68s12-82.69,34.23-82.69a17.14,17.14,0,0,1,5.84,1A23.32,23.32,0,0,0,39.38,0C13.52,0,0,44.19,0,87.84s13.52,87.83,39.38,87.83A23.32,23.32,0,0,0,54.91,169.48Z" fill="url(#rainbowGrad)"/>   
      <g id="cylinder">
 
          <g>
            <path d="M35.37,12.18V150c0,.3,0,.6,0,.9a18.12,18.12,0,0,1-.29,2.47c-1.58,4.6-8.64,8.06-17.1,8.06S2.41,158,.83,153.37a18.12,18.12,0,0,1-.29-2.47c0-.3,0-.6,0-.9V12.18c0-.36,0-.71.05-1.06.56,5.24,8.12,9.39,17.39,9.39s16.82-4.15,17.38-9.39C35.34,11.47,35.37,11.82,35.37,12.18Z" fill="#29abe2"/>
            <path d="M34.9,8.22a17.32,17.32,0,0,1,.42,2.9c-.56,5.24-8.11,9.39-17.38,9.39S1.11,16.36.55,11.12A17.32,17.32,0,0,1,1,8.22C2.77,3.8,9.68.5,17.94.5S33.1,3.8,34.9,8.22Z" fill="#0071bc"/>
          </g>
          <g>
            <path d="M35,153.37c-1.58,4.6-8.64,8.06-17.1,8.06S2.41,158,.83,153.37" fill="none" stroke="#fff" stroke-miterlimit="10"/>
            <path d="M34.9,8.22C33.1,3.8,26.2.5,17.94.5S2.77,3.8,1,8.22" fill="none" stroke="#fff" stroke-miterlimit="10"/>
            <path d="M35.33,150.9c0-.3,0-.6,0-.9V12.18c0-.36,0-.71,0-1.06-.56,5.24-8.11,9.39-17.38,9.39S1.11,16.36.55,11.12c0,.35-.05.7-.05,1.06V150c0,.3,0,.6,0,.9" fill="none" stroke="#fff" stroke-miterlimit="10"/>
            <path d="M35.32,11.12c0-.2,0-.41,0-.61a6.05,6.05,0,0,0-.47-2.29A17.32,17.32,0,0,1,35.32,11.12Z" fill="none" stroke="#fff" stroke-miterlimit="10"/>
            <path d="M1,8.22A6.05,6.05,0,0,0,.5,10.51c0,.2,0,.41.05.61A17.32,17.32,0,0,1,1,8.22Z" fill="none" stroke="#fff" stroke-miterlimit="10"/>
            <path d="M35,153.37a6.13,6.13,0,0,0,.33-1.94c0-.18,0-.35,0-.53A18.12,18.12,0,0,1,35,153.37Z" fill="none" stroke="#fff" stroke-miterlimit="10"/>
            <path d="M.54,150.9c0,.18,0,.35,0,.53a6.13,6.13,0,0,0,.33,1.94A18.12,18.12,0,0,1,.54,150.9Z" fill="none" stroke="#fff" stroke-miterlimit="10"/>
          </g>
     
      </g>   
    <linearGradient id="rainbowGrad" data-name="Spectrum " x1="150" y1="280" y2="150" x2="250" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#00a8de"/>
      <stop offset="0.2" stop-color="#333391"/>
      <stop offset="0.4" stop-color="#e91388"/>
      <stop offset="0.6" stop-color="#eb2d2e"/>
      <stop offset="0.8" stop-color="#fde92b"/>
      <stop offset="1" stop-color="#009e54"/>
    </linearGradient>	
   <linearGradient id="greyGrad" data-name="Spectrum " x1="150" y1="280" y2="150" x2="250" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#00a8de"/>
      <stop offset="0.2" stop-color="#333391"/>
      <stop offset="0.4" stop-color="#e91388"/>
      <stop offset="0.6" stop-color="#eb2d2e"/>
      <stop offset="0.8" stop-color="#fde92b"/>
      <stop offset="1" stop-color="#009e54"/>
    </linearGradient>	
    <polyline id="wave" fill="none" stroke-width="2" stroke-linecap="round" stroke="url(#rainbowGrad)"/>
      <g id="prism">
      
          <polygon points="0.5 91.18 88.78 42.18 176.69 91.72 88.78 142.31 0.5 91.18" fill="#ccc" fill-opacity="0.1" stroke="#fff" stroke-dasharray="3 2"/>
      
        <polygon id="rightPane" points="176.69 91.72 88.78 142.31 88.78 0.5 176.69 91.72" fill="#e6e6e6" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" fill-opacity="0.51"/>
        <polygon id="leftPane" points="88.78 0.5 88.78 142.31 0.5 91.18 88.78 0.5" fill="#f2f2f2" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" fill-opacity="0.31"/>
      </g>   
  <filter id="desat">
    <feColorMatrix in="SourceGraphic"
        type="saturate"
        values="0" />
  </filter>   
    <filter id="hoopDesat">
    <feColorMatrix in="SourceGraphic"
        type="saturate"
        values="0.43" />
  </filter>   
  
  <filter id="glow" x="-100%" y="-100%" width="250%" height="250%">
    <feGaussianBlur stdDeviation="15" result="coloredBlur" />
    <feOffset dx="0" dy="0" result="offsetblur"></feOffset>
    <feFlood id="glowAlpha" flood-color="#41C2F4" flood-opacity="0.71"></feFlood>
    <feComposite in2="offsetblur" operator="in"></feComposite>
    <feMerge>
      <feMergeNode/>          
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>   
   
   <circle class="dot" cx="0" cy="0" r="1" fill="red"/>
   
     <radialGradient id="dotGrad" cx="300" cy="300" r="67" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:1"/>
	<stop  offset="0.3" style="stop-color:#0867C7;stop-opacity:0.6"/>
	<stop  offset="0.8" style="stop-color:#081029;stop-opacity:0"/>
</radialGradient>
   </defs>
  <use xlink:href="#hoopBg" x="220" y="210" opacity="0.35" filter="url(#desat)"/>
 <use xlink:href="#hoopBg" x="500" y="210" opacity="0.35" filter="url(#hoopDesat)"/>
 <g class="container"/>
 <g id="portalContainer">
  
      <use xlink:href="#portal" x="370" y="135" opacity="0.26" fill="url(#rainbowGrad)"/>
</g>
 <g id="greyPortalContainer" filter="url(#desat)">
  
      <use xlink:href="#portal" x="92" y="135" opacity="0.26" fill="url(#greyGrad)"/>
</g>
 <use xlink:href="#hoopFront" x="560" y="210" opacity="1"/> 
 <use xlink:href="#hoopFront" x="280" y="210" opacity="1"  filter="url(#desat)"/>
</svg>

css

JavaScript

var App = /** @class */ (function () {
    function App() {
        var _this = this;
        this.select = function (e) { return document.querySelector(e); };
        this.selectAll = function (e) { return document.querySelectorAll(e); };
        this.mainTl = new TimelineMax();
        this.dot = this.select('.dot');
        var dotArray = [];
        var container = this.select('.container');
        var num = 260;
        var stageWidth = 600;
        var stageHeight = 600;
        var mainCircleRadius = 220;
        var duration = 8;
        var colorArray = ["#364C62", "#F1C40F", "#E67E22", "#E74C3C", "#ECF0F1", "#95A5A6", "#16A085", "#27AE60", "#2980B9", "#8E44AD", "#2C3E50", "#F39C12", "#D35400", "#C0392B", "#BDC3C7", "#1ABC9C", "#2ECC71", "#E87AC2", "#3498DB", "#9B59B6", "#7F8C8D"];
        var step = 360 / num;
        var tl = new TimelineMax();
        this.mainTl.add(tl);
        for (var i = 0; i < num; i++) {
            var clone = this.dot.cloneNode(true);
            container.appendChild(clone);
            var angle = step * i;
            var point = {
                x: (Math.cos(angle * Math.PI / 180) * mainCircleRadius) + stageWidth / 2,
                y: (Math.sin(angle * Math.PI / 180) * mainCircleRadius) + stageHeight / 2
            };
            TweenMax.set(clone, {
                x: stageWidth,
                y: this.randomBetween((stageHeight / 2) - 30, (stageHeight / 2) + 30),
                attr: {
                    r: this.randomBetween(1, 3) / 10
                },
                fill: colorArray[i % colorArray.length],
                alpha: 1,
                transformOrigin: '50% 50%'
            });
            dotArray.push(clone);
        }
        TweenMax.set('#portalContainer', {
            skewX: 50,
            x: 20,
            y: -36,
            rotation: 70,
            transformOrigin: '50% 50%',
            scale: 0.28
        });
        TweenMax.set('#greyPortalContainer', {
            skewX: 50,
            x: 20,
            y: -36,
            rotation: 70,
            transformOrigin: '50% 50%',
            scale: 0.28
        });
        TweenMax.set('.hoop', {
            rotation: 180,
            transformOrigin: '50% 50%'
        });
        TweenMax.to('#portal', 1.5, {
            rotation: -360,
            repeat: -1,
            ease: Linear.easeNone,
            transformOrigin: '50% 49%'
        });
        tl.staggerFromTo(dotArray, 1, {
            cycle: {
                scale: function (i, el) {
                    var s = _this.randomBetween(10, 100) / 10;
                    var a = s / 10;
                    el.setAttribute('data-scale', s);
                    return s;
                }
            }
        }, {
            cycle: {
                scale: function (i, el) {
                    return Number(el.getAttribute('data-scale'));
                },
                duration: function (i, el) {
                    return 12 - Number(el.getAttribute('data-scale'));
                },
                repeatDelay: function () {
                    return 0;
                },
                y: function () {
                    return _this.randomBetween((stageHeight / 2) - 30, (stageHeight / 2) + 30);
                }
            },
            x: 0,
            onUpdate: function (e) {
                if (e.progress().toFixed(1) == 0.5) {
                    e.target.classList.add('desat');
                }
                else if (e.progress().toFixed(1) == 0) {
                    e.target.classList.remove('desat');
                }
            },
            onUpdateParams: ["{self}"],
            repeat: -1,
            ease: Linear.easeNone
        }, 0.006);
        this.mainTl.seek(1000);
    }
    App.prototype.randomBetween = function (min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    };
    return App;
}());
TweenMax.set('svg', {
    visibility: 'visible'
});
var app = new App();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>彩色光束-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号