用CSS在网站底部加上蒲公英动态效果的实现方法

　　在做网站的时候我们经常想要实现一些动态效果来为网站增添一点活力，而通常情况下，实现动态效果都需要用到JS代码。JS能够实现比较复杂且炫酷的动态效果，但通常情况下JS会拖慢网站的响应速度且不利于搜索引擎优化。怎么做的既有动态效果又利于搜索引擎SEO优化呢？今天姜成seo给大家推荐一个用CSS实现的蒲公英动态效果。下面是完整代码，将代码加到网站底部模版文件(一般为foot.htm)里即可实现效果，此外，如果想让首页代码精简一点也可以跟姜成seo博客一样将<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 { 　　w