那天下雪了！ ❄️
我喜歡錯綜複雜的雪花。噢，它們旋轉著、跳舞著，多麼優雅地墜落啊！今天就和 AnimeJS 一起下雪吧！
顧名思義，這個函式庫允許您對幾乎所有內容進行動畫處理：從 css 值和 dom 屬性到變數。
讓我們建立一個簡單的 html 文件，例如index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Anime</title>
</head>
<body>
<script type="module">
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 = `<path
d="M63.063 30.1745H57.7427L60.1278 27.8056C60.7613 27.1766 60.7613 26.1567 60.128 25.5278C59.4947 24.8988 58.4679 24.8986 57.8348 25.5276L53.1561 30.1745H45.2926L48.7914 26.4393C49.4013 25.7881 49.3644 24.7691 48.7086 24.1628C48.4398 23.9145 48.1086 23.7758 47.7691 23.7416C47.5633 23.7315 43.1215 23.741 43.1215 23.741L48.3202 18.5772H54.8467C55.7425 18.5772 56.4684 17.8562 56.4684 16.9664C56.4684 16.0767 55.7425 15.3557 54.8467 15.3557H51.5633L55.3881 11.5565C56.0214 10.9272 56.0214 9.90753 55.3881 9.27827C54.7546 8.64943 53.6921 8.64943 53.0586 9.27827L49.1531 13.1221V9.7718C49.1531 8.88202 48.4273 8.16106 47.5315 8.16106C46.6357 8.16106 45.9099 8.88202 45.9099 9.7718V16.3438L40.5397 21.7138L40.45 16.8505C40.4498 16.8427 40.4575 16.8354 40.4573 16.8277C40.4498 16.436 40.3051 16.0457 40.0098 15.7412C39.3886 15.1008 38.328 15.0819 37.6831 15.6995L34.2342 18.9695V11.4055L38.8764 6.83016C39.5097 6.2009 39.5276 5.18119 38.8943 4.55215C38.2608 3.92331 37.2072 3.92331 36.5739 4.55215L34.2342 6.84927V1.61072C34.2342 0.720951 33.5084 -1.52588e-05 32.6126 -1.52588e-05C31.7168 -1.52588e-05 30.991 0.720951 30.991 1.61072V6.84949L28.7142 4.55236C28.0807 3.92353 27.0722 3.92353 26.4387 4.55236C25.8054 5.18162 25.7784 6.20133 26.4117 6.83037L30.991 11.4057V19.0129L27.4934 15.6894C26.8428 15.078 25.8351 15.1057 25.2188 15.7515C24.9864 15.9955 24.8549 16.2927 24.805 16.6009C24.7743 16.7261 24.7611 16.856 24.7615 16.9898L24.7425 21.5491L19.3155 16.192V9.7718C19.3155 8.88202 18.5897 8.16106 17.6939 8.16106C16.7981 8.16106 16.0722 8.88202 16.0722 9.7718V12.9705L12.3909 9.27827C11.7574 8.64943 10.749 8.64943 10.1155 9.27827C9.48219 9.90753 9.49127 10.9272 10.1246 11.5565L13.9585 15.3557H10.5224C9.62663 15.3557 8.90079 16.0767 8.90079 16.9664C8.90079 17.8562 9.62663 18.5772 10.5224 18.5772H17.2018L22.5518 23.8913L17.5665 24.0698C16.6971 24.1011 15.9397 24.8075 15.9313 25.6629C15.9304 25.687 15.8558 25.7112 15.8558 25.7353V25.7376L15.9304 25.7428C15.9401 26.1455 16.1369 26.5452 16.4482 26.8506L19.8733 30.1745H12.3657L7.68717 25.5274C7.05365 24.8986 6.02706 24.8986 5.39376 25.5274C4.76046 26.1567 4.76046 27.1764 5.39376 27.8054L7.77862 30.1743H2.30619C1.41041 30.1743 0.68457 30.8952 0.68457 31.785C0.68457 32.6748 1.41041 33.3957 2.30619 33.3957H7.71592L5.39376 35.7023C4.76046 36.3316 4.76046 37.3513 5.39376 37.9803C5.71052 38.2948 6.12565 38.452 6.54057 38.452C6.95549 38.452 7.37062 38.2948 7.68738 37.9803L12.3027 33.396H19.8761L16.5782 36.9168C15.9682 37.568 16.0052 38.587 16.661 39.1933C16.9732 39.482 17.3695 39.6248 17.765 39.6248C17.7724 39.6248 17.7797 39.6237 17.7873 39.6237C17.792 39.6237 17.7968 39.6244 17.8013 39.6244C17.8052 39.6244 17.8093 39.6244 17.8132 39.6244L22.5711 39.5975L17.1388 44.9933H10.5224C9.62663 44.9933 8.90079 45.7142 8.90079 46.604C8.90079 47.4938 9.62663 48.2147 10.5224 48.2147H13.8956L10.1337 51.9514C9.50035 52.5807 9.50035 53.6004 10.1337 54.2295C10.4504 54.5439 10.8655 54.7011 11.2805 54.7011C11.6954 54.7011 12.0744 54.5439 12.3912 54.2295L16.0722 50.5374V53.7986C16.0722 54.6884 16.7981 55.4094 17.6939 55.4094C18.5897 55.4094 19.3155 54.6884 19.3155 53.7986V47.316L24.8171 41.8871L25.0284 47.1252C25.0604 47.9942 25.7888 48.6943 26.6569 48.6769C26.9518 48.6711 27.2718 48.5771 27.5892 48.3455C27.8191 48.1778 30.9912 44.9497 30.9912 44.9497V52.5491L26.4569 57.0886C25.8234 57.7177 25.8415 58.7376 26.4746 59.3666C26.7914 59.6813 27.2152 59.8385 27.6303 59.8385C28.0452 59.8385 28.4288 59.6813 28.7453 59.3669L30.9912 57.1049V62.3892C30.9912 63.279 31.717 64 32.6128 64C33.5086 64 34.2344 63.279 34.2344 62.3892V56.9535L36.7001 59.3669C37.0169 59.6813 37.45 59.8385 37.8649 59.8385C38.2798 59.8385 38.704 59.6813 39.0206 59.3669C39.6539 58.7376 39.6223 57.7179 38.989 57.0888L34.2344 52.3973V44.7302C34.2344 44.7302 37.2028 47.4998 37.6714 47.9465C38.1399 48.3932 38.5237 48.6445 39.0822 48.6445C39.0854 48.6445 39.0887 48.6445 39.0921 48.6445C39.9877 48.6445 40.7094 47.8705 40.704 46.9809L40.6379 41.8919L45.9101 47.1645V53.7986C45.9101 54.6884 46.6359 55.4094 47.5317 55.4094C48.4275 55.4094 49.1533 54.6884 49.1533 53.7986V50.3858L53.0591 54.2295C53.3758 54.5439 53.8087 54.7011 54.2238 54.7011C54.6387 54.7011 55.0627 54.5439 55.3795 54.2295C56.0128 53.6002 56.0173 52.5805 55.384 51.9514L51.6262 48.2147H54.8467C55.7425 48.2147 56.4684 47.4938 56.4684 46.604C56.4684 45.7142 55.7425 44.9933 54.8467 44.9933H48.3832L42.8173 39.4648L47.8031 39.2863C47.8208 39.2857 47.8381 39.2829 47.8556 39.2818C47.8621 39.2814 47.8686 39.2807 47.8751 39.2801C48.735 39.2116 49.3966 38.4835 49.3652 37.6187C49.3464 37.0981 49.0798 36.6456 48.6831 36.3651L45.6874 33.396H53.2193L57.8344 37.9803C58.1512 38.295 58.5661 38.4522 58.9812 38.4522C59.3961 38.4522 59.8113 38.295 60.1278 37.9805C60.7613 37.3515 60.7613 36.3316 60.128 35.7028L57.8059 33.3962H63.063C63.9587 33.3962 64.6846 32.6752 64.6846 31.7854C64.6846 30.8957 63.9587 30.1745 63.063 30.1745ZM43.8835 26.9494L40.8625 30.1745H36.6448L39.8885 26.9526L43.8835 26.9494ZM37.2705 20.571L37.3475 24.8668L34.2342 27.9411V23.4437L37.2705 20.571ZM27.9847 20.5884L30.991 23.4498V27.7891L27.9801 24.7807L27.9847 20.5884ZM21.4115 27.1557L25.6844 27.0028L28.8774 30.1745H24.4885L21.4115 27.1557ZM21.4945 36.3977L24.3062 33.396H28.8145L25.8219 36.3685L21.4945 36.3977ZM28.1144 43.2964L27.9298 38.7773L30.991 35.7189V40.3586L28.1144 43.2964ZM37.4022 43.2245L34.2342 40.3299V35.5666L37.3568 38.6504L37.4022 43.2245ZM43.9259 36.2016L39.685 36.3533L36.7077 33.396H41.0952L43.9259 36.2016Z"
fill="#9AD3FF"
/>`;
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,
});
</script>
</body>
</html>
登入後複製
我已經從 CDN 導入了庫，但是您當然可以使用套件管理器添加它，例如npm i Animejs，但您需要一個捆綁器，例如Vite 使它可以與 html 一起使用。
在瀏覽器中開啟index.html並欣賞雪花：
但是一片雪花還不夠！讓我們透過調整程式碼來添加更多內容：
<script type="module">
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 = `<path
d="M63.063 30.1745H57.7427L60.1278 27.8056C60.7613 27.1766 60.7613 26.1567 60.128 25.5278C59.4947 24.8988 58.4679 24.8986 57.8348 25.5276L53.1561 30.1745H45.2926L48.7914 26.4393C49.4013 25.7881 49.3644 24.7691 48.7086 24.1628C48.4398 23.9145 48.1086 23.7758 47.7691 23.7416C47.5633 23.7315 43.1215 23.741 43.1215 23.741L48.3202 18.5772H54.8467C55.7425 18.5772 56.4684 17.8562 56.4684 16.9664C56.4684 16.0767 55.7425 15.3557 54.8467 15.3557H51.5633L55.3881 11.5565C56.0214 10.9272 56.0214 9.90753 55.3881 9.27827C54.7546 8.64943 53.6921 8.64943 53.0586 9.27827L49.1531 13.1221V9.7718C49.1531 8.88202 48.4273 8.16106 47.5315 8.16106C46.6357 8.16106 45.9099 8.88202 45.9099 9.7718V16.3438L40.5397 21.7138L40.45 16.8505C40.4498 16.8427 40.4575 16.8354 40.4573 16.8277C40.4498 16.436 40.3051 16.0457 40.0098 15.7412C39.3886 15.1008 38.328 15.0819 37.6831 15.6995L34.2342 18.9695V11.4055L38.8764 6.83016C39.5097 6.2009 39.5276 5.18119 38.8943 4.55215C38.2608 3.92331 37.2072 3.92331 36.5739 4.55215L34.2342 6.84927V1.61072C34.2342 0.720951 33.5084 -1.52588e-05 32.6126 -1.52588e-05C31.7168 -1.52588e-05 30.991 0.720951 30.991 1.61072V6.84949L28.7142 4.55236C28.0807 3.92353 27.0722 3.92353 26.4387 4.55236C25.8054 5.18162 25.7784 6.20133 26.4117 6.83037L30.991 11.4057V19.0129L27.4934 15.6894C26.8428 15.078 25.8351 15.1057 25.2188 15.7515C24.9864 15.9955 24.8549 16.2927 24.805 16.6009C24.7743 16.7261 24.7611 16.856 24.7615 16.9898L24.7425 21.5491L19.3155 16.192V9.7718C19.3155 8.88202 18.5897 8.16106 17.6939 8.16106C16.7981 8.16106 16.0722 8.88202 16.0722 9.7718V12.9705L12.3909 9.27827C11.7574 8.64943 10.749 8.64943 10.1155 9.27827C9.48219 9.90753 9.49127 10.9272 10.1246 11.5565L13.9585 15.3557H10.5224C9.62663 15.3557 8.90079 16.0767 8.90079 16.9664C8.90079 17.8562 9.62663 18.5772 10.5224 18.5772H17.2018L22.5518 23.8913L17.5665 24.0698C16.6971 24.1011 15.9397 24.8075 15.9313 25.6629C15.9304 25.687 15.8558 25.7112 15.8558 25.7353V25.7376L15.9304 25.7428C15.9401 26.1455 16.1369 26.5452 16.4482 26.8506L19.8733 30.1745H12.3657L7.68717 25.5274C7.05365 24.8986 6.02706 24.8986 5.39376 25.5274C4.76046 26.1567 4.76046 27.1764 5.39376 27.8054L7.77862 30.1743H2.30619C1.41041 30.1743 0.68457 30.8952 0.68457 31.785C0.68457 32.6748 1.41041 33.3957 2.30619 33.3957H7.71592L5.39376 35.7023C4.76046 36.3316 4.76046 37.3513 5.39376 37.9803C5.71052 38.2948 6.12565 38.452 6.54057 38.452C6.95549 38.452 7.37062 38.2948 7.68738 37.9803L12.3027 33.396H19.8761L16.5782 36.9168C15.9682 37.568 16.0052 38.587 16.661 39.1933C16.9732 39.482 17.3695 39.6248 17.765 39.6248C17.7724 39.6248 17.7797 39.6237 17.7873 39.6237C17.792 39.6237 17.7968 39.6244 17.8013 39.6244C17.8052 39.6244 17.8093 39.6244 17.8132 39.6244L22.5711 39.5975L17.1388 44.9933H10.5224C9.62663 44.9933 8.90079 45.7142 8.90079 46.604C8.90079 47.4938 9.62663 48.2147 10.5224 48.2147H13.8956L10.1337 51.9514C9.50035 52.5807 9.50035 53.6004 10.1337 54.2295C10.4504 54.5439 10.8655 54.7011 11.2805 54.7011C11.6954 54.7011 12.0744 54.5439 12.3912 54.2295L16.0722 50.5374V53.7986C16.0722 54.6884 16.7981 55.4094 17.6939 55.4094C18.5897 55.4094 19.3155 54.6884 19.3155 53.7986V47.316L24.8171 41.8871L25.0284 47.1252C25.0604 47.9942 25.7888 48.6943 26.6569 48.6769C26.9518 48.6711 27.2718 48.5771 27.5892 48.3455C27.8191 48.1778 30.9912 44.9497 30.9912 44.9497V52.5491L26.4569 57.0886C25.8234 57.7177 25.8415 58.7376 26.4746 59.3666C26.7914 59.6813 27.2152 59.8385 27.6303 59.8385C28.0452 59.8385 28.4288 59.6813 28.7453 59.3669L30.9912 57.1049V62.3892C30.9912 63.279 31.717 64 32.6128 64C33.5086 64 34.2344 63.279 34.2344 62.3892V56.9535L36.7001 59.3669C37.0169 59.6813 37.45 59.8385 37.8649 59.8385C38.2798 59.8385 38.704 59.6813 39.0206 59.3669C39.6539 58.7376 39.6223 57.7179 38.989 57.0888L34.2344 52.3973V44.7302C34.2344 44.7302 37.2028 47.4998 37.6714 47.9465C38.1399 48.3932 38.5237 48.6445 39.0822 48.6445C39.0854 48.6445 39.0887 48.6445 39.0921 48.6445C39.9877 48.6445 40.7094 47.8705 40.704 46.9809L40.6379 41.8919L45.9101 47.1645V53.7986C45.9101 54.6884 46.6359 55.4094 47.5317 55.4094C48.4275 55.4094 49.1533 54.6884 49.1533 53.7986V50.3858L53.0591 54.2295C53.3758 54.5439 53.8087 54.7011 54.2238 54.7011C54.6387 54.7011 55.0627 54.5439 55.3795 54.2295C56.0128 53.6002 56.0173 52.5805 55.384 51.9514L51.6262 48.2147H54.8467C55.7425 48.2147 56.4684 47.4938 56.4684 46.604C56.4684 45.7142 55.7425 44.9933 54.8467 44.9933H48.3832L42.8173 39.4648L47.8031 39.2863C47.8208 39.2857 47.8381 39.2829 47.8556 39.2818C47.8621 39.2814 47.8686 39.2807 47.8751 39.2801C48.735 39.2116 49.3966 38.4835 49.3652 37.6187C49.3464 37.0981 49.0798 36.6456 48.6831 36.3651L45.6874 33.396H53.2193L57.8344 37.9803C58.1512 38.295 58.5661 38.4522 58.9812 38.4522C59.3961 38.4522 59.8113 38.295 60.1278 37.9805C60.7613 37.3515 60.7613 36.3316 60.128 35.7028L57.8059 33.3962H63.063C63.9587 33.3962 64.6846 32.6752 64.6846 31.7854C64.6846 30.8957 63.9587 30.1745 63.063 30.1745ZM43.8835 26.9494L40.8625 30.1745H36.6448L39.8885 26.9526L43.8835 26.9494ZM37.2705 20.571L37.3475 24.8668L34.2342 27.9411V23.4437L37.2705 20.571ZM27.9847 20.5884L30.991 23.4498V27.7891L27.9801 24.7807L27.9847 20.5884ZM21.4115 27.1557L25.6844 27.0028L28.8774 30.1745H24.4885L21.4115 27.1557ZM21.4945 36.3977L24.3062 33.396H28.8145L25.8219 36.3685L21.4945 36.3977ZM28.1144 43.2964L27.9298 38.7773L30.991 35.7189V40.3586L28.1144 43.2964ZM37.4022 43.2245L34.2342 40.3299V35.5666L37.3568 38.6504L37.4022 43.2245ZM43.9259 36.2016L39.685 36.3533L36.7077 33.396H41.0952L43.9259 36.2016Z"
fill="#9AD3FF"
/>`;
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,
});
</script>
登入後複製
重新加載頁面並享受降雪：
幾乎完美，但還不夠？似乎無法指出缺少了什麼？也許是一些旋轉或更複雜的路徑？
我會把它留給你去完善，AnimeJS 可以做到這一切，而且文件讀起來非常愉快。不要猶豫，分享您的創作！
喜歡這些內容並希望全年都能獲得更多內容？
以上是那天下雪了！ ❄️的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
如何修復KB5055523無法在Windows 11中安裝？
4 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
4 週前
By DDD
<🎜>：種植花園 - 完整的突變指南
3 週前
By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
如何修復KB5055612無法在Windows 10中安裝？
3 週前
By DDD
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
JavaScript引擎：比較實施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
Python vs. JavaScript：學習曲線和易用性
Apr 16, 2025 am 12:12 AM
Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
JavaScript：探索網絡語言的多功能性
Apr 11, 2025 am 12:01 AM
JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。
如何使用Next.js（前端集成）構建多租戶SaaS應用程序
Apr 11, 2025 am 08:22 AM
本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫
使用Next.js（後端集成）構建多租戶SaaS應用程序
Apr 11, 2025 am 08:23 AM
我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。 首先，什麼是多租戶SaaS應用程序？ 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務
從C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
