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