用CSS在博客园底部加上蒲公英动态效果的实现方法

在做网站的时候我们经常想要实现一些动态效果来为网站增添一点活力，

而通常情况下，实现动态效果都需要用到JS代码。JS能够实现比较复杂且炫酷的动态效果，

但通常情况下JS会拖慢网站的响应速度且不利于搜索引擎优化。怎么做的既有动态效果又利于搜索引擎

大家推荐一个用CSS实现的蒲公英动态效果。下面是完整代码，将代码加到网站底部模版文件(一般为foot.htm)里即可实现效果，

此外，如果想让首页代码精简一点，将<style></style>里面的文件写到你的CSS文件里来调用，实现的效果一样。

代码实现如下：

　

<!--蒲公英-->
　　<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: 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: 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(http://www.doubiseo.com/images/pgy.png);
　　background-repeat: no-repeat;
　　_background: none;
　　}
　　.dandelion .bigdan {
　　width: 64px;
　　height: 115px;
　　left: 47px;
　　background-position: -86px -36px;
　　border: 0px solid red;
　　}
　　@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);}
　　}
　　</style>

 

您可以考虑给博主来个小小的打赏以资鼓励，您的肯定将是我最大的动力。

作者： 落花四月

出处： https://www.cnblogs.com/lxz-1263030049/

关于作者：潜心于网络安全学习。如有问题或建议，请多多赐教！

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接.

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！