代码实现网页左下角添加蒲公英飘动特效_生活百科

代码实现网页左下角添加蒲公英飘动特效【代码实现网页左下角添加蒲公英飘动特效】网页左下角有一个蒲公英飘动特效，相信很多站长都见过，为此，橘子君也做了一番研究，实现蒲公英飘动特效还是比较简单。只需在网页中加入以下代码即可实现。如果是想全站展示，建议将特效代码添加到footer文件中。
蒲公英特效代码
<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://yafengwang.oss-cn-guangzhou.aliyuncs.com/uploads/article/2021/06/02/7934.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>PS：在电脑上可以点击运行进入预览，群聊时博主见过很多新手站长说一看到代码就头疼，就会觉得很复杂，其实现在的互联网如此开放，很多工作不再是敲代码了，借力互联网，给网页加代码也是一件比较简单的事了。