3D万花筒无限延伸动画特效（源码）_three.js 3d万花筒动画效果

作者：运维做开发 | 2024-07-16 14:28:52

踩

three.js 3d万花筒动画效果

HTML代码


<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>html5 3D万花筒无限延伸动画特效</title>
 
<link rel="stylesheet" href="css/style.css">
 
</head>
<body>
 
<style>
  css-doodle {
    --color: @p(#51eaea, #fffde1, #ff9d76, #FB3569);
      
    --rule: (
      :doodle {
        @grid: 30x1 / 18vmin;
        --deg: @p(-180deg, 180deg);
      }
      :container {
        perspective: 30vmin;
      }
      :after, :before {
        content: '';
        background: var(--color); 
        @place-cell: @r(100%) @r(100%);
        @size: @r(6px);
        @shape: heart;
      }
    
      @place-cell: center;
      @size: 100%;
    
      box-shadow: @m(2, (0 0 50px var(--color)));
      background: @m(100, (
        radial-gradient(var(--color) 50%, transparent 0) 
        @r(-20%, 120%) @r(-20%, 100%) / 1px 1px
        no-repeat
      ));
    
      will-change: transform, opacity;
      animation: scale-up 12s linear infinite;
      animation-delay: calc(-12s / @size() * @i());
 
      @keyframes scale-up {
        0%, 95.01%, 100% {
          transform: translateZ(0) rotate(0);
          opacity: 0;
        }
        10% { 
          opacity: 1; 
        }
        95% {
          transform: 
            translateZ(35vmin) rotateZ(@var(--deg));
        }
      }
    )
  }
</style>
 
<css-doodle use="var(--rule)"></css-doodle>
 
<script src='js/css-doodle.min.js'></script>
 
</body>
</html>

css代码


html, body { 
  width: 100%;
  height: 100%; 
  margin: 0;
  background: #270F34; 
  overflow: hidden; 
  display: flex; 
  align-items: center; 
  justify-content: center
}

JavaScript代码

!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";function e(e){let t=0,n=1,r=1;return{curr:(n=0)=>e[t+n],end:()=>e.length<=t,info:()=>({index:t,col:n,line:r}),index:e=>void 0===e?t:t=e,next(){let s=e[t++];return"\n"==s?(r++,n=0):n++,s}}}function t(t){t=t.trim();let n=[];if(!/^var\(/.test(t))return n;let r=e(t);try{n=function(e){let t="",n=[],r=[],s={};for(;!e.end();){let i=e.curr();if("("==i)n.push(i),t="";else if(")"==i||","==i){if(/^\-\-.+/.test(t)&&(s.name?(s.alternative||(s.alternative=[]),s.alternative.push({name:t})):s.name=t),")"==i){if("("!=n[n.length-1])throw new Error("bad match");n.pop()}","==i&&(n.length||(r.push(s),s={})),t=""}else/\s/.test(i)||(t+=i);e.next()}return n.length?[]:(s.name&&r.push(s),r)}(r)}catch(e){console.error(e&&e.message||"Bad variables.")}return n}function n(e){return Array.isArray(e)?e:[e]}function r(e,t="\n"){return(e||[]).join(t)}function s(e){return e[e.length-1]}function i(e){return e[0]}function l(e,t){return Array.prototype.flatMap?e.flatMap(t):e.reduce((e,n)=>e.concat(t(n)),[])}const u={func:(e="")=>({type:"func",name:e,arguments:[]}),argument:()=>({type:"argument",value:[]}),text:(e="")=>({type:"text",value:e}),pseudo:(e="")=>({type:"pseudo",selector:e,styles:[]}),cond:(e="")=>({type:"cond",name:e,styles:[],arguments:[]}),rule:(e="")=>({type:"rule",property:e,value:[]}),keyframes:(e="")=>({type:"keyframes",name:e,steps:[]}),step:(e="")=>({type:"step",name:e,styles:[]})},o={white_space:e=>/[\s\n\t]/.test(e),line_break:e=>/\n/.test(e),number:e=>!isNaN(e),pair:e=>['"',"(",")","'"].includes(e),pair_of:(e,t)=>({'"':'"',"'":"'","(":")"})[e]==t};function a(e,{col:t,line:n}){console.error(`(at line ${n}, column ${t}) ${e}`)}function c(e){return function(t,n){let r=t.index(),s="";for(;!t.end();){let n=t.next();if(e(n))break;s+=n}return n&&t.index(r),s}}function p(e,t){return c(e=>/[^\w@]/.test(e))(e,t)}function h(e){return c(e=>/[\s\{]/.test(e))(e)}function f(e,t){return c(e=>o.line_break(e)||"{"==e)(e,t)}function d(e,t){let n,r=u.step();for(;!e.end()&&"}"!=(n=e.curr());)if(o.white_space(n))e.next();else{if(r.name.length){if(r.styles.push(j(e,t)),"}"==e.curr())break}else r.name=k(e);e.next()}return r}function g(e,t){const n=[];let r;for(;!e.end()&&"}"!=(r=e.curr());)o.white_space(r)?e.next():(n.push(d(e,t)),e.next());return n}function m(e,t){let n,r=u.keyframes();for(;!e.end()&&"}"!=(n=e.curr());)if(r.name.length){if("{"==n){e.next(),r.steps=g(e,t);break}e.next()}else if(p(e),r.name=h(e),!r.name.length){a("missing keyframes name",e.info());break}return r}function y(e,t={}){for(e.next();!e.end();){let n=e.curr();if(t.inline){if("\n"==n)break}else if("*"==(n=e.curr())&&"/"==e.curr(1))break;e.next()}t.inline||(e.next(),e.next())}function v(e){let t,n="";for(;!e.end()&&":"!=(t=e.curr());)o.white_space(t)||(n+=t),e.next();return n}function x(e){let t,n=[],r=[],i=[],l="";for(;!e.end();){if(t=e.curr(),/[\('"`]/.test(t)&&"\\"!==e.curr(-1))i.length&&"("!=t&&t===s(i)?i.pop():i.push(t),l+=t;else if("@"==t)r.length||(l=l.trimLeft()),l.length&&(r.push(u.text(l)),l=""),r.push(b(e));else if(/[,)]/.test(t)){if(i.length)")"==t&&i.pop(),l+=t;else if(l.length&&(r.length?l.length&&r.push(u.text(l)):r.push(u.text((a=l).trim().length?o.number(+a)?+a:a.trim():a))),n.push(_(r)),[r,l]=[[],""],")"==t)break}else l+=t;e.next()}var a;return n}function _(e){let t=e.map(e=>{if("text"==e.type&&"string"==typeof e.value){let t=

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】