WordPres添加飘动的蒲公英,网站底部栏没点什么东西一点都不好看,所以本人想添加飘动的蒲公英,废话不多说直接看效果图吧,摇晃的蒲公英还是挺漂亮的吧,拽立网,给网站点缀点缀也是挺有作用的,也可以直接看我网站的左下角,现在就是蒲公英的样子哟!今天我把WordPres添加飘动的蒲公英方法分享给大家,请看以下操作!
添加后的效果图!
1.登陆你的后台管理,选择【外观】-【编辑】-【loper: 主题页脚 (footer.php)】
直接添加下面全部代码:【添加在最上面】
<!--飘动的蒲公英-->
<div class="dandelion"><span class="smalldan"></span><span class="bigdan"></span></div>
2.登陆你的后台管理,选择【外观】-【编辑】-【loper: 样式表 (style.css)】
直接添加下面全部代码:【添加到最下面】
/*飘动的蒲公英*/
@media screen and (max-width:600px) {
.dandelion {
display: none!important;
}
}
.dandelion .smalldan {
left: 21px;
width: 36px;
height: 60px;
border: 0 solid red;
background-position: 0 -90px;
}
.dandelion span {
position: fixed;
bottom: 0;
z-index: 9999;
display: block;
background: 0 0;
background-image: url(images/pgy.png);
background-repeat: no-repeat;
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-animation: ball-x 3s linear 2s infinite;
animation: ball-x 3s linear 2s infinite;
}
.dandelion .bigdan {
left: 47px;
width: 4pc;
height: 115px;
border: 0 solid red;
background-position: -86px -36px;
}
@keyframes ball-x {
0% {
transform: rotate(0);
}
20% {
transform: rotate(5deg);
}
40% {
transform: rotate(0);
}
60% {
transform: rotate(-5deg);
}
80%,to {
transform: rotate(0);
}
}
@-webkit-keyframes ball-x {
0% {
-webkit-transform: rotate(0);
}
20% {
-webkit-transform: rotate(5deg);
}
40% {
-webkit-transform: rotate(0);
}
60% {
-webkit-transform: rotate(-5deg);
}
80%,to {
-webkit-transform: rotate(0);
}
}
3.鼠标右键选择保存蒲公英图片!
提示:CSS代码我都调好了,如果你想放其他位子可以自己修改!

版权声明:本站原创文章,于2016年03月20日,由 拽立网 发表,共 1428 字。
打赏



很炫这样感觉就不太单调了
呵呵 你的才好看,有一只猫爬树…..
大家都是同类,喜欢用360浏览器!
管理员回复