用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>

如果有什么不明白的地方，留言或者加我！！！

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

微信打赏支付宝打赏

我很菜，所以我会努力的！
努力是因为不想让在乎的人失望！
博主整理不易，如果喜欢推荐关注一下博主哦！

博主喜欢广交好友下面是我的联系方式：
QQ：1263030049

微信：liu1263030049
加好友前请注明原因谢谢

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

猜你喜欢