如何给自己的网站增加动态蒲公英,见漫游星空网站右下方

将代码分享给感兴趣的小伙伴们。这里用的是其他大神的源代码,自己做了稍微的调整。

将本段代码复制到任意一个可以接受脚本的地方都可以使用。

云落的主题可以放在 底部设置—全站底部脚本代码 里

 

<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;
right: 108px; //这边是小蒲公英显示的地方。居左:left;局右:right。自行修改。后面的参数是距边界的距离。
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(http://7vijc7.com1.z0.glb.clouddn.com/wp-content/uploads/2015/07/2015071806445693.png);
background-repeat: no-repeat;
_background: none;
}
.dandelion .bigdan {
width: 64px;
height: 115px;
right: 61px;//这边是大蒲公英的样式,同上。
background-position: -86px -36px;
border: 0px solid red;
}
@keyframes ball-x {
0% { transform:rotate(0deg);}
25% { transform:rotate(5deg); }
50% { transform:rotate(0deg);}
75% { transform:rotate(-5deg);}
100% { transform:rotate(0deg);} //我见过几个这边多设置了一个停顿点,会导致蒲公英摇摆时卡顿。调整成这样就可以了。以下同。
}
@-webkit-keyframes ball-x {
0% { -webkit-transform:rotate(0deg);}
25% { -webkit-transform:rotate(5deg); }
50% { -webkit-transform:rotate(0deg);}
75% { -webkit-transform:rotate(-5deg);}
100% { -webkit-transform:rotate(0deg);}
}
@-moz-keyframes ball-x {
0% { -moz-transform:rotate(0deg);}
25% { -moz-transform:rotate(5deg); }
50% { -moz-transform:rotate(0deg);}
75% { -moz-transform:rotate(-5deg);}
100% { -moz-transform:rotate(0deg);}
}
</style>

严正声明:本站只出售html页面效果模板,不提供任何类型的网站内容数据,模板仅供学习交流使用,不得用于任何商业以及触犯国家法律法规的用途,违者需自行承担全部责任,与本站无以及模板设计作者无关,本站以及模板作者不承担任何连带责任!!!!
关爱邦 | 网站源码程序下载_免费商业源码分享! » 如何给自己的网站增加动态蒲公英,见漫游星空网站右下方

发表评论

提供最优质的资源集合

立即查看 了解详情