我喜欢错综复杂的雪花。噢，它们旋转着、跳舞着，多么优雅地坠落啊！今天就和 animejs 一起下雪吧！
顾名思义，这个库允许您对几乎所有内容进行动画处理：从 css 值和 dom 属性到变量。
让我们创建一个简单的 html 文件，例如index.html:
anime import anime from "https://esm.sh/animejs@3.2.2"; const createsnowflake = () => { const el = document.createelementns( "http://www.w3.org/2000/svg", "svg" ); el.setattribute("viewbox", "0 0 65 64"); el.classlist.add("snowflake"); el.innerhtml = ``; const size = math.ceil(math.random() * 32); el.setattribute("width", size); el.setattribute("height", size); el.style = `position: fixed; z-index:1; top: -64px; left: ${math.floor( math.random() * window.innerwidth )}px; opacity: 0.5; pointer-events: none;`; document.body.appendchild(el); return el; }; createsnowflake(); anime({ targets: ".snowflake", translatey: window.innerheight * 2, duration: 10000, easing: "easeinoutsine", scale: 4, loop: true, opacity: 1, });
我已经从 cdn 导入了库，但是您当然可以使用包管理器添加它，例如npm i animejs，但你需要一个捆绑器，例如vite 使其能够与 html 一起使用。
在浏览器中打开index.html并欣赏雪花：
但是一片雪花还不够！让我们通过调整代码来添加更多内容：
import anime from "https://esm.sh/animejs@3.2.2"; const createSnowflake = () => { const el = document.createElementNS( "http://www.w3.org/2000/svg", "svg" ); el.setAttribute("viewBox", "0 0 65 64"); el.classList.add("snowflake"); el.innerHTML = ``; const size = Math.ceil(Math.random() * 32); el.setAttribute("width", size); el.setAttribute("height", size); el.style = `position: fixed; z-index:1; top: -64px; left: ${Math.floor( Math.random() * window.innerWidth )}px; opacity: 0.5; pointer-events: none;`; document.body.appendChild(el); return el; }; for (let i = 0; i < 10; i++) { createSnowflake(); } anime({ targets: ".snowflake", translateY: window.innerHeight * 2, duration: 10000, easing: "easeInOutSine", scale: 4, loop: true, delay: function (el, i, l) { return i * 1000; }, opacity: 1, });
重新加载页面并享受降雪：
几乎完美，但还不够？似乎无法指出缺少了什么？也许是一些旋转或更复杂的路径？
我会把它留给你去完善，animejs 可以做到这一切，并且文档读起来非常愉快。不要犹豫，分享您的创作！
喜欢这些内容并希望全年都能获得更多内容？
以上就是那天下雪了！ ❄️的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499538.html
微信扫一扫 
支付宝扫一扫 
