WordPres添加飘动的蒲公英,网站底部栏没点什么东西一点都不好看,所以本人想添加飘动的蒲公英,废话不多说直接看效果图吧,摇晃的蒲公英还是挺漂亮的吧,拽立网,给网站点缀点缀也是挺有作用的,也可以直接看我网站的左下角,现在就是蒲公英的样子哟!今天我把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.鼠标右键选择保存蒲公英图片!

WordPres添加飘动的蒲公英-拽立网
提示:CSS代码我都调好了,如果你想放其他位子可以自己修改!

?

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