山东时时彩怎么中奖|十一运夺金山东时时彩|
点击登录
  • 欢迎访问好资源,这里会在第一时间更新最新最好的资源给您,如果您有好的资源、文章,可投稿。如有其他需要请联系 QQ 点我注册
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏好资源吧~ 点我注册

【技术分享】教你给自己的网站增加动态蒲公英,让你的网站也萌动起来!

Web分享 itsmalldog 3654次浏览 已收录 6个评论 扫描二维码
本文最后更新于2015年8月16日,已超过 1 年没有更新,如果文章内容或?#35745;?#36164;源失效,请留言反馈,我们会及时处理,谢谢!

介绍:如图,参考本站的例子,将代码分享给感兴趣的小伙伴们。这里用的是其他大神的源代码,可根据自己网站稍微调整下。将本段代码复制到?#25105;?#19968;个可以接受脚本的地方都可以使用。可以放在全站底部脚本代码里。

【技术分享】教你给自己的网站增加动态蒲公英,让你的网站也萌动起来!

首先,你需要找到自己网站的总的脚部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
山东时时彩怎么中奖