CSS3西游記西天取經(jīng)場(chǎng)景動(dòng)畫特效

2024-09-05 12:17:26

字體：大中小

供稿：網(wǎng)友

CSS3西游記西天取經(jīng)場(chǎng)景動(dòng)畫特效是一款css3 animation動(dòng)畫屬性制作的夢(mèng)幻西游師徒四人取經(jīng)場(chǎng)景動(dòng)畫特效。

CSS3,西游記,CSS3場(chǎng)景,西天取經(jīng)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS3西游記西天取經(jīng)場(chǎng)景動(dòng)畫特效 - vevb站長(zhǎng)素材</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   id="iwvjtn8m0"   class="wk"></div><div   id="iwvjtn8m0"   class="bj"></div><div   id="iwvjtn8m0"   class="ts"></div><div   id="iwvjtn8m0"   class="ss"></div><div   id="iwvjtn8m0"   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>來(lái)源：vevb站長(zhǎng)素材</p></div></body></html>

上一篇：純CSS3折角樣式分頁(yè)代碼

下一篇：設(shè)為首頁(yè)的JS代碼