3D万花筒无限延伸动画特效（源码）

最新推荐文章于 2024-07-10 22:14:11 发布

米粒️️️

最新推荐文章于 2024-07-10 22:14:11 发布

阅读量835

点赞数

本文链接：https://blog.csdn.net/Jacklies/article/details/107409011

版权

本文介绍了如何使用HTML、CSS和JavaScript创建一个3D万花筒动画特效，通过结合三者代码实现视觉上的无限延伸效果，提供源码供读者参考学习。

摘要由CSDN通过智能技术生成

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=

最低0.47元/天解锁文章

米粒️️️

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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 {
复制链接

扫一扫