代码实现网页左下角添加蒲公英飘动特效

橘子网 2,574 0

网页左下角有一个蒲公英飘动特效,相信很多站长都见过,为此,橘子君也做了一番研究,实现蒲公英飘动特效还是比较简单。只需在网页中加入以下代码即可实现。如果是想全站展示,建议将特效代码添加到footer文件中。

蒲公英特效代码

HTML
  1. <!--蒲公英特效-->
  2. <div class="dandelion">
  3. <span class="smalldan"></span>
  4. <span class="bigdan"></span>
  5. </div>
  6. <style type="text/css">
  7. @media screen and (max-width:600px){
  8. .dandelion{display: none !important;}
  9. }
  10. .dandelion .smalldan {
  11. width: 36px;
  12. height: 60px;
  13. left: 21px;
  14. background-position: 0 -90px;
  15. border: 0px solid red;
  16. }
  17. .dandelion span {
  18. -webkit-animation: ball-x 3s linear 2s infinite;
  19. -moz-animation: ball-x 3s linear 2s infinite;
  20. animation: ball-x 3s linear 2s infinite;
  21. -webkit-transform-origin: bottom center;
  22. -moz-transform-origin: bottom center;
  23. transform-origin: bottom center;
  24. }
  25. .dandelion span {
  26. display: block;
  27. position: fixed;
  28. z-index:9999999999;
  29. bottom: 0px;
  30. background-image: url(https://mat1.gtimg.com/www/mb/images/zt/memory/pgy.png);
  31. background-repeat: no-repeat;
  32. _background: none;
  33. }
  34. .dandelion .bigdan {
  35. width: 64px;
  36. height: 115px;
  37. left: 47px;
  38. background-position: -86px -36px;
  39. border: 0px solid red;
  40. }
  41. @keyframes ball-x {
  42. 0% { transform:rotate(0deg);}
  43. 20% { transform:rotate(5deg); }
  44. 40% { transform:rotate(0deg);}
  45. 60% { transform:rotate(-5deg);}
  46. 80% { transform:rotate(0deg);}
  47. 100% { transform:rotate(0deg);}
  48. }
  49. @-webkit-keyframes ball-x {
  50. 0% { -webkit-transform:rotate(0deg);}
  51. 20% { -webkit-transform:rotate(5deg); }
  52. 40% { -webkit-transform:rotate(0deg);}
  53. 60% { -webkit-transform:rotate(-5deg);}
  54. 80% { -webkit-transform:rotate(0deg);}
  55. 100% { -webkit-transform:rotate(0deg);}
  56. }
  57. @-moz-keyframes ball-x {
  58. 0% { -moz-transform:rotate(0deg);}
  59. 20% { -moz-transform:rotate(5deg); }
  60. 40% { -moz-transform:rotate(0deg);}
  61. 60% { -moz-transform:rotate(-5deg);}
  62. 80% { -moz-transform:rotate(0deg);}
  63. 100% { -moz-transform:rotate(0deg);}
  64. }
  65. </style>
运行 复制 文本 高亮

PS:在电脑上可以点击运行进入预览,群聊时博主见过很多新手站长说一看到代码就头疼,就会觉得很复杂,其实现在的互联网如此开放,很多工作不再是敲代码了,借力互联网,给网页加代码也是一件比较简单的事了。

上一篇:

下一篇:

相关阅读

分享