国内更专业
计算机技术平台

DUX主题底部加蒲公英动态特效教程

通知!

站长发福利啦,打开支付宝首页搜索“7960561”,即可领红包!机会不容错过哦!

外观→DUX主题设置→自定义代码→自定义底部代码

输入如下代码:

<!-- 网站底部蒲公英特效开始 -->
<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: 88px;
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://www.pydyun.com/wp-content/uploads/img/dandelion.png);
background-repeat: no-repeat;
_background: none;
}
.dandelion .bigdan {
width: 64px;
height: 115px;
left: 41px;
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>
<!-- 网站底部蒲公英特效结束 -->

赞(2) 打赏
未经允许不得转载:东云网 » DUX主题底部加蒲公英动态特效教程
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

东云科技,与您偕行!

免责声明联系我们

觉得文章有用就打赏一下文章作者吧,么么哒~

支付宝扫一扫打赏

微信扫一扫打赏