建站了这么久，之前一直嚷嚷着要给大家发点干货什么的，也是一拖再拖，要知道完完整整的写一篇教程还是很耗时间的，不仅要从自己总结经验，还得吧自己的所见所得写出来让读者看的懂，老夜也是个小白站长，谈不上大佬只是兴趣爱好而已，以后有时间会把自己会的一一分享在站内，就当为自己做笔记了。今天就给大家带来的教程就是在你的网站左下角增加一个蒲公英特效，效果已本站为准，喜欢上的可以直接加到自己的网站上，教程如下：
代码一：
直接将下面的代码添加到网站的</body>之前，通常都是footer.php文件中修改
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <!-- 网站底部蒲公英特效开始 --> <div class="dandelion"> <span class="smalldan"></span> <span class="bigdan"></span> </div> <style type="text/css"> @media screen and (max-width:600px){ .dandelion{display: none !important;} } .dandelion .smalldan { width: 36px; height: 60px; left: 88px; background-position: 0 -90px; border: 0px solid red; } .dandelion span { -webkit-animation: ball-x 3s linear 2s infinite; -moz-animation: ball-x 3s linear 2s infinite; animation: ball-x 3s linear 2s infinite; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; transform-origin: bottom center; } .dandelion span { display: block; position: fixed; z-index:9999999999; bottom: 0px; background-image: url(蒲公英图片的路径地址); background-repeat: no-repeat; _background: none; } <!-- www.yeyulingfeng.com --> .dandelion .bigdan { width: 64px; height: 115px; left: 41px; background-position: -86px -36px; border: 0px solid red; } @keyframes ball-x { 0% { transform:rotate(0deg);} 25% { transform:rotate(5deg); } 50% { transform:rotate(0deg);} 75% { transform:rotate(-5deg);} 100% { transform:rotate(0deg);} } @-webkit-keyframes ball-x { 0% { -webkit-transform:rotate(0deg);} 25% { -webkit-transform:rotate(5deg); } 50% { -webkit-transform:rotate(0deg);} 75% { -webkit-transform:rotate(-5deg);} 100% { -webkit-transform:rotate(0deg);} } @-moz-keyframes ball-x { 0% { -moz-transform:rotate(0deg);} 25% { -moz-transform:rotate(5deg); } 50% { -moz-transform:rotate(0deg);} 75% { -moz-transform:rotate(-5deg);} 100% { -moz-transform:rotate(0deg);} } </style> <!-- 网站底部蒲公英特效结束 --> |
代码二：
相对上面的代码进行了整理，把CSS样式分开加载，有利于提高网站访问速度
CSS代码:
添加到网站主题CSS文件中，通常是main.css或者style.css文件中修改
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | /*左下角蒲公英*/ .dandelion .smalldan { width: 36px; height: 60px; left: 21px; background-position: 0 -90px; border: 0px solid red; } .dandelion span { -webkit-animation: ball-x 3s linear 2s infinite; -moz-animation: ball-x 3s linear 2s infinite; animation: ball-x 3s linear 2s infinite; -webkit-transform-origin: bottombottom center; -moz-transform-origin: bottombottom center; transform-origin: bottombottom center; } .dandelion span { display: block;bottom:0px; position: fixed; z-index:9999999999; bottombottom: 0px; background-image: url(img/pugongying.png); background-repeat: no-repeat; _background: none; } .dandelion .bigdan { width: 64px; height: 115px; left: 47px; background-position: -86px -36px; border: 0px solid red; } @media screen and (max-width:600px){ .dandelion{display: none !important;} } @keyframes ball-x { 0% { transform:rotate(0deg);} 20% { transform:rotate(5deg); } 40% { transform:rotate(0deg);} 60% { transform:rotate(-5deg);} 80% { transform:rotate(0deg);} 100% { transform:rotate(0deg);} } @-webkit-keyframes ball-x { 0% { -webkit-transform:rotate(0deg);} 20% { -webkit-transform:rotate(5deg); } 40% { -webkit-transform:rotate(0deg);} 60% { -webkit-transform:rotate(-5deg);} 80% { -webkit-transform:rotate(0deg);} 100% { -webkit-transform:rotate(0deg);} } @-moz-keyframes ball-x { 0% { -moz-transform:rotate(0deg);} 20% { -moz-transform:rotate(5deg); } 40% { -moz-transform:rotate(0deg);} 60% { -moz-transform:rotate(-5deg);} 80% { -moz-transform:rotate(0deg);} 100% { -moz-transform:rotate(0deg);} } |
再将以下代码添加至网站的</body>之前
1 2 3 4 | <div class="dandelion"> <span class="smalldan"></span> <span class="bigdan"></span> </div> |
以上两种方法均能在网站左下角实现蒲公英特效，最后附上代码中需要的图片素材。鼠标右键下载，上传至网站目录，把图片路径或地址加到以上代码中，修改后刷新浏览器缓存即可看到效果了。如有不懂之处或者建议，欢迎文章底部留言……
2018年7月2日 下午7:02 沙发
好熟悉的文章。。。
2018年7月3日 下午5:34 1层
@夜雨聆风 啧啧啧