冰楓論壇

 找回密碼
 立即註冊
搜索
查看: 4343|回覆: 1
打印 上一主題 下一主題

[心得] 飄雪特效

[複製鏈接]

89

主題

0

好友

283

積分

迷你贊助會員

Rank: 3Rank: 3

UID
92572
帖子
745
主題
89
精華
0
積分
283
楓幣
1134
威望
225
存款
0
贊助金額
150
推廣
0
GP
141
閱讀權限
30
在線時間
411 小時
註冊時間
2015-2-18
最後登入
2024-11-24

2017端午節紀念勳章 發帖達人 懶人勳章 私服達人 神手勳章 Android勳章 2018萬聖節紀念勳章 性別(男) 性別(女) 幼兒勳章 太陽勳章 音樂勳章 論壇粉絲 VIP會員 積分勳章 2019中秋節紀念勳章 解說達人 2020年紀念勳章 2020中秋節紀念勳章 2020聖誕節紀念勳章 聖誕節紀念勳章 聖誕節紀念勳章2 論壇支持王

跳轉到指定樓層
1
發表於 2019-7-2 16:50:21 |只看該作者 |倒序瀏覽
  1. <style>
  2. /* customizable snowflake styling */
  3. .snowflake {
  4.   color: #fff;
  5.   font-size: 1em;
  6.   font-family: Arial, sans-serif;
  7.   text-shadow: 0 0 5px #000;
  8. }

  9. @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
  10. </style>
  11. <div class="snowflakes" aria-hidden="true">
  12.   <div class="snowflake">
  13.     ❅
  14.   </div>
  15.   <div class="snowflake">
  16.     ❆
  17.   </div>
  18.   <div class="snowflake">
  19.     ❅
  20.   </div>
  21.   <div class="snowflake">
  22.     ❆
  23.   </div>
  24.   <div class="snowflake">
  25.     ❅
  26.   </div>
  27.   <div class="snowflake">
  28.     ❆
  29.   </div>
  30.   <div class="snowflake">
  31.     ❅
  32.   </div>
  33.   <div class="snowflake">
  34.     ❆
  35.   </div>
  36.   <div class="snowflake">
  37.     ❅
  38.   </div>
  39.   <div class="snowflake">
  40.     ❆
  41.   </div>
  42.   <div class="snowflake">
  43.     ❅
  44.   </div>
  45.   <div class="snowflake">
  46.     ❆
  47.   </div>
  48. </div>
複製代碼
有附加一個做好的HTML檔, 不會使用上方程式碼的可以直接購買下方的檔案 (內容都是上面的程式碼而已!)

Snowflakes.html

2.74 KB, 下載次數: 4

售價: 5 楓幣  [記錄]

收藏收藏0 推0 噓0


把本文推薦給朋友或其他網站上,每次被點擊增加您在本站積分: 1鑰匙
心情甚麼的...新年也孤單
複製連結並發給好友,以賺取推廣點數
簡單兩步驟,註冊、分享網址,即可獲得獎勵! 一起推廣文章換商品、賺$$

0

主題

0

好友

-1

積分

限制會員

UID
265853
帖子
2
主題
0
精華
0
積分
-1
楓幣
1
威望
-1
存款
0
贊助金額
0
推廣
0
GP
0
閱讀權限
0
性別
保密
在線時間
0 小時
註冊時間
2019-7-2
最後登入
2019-7-2
2
發表於 2019-7-2 17:06:41 來自手機 |只看該作者
感謝大大分享
已有 1 人評分楓幣 威望 收起 理由
System -10 -1 違反版規十(系統自動鎖定)

總評分: 楓幣 -10  威望 -1   查看全部評分

點評回覆

使用道具 舉報

高級模式
B Color Image Link Quote Code Smilies |上傳

廣告刊登意見回饋關於我們管群招募本站規範DMCA隱私權政策

Copyright © 2011-2024 冰楓論壇, All rights reserved

免責聲明:本網站是以即時上載留言的方式運作,本站對所有留言的真實性、完整性及立場等,不負任何法律責任。

而一切留言之言論只代表留言者個人意見,並非本網站之立場,用戶不應信賴內容,並應自行判斷內容之真實性。

小黑屋|手機版|冰楓論壇

GMT+8, 2024-12-22 15:21

回頂部