CSS3西游记西天取经场景动画特效

2024-09-05 12:17:26

字体：大中小

来源：转载

供稿：网友

CSS3西游记西天取经场景动画特效是一款css3 animation动画属性制作的梦幻西游师徒四人取经场景动画特效。

CSS3,西游记,CSS3场景,西天取经

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS3西游记西天取经场景动画特效 - vevb站长素材</title><style type="text/css">	* {		padding: 0;		margin: 0;		list-style: none;	}	html,body {		height: 100%;	}	.main {		height: 100%;		width: 100%;		-webkit-background-size: cover;		background-size: cover;		overflow: hidden;		position: relative;	}	.main ul {		height: 100%;		width: 3920px;		position: absolute;		top: 0;		left: 0;		animation: dong 50s linear infinite;	}	@keyframes dong {		0% {			left: 0;		}		100% {			left: 1920px;		}	}	.main ul li {		height: 100%;		width: 100%;		background: url(/jscss/demoimg/20180728/2.jpg);		float: left;		margin-left: -2000px;	}	.wk {		z-index: 999;		width: 200px;		height: 180px;		background: url(/jscss/demoimg/20180728/west_01_3ca39fe.png) 0 0 no-repeat;		/*margin: 400px auto;*/		position: absolute;		top: 55%;		left: 20%;		animation: wkzou 1s steps(8) infinite;	}	@keyframes wkzou {		to {			background-position: -1600px 0;		}	}	.bj {		z-index: 999;		width: 200px;		height: 180px;		background: url(/jscss/demoimg/20180728/west_02_47bad19.png) 0 0 no-repeat;		/*margin: 400px auto;*/		position: absolute;		top: 55%;		left: 35%;		animation: bjzou 1s steps(8) infinite;	}	@keyframes bjzou {		to {			background-position: -1600px 0;		}	}	.ts {		z-index: 999;		width: 170px;		height: 240px;		background: url(/jscss/demoimg/20180728/west_03_f962447.png) 0 0 no-repeat;		/*margin: 400px auto;*/		position: absolute;		top: 50%;		left: 50%;		animation: tszou 1s steps(8) infinite;	}	@keyframes tszou {		to {			background-position: -1360px 0;		}	}	.ss {		z-index: 999;		width: 210px;		height: 200px;		background: url(/jscss/demoimg/20180728/west_04_6516d80.png) 0 0 no-repeat;		/*margin: 400px auto;*/		position: absolute;		top: 57%;		left: 62%;		animation: sszou 1s steps(8) infinite;	}	@keyframes sszou {		to {			background-position: -1680px 0;		}	}</style></head><body><div class="wk"></div><div class="bj"></div><div class="ts"></div><div class="ss"></div><div class="main">	<ul>		<li></li>		<li></li>	</ul></div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p><p>来源：vevb站长素材</p></div></body></html>

上一篇：纯CSS3折角样式分页代码

下一篇：设为首页的JS代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注