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=