虽然网站左下角的蒲公英代码已经满大街了，但是由于这个蒲公英摆哪个网站都很好看，所以我还是要斩钉截铁的发出来给我自己看(不，我这不是认真的)！
纯CSS，只要不是JS控制而且不影响SEO的代码 —— 都是真香。
<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(https://www.barben.cn/image/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>
使用方法：
第一段代码当然是放在HTML文件的<body></body>中啦！如果你是有模板的网站，比如wordpress，就可以放在网站的footer模板中！
第二段代码当然是放在HTML文件中的<head></head>中啦！但是我推荐你像我一样，去掉代码中的style标签，也就是第一行和最后一行，并放在全站引入的css样式文件中！
