给你的博客左侧添加一个蒲公英飘动效果

杨泽业
杨泽业
杨泽业
335
文章
103
评论
2016年9月12日18:56:02来源：憧憬博客1 4,220 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(https://www.yangzeye.cn/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>
图片地址：https://www.yangzeye.cn/tu/pugongying.png

历史上的今天
9 月
12
  • 泽业营销网官方QQ群
  • 群号：99293363
  • weinxin
  • 我的微信公众号
  • ID：iyangzeye
  • weinxin
杨泽业
  • 版权声明 本文源自 憧憬博客， 整理 发表于 2016年9月12日18:56:02
  • 转载请务必保留本文链接：https://www.yangzeye.cn/pugongying.html
两款网站运营时间统计代码 建站技术

两款网站运营时间统计代码

在网站的底部添加本网站已经稳定运营了多少年多少月多少日，可以给访客带来更加真实的、信任的感觉，所以我建议个人网站在自己的网站底部添加这个运营时间统计的代码，下面杨泽业博客为你贡献两款统计代码，各有好处...
2018年5月13日7,764 views5
匿名

发表评论

匿名网友 填写信息

:?: :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
      2016年9月26日 09:23 1F
      回复

      感谢分享，。