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.鼠标右键选择保存蒲公英图片！

提示：CSS代码我都调好了，如果你想放其他位子可以自己修改！