給你的博客左側添加一個蒲公英飄動效果

2016年9月12日18:56:02 1 1,763 views

我在瀏覽憧憬博客的時候,發現他的文章里面提到了一個在網站的左下角增加了一個蒲公英飄動的效果,以提示大家,秋天已到,好好的珍惜自己的時間了。

把以下代碼插入到模版的頭部文檔或者是底部文檔里面,代碼如下:

  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?(max-width:600px){
  7. .dandelion{display:?none?!important;}
  8. }
  9. .dandelion?.smalldan?{
  10. width:?36px;
  11. height:?60px;
  12. left:?88px;
  13. background-position:?0?-90px;
  14. border:?0px?solid?red;
  15. }
  16. .dandelion?span?{
  17. -webkit-animation:?ball-x?3s?linear?2s?infinite;
  18. -moz-animation:?ball-x?3s?linear?2s?infinite;
  19. animation:?ball-x?3s?linear?2s?infinite;
  20. -webkit-transform-origin:?bottom?center;
  21. -moz-transform-origin:?bottom?center;
  22. transform-origin:?bottom?center;
  23. }
  24. .dandelion?span?{
  25. display:?block;
  26. position:?fixed;
  27. z-index:9999999999;
  28. bottom:?0px;
  29. background-image:?url(http://www.kkkonw.live/tu/pugongying.png);
  30. background-repeat:?no-repeat;
  31. _background:?none;
  32. }
  33. .dandelion?.bigdan?{
  34. width:?64px;
  35. height:?115px;
  36. left:?41px;
  37. background-position:?-86px?-36px;
  38. border:?0px?solid?red;
  39. }
  40. @keyframes?ball-x?{
  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. @-webkit-keyframes?ball-x?{
  48. 0%?{?-webkit-transform:rotate(0deg);}
  49. 25%?{?-webkit-transform:rotate(5deg);?}
  50. 50%?{?-webkit-transform:rotate(0deg);}
  51. 75%?{?-webkit-transform:rotate(-5deg);}
  52. 100%?{?-webkit-transform:rotate(0deg);}
  53. }
  54. @-moz-keyframes?ball-x?{
  55. 0%?{?-moz-transform:rotate(0deg);}
  56. 25%?{?-moz-transform:rotate(5deg);?}
  57. 50%?{?-moz-transform:rotate(0deg);}
  58. 75%?{?-moz-transform:rotate(-5deg);}
  59. 100%?{?-moz-transform:rotate(0deg);}
  60. }
  61. </style>
圖片地址:http://www.kkkonw.live/tu/pugongying.png
  • 澤業營銷網官方QQ群
  • 群號:99293363
  • weinxin
  • 我的微信公眾號
  • ID:iyangzeye
  • weinxin

楊澤業

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前評論:1   其中:訪客  1   博主  0

    • 母嬰b2b 母嬰b2b 4

      感謝分享,。