WSONX.COM
心之所愿,无所不成

WordPress 在网站底部添加蒲公英特效

征求热心网友的 [投稿] ,一起为美好的网络无私分享世界加油!

利用简单的代码调用,在网站底部添加一个蒲公英特效

以下代码,可以一起放到底部文件footer.php 里之前,也可以只放第一部分代码

第二部分CSS代码放到主题样式文件main.css或style.css文件里

主题后台支持自定义代码添加的也可以放到相应的地方

核心代码

<!-- 第一部分调用代码开始 -->
 <div class="dandelion">
 <span class="smalldan"></span>
 <span class="bigdan"></span>
</div>
<!-- 第一部分调用代码结束 -->
<!-- 第二部分CSS代码开始 -->
<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(https://p3-tt.byteimg.com/origin/pgc-image/ddf559ccdd0445a3b0c05fc10e972aff.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>
<!-- 第二部分CSS代码结束 -->

蒲公英图片,需要改地址的可以保存后再上传到自己服务器

WordPress 在网站底部添加蒲公英特效


赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《WordPress 在网站底部添加蒲公英特效》| 南星博客
文章链接:https://wsonx.com/archives/703.html
本站內容大部分来源于网络,仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。如有侵权内容请留言来信告知,本站將会立即处理 E-mail:gdsuiyuan@163.com

征求热心网友的 [投稿] ,一起为美好的网络无私分享世界加油!
觉得不错就分享给朋友吧➤

评论 抢沙发

#点我快捷打卡#

  • 昵称 (必填)
  • 邮箱 (必填)
  • Q Q(选填)
  • 网址