html网页蒲公英特效代码,代码实现网页左下角添加蒲公英飘动特效

网页左下角有一个蒲公英飘动特效，相信很多站长都见过，为此，橘子君也做了一番研究，实现蒲公英飘动特效还是比较简单。只需在网页中加入以下代码即可实现。如果是想全站展示，建议将特效代码添加到footer文件中。

蒲公英特效代码

@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://mat1.gtimg.com/www/mb/images/zt/memory/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);}

}

PS：在电脑上可以点击运行进入预览，群聊时博主见过很多新手站长说一看到代码就头疼，就会觉得很复杂，其实现在的互联网如此开放，很多工作不再是敲代码了，借力互联网，给网页加代码也是一件比较简单的事了。