Wordpress

会飘动的蒲公英

如何给网站加上会飘动的蒲公英

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

如果无法投放效果,请检查自己的蒲公英图片对应路径是否一致

最简单测试方法,打开浏览器-绝对路径访问蒲公英图片所在位置

 

 

 

(2)

本文由 樱花博客 作者:樱花 发表,转载请注明来源!

关键词:

热评文章

评论:

1 条评论,访客:1 条,博主:0 条
  1. 森七
    森七发布于: 

    很不错的效果

发表评论