點擊登錄
  • 歡迎訪問好資源,這里會在第一時間更新最新最好的資源給您,如果您有好的資源、文章,可投稿。如有其他需要請聯系 QQ 點我注冊
  • 如果您覺得本站非常有看點,那么趕緊使用Ctrl+D 收藏好資源吧~ 點我注冊

新山东群英会遗漏查询:【技術分享】教你給自己的網站增加動態蒲公英,讓你的網站也萌動起來!

Web分享 itsmalldog 3719次瀏覽 已收錄 6個評論 掃描二維碼
本文最后更新于2015年8月16日,已超過 1 年沒有更新,如果文章內容或圖片資源失效,請留言反饋,我們會及時處理,謝謝!

4海南彩票开奖结果 www.vctrn.com

介紹:如圖,參考本站的例子,將代碼分享給感興趣的小伙伴們。這里用的是其他大神的源代碼,可根據自己網站稍微調整下。將本段代碼復制到任意一個可以接受腳本的地方都可以使用??梢苑旁諶鏡撞拷瘧敬肜?。

【技術分享】教你給自己的網站增加動態蒲公英,讓你的網站也萌動起來!

首先,你需要找到自己網站的總的腳部foot文件

  1. <div class=“dandelion”>
  2. <span class=“smalldan”></span>
  3. <span class=“bigdan”></span>
  4. </div>
  5. <style type=“text/css”>
  6. @media screen and (maxwidth:600px){
  7. .dandelion{display: none !important;}
  8. }
  9. .dandelion .smalldan {
  10. width: 36px;
  11. height: 60px;
  12. right: 108px; //這邊是小蒲公英顯示的地方。居左:left;局右:right。自行修改。后面的參數是距邊界的距離。
  13. backgroundposition: 0 90px;
  14. border: 0px solid red;
  15. }
  16. .dandelion span {
  17. webkitanimation: ballx 3s linear 2s infinite;
  18. mozanimation: ballx 3s linear 2s infinite;
  19. animation: ballx 3s linear 2s infinite;
  20. webkittransformorigin: bottom center;
  21. moztransformorigin: bottom center;
  22. transformorigin: bottom center;
  23. }
  24. .dandelion span {
  25. display: block;
  26. position: fixed;
  27. zindex:9999999999;
  28. bottom: 0px;
  29. backgroundimage: url(http://7vijc7.com1.z0.glb.clouddn.com/wp-content/uploads/2015/07/2015071806445693.png);
  30. backgroundrepeat: norepeat;
  31. _background: none;
  32. }
  33. .dandelion .bigdan {
  34. width: 64px;
  35. height: 115px;
  36. right: 61px;//這邊是大蒲公英的樣式,同上。
  37. backgroundposition: 86px 36px;
  38. border: 0px solid red;
  39. }
  40. @keyframes ballx {
  41. 0% { transform:rotate(0deg);}
  42. 25% { transform:rotate(5deg); }
  43. 50% { transform:rotate(0deg);}
  44. 75% { transform:rotate(-5deg);}
  45. 100% { transform:rotate(0deg);} //我見過幾個這邊多設置了一個停頓點,會導致蒲公英搖擺時卡頓。調整成這樣就可以了。以下同。
  46. }
  47. @-webkitkeyframes ballx {
  48. 0% { webkittransform:rotate(0deg);}
  49. 25% { webkittransform:rotate(5deg); }
  50. 50% { webkittransform:rotate(0deg);}
  51. 75% { webkittransform:rotate(-5deg);}
  52. 100% { webkittransform:rotate(0deg);}
  53. }
  54. @-mozkeyframes ballx {
  55. 0% { moztransform:rotate(0deg);}
  56. 25% { moztransform:rotate(5deg); }
  57. 50% { moztransform:rotate(0deg);}
  58. 75% { moztransform:rotate(-5deg);}
  59. 100% { moztransform:rotate(0deg);}
  60. }
  61. </style>


好資源 , 版權所有丨如未注明 , 均為原創丨本網站采用BY-NC-SA協議進行授權 , 轉載請注明【技術分享】教你給自己的網站增加動態蒲公英,讓你的網站也萌動起來!!
喜歡 (18)
[捐贈網站,支持好資源!]
分享 (0)
發表我的評論
取消評論

表情 貼圖 加粗 刪除線 居中 斜體 簽到

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
(6)個小伙伴在吐槽
  1. 蒲公英
    chengpu20122015-11-09 11:10 回復 Windows 7 | Chrome 31.0.1650.63
  2. 這個小功能好萌啊
    xadwang2015-11-13 09:40 回復 Windows 10 | Chrome 45.0.2454.101
  3. 呵呵呵呵 不錯喲
    xiangyang82015-12-15 14:18 回復 Windows 7 | Chrome 31.0.1650.63
  4. 看起來不錯的效果,試試看
    laogong2015-12-20 12:17 回復 Windows 10 | Chrome 48.0.2564.48
  5. 收藏先,順便問下站長的動態背景源碼口否分享一下
    稻草2017-10-25 18:59 回復 Windows 10 | Chrome 47.0.2526.108
  6. 剛才玩了半天哈哈,挺有意思的 :mrgreen:
    goatlee2018-01-12 20:08 回復 Windows 7 | 搜狗瀏覽器 2.X