梦幻西游动画效果展示

展示如下图动画效果：
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>梦幻西游</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		html,body,.content{
			width: 100%;
			height: 100%;
		}
		.content{
			position: relative;
			width: 100%;
			overflow: hidden;
		}
		.bg{
			position: relative;
			width: 3920px;
			height: 100%;
			background-image: url('./img/bg.jpg');
			background-repeat: repeat-x;

			animation-name: bg;/* 引用的动画名称 */
			animation-duration: 46s;/* 动画持续时间/次 */
			animation-timing-function: linear;/*动画执行的时间曲线为线性,即匀速*/
			animation-iteration-count: infinite;/* 无限循环 */
		}
		.st{
			position: absolute;
			width: 950px;
			height: 180px;
			left: 50%;
			margin-left: -475px;
			bottom: 220px;
		}
		.st>ul{
			width: 950px;
			height: 180px;
			display: flex;
		}
		.st>ul>li{
			flex: 1;
			margin-right: 50px;
			overflow: hidden;
		}
		.st >ul >li >div{
			width: 1600px;
			height: 180px;
			font-size: 0;

			animation-name: st; /* 引用的动画名称 */
			animation-duration: 1s;/* 动画持续时间/次 */
			animation-iteration-count: infinite;/* 无限循环 */
			animation-timing-function: steps(8);/* 图长1600px，走8步，每次跨度为200px */
			/* 引用动画效果名为st的动画，1s内走八步，每部跨度为200px即为一张小图，打开浏览器将无限循环至关闭浏览器 */
		}
		.st >ul >li >div>img{
			width: 100%;
		}

		@keyframes st{  /*动画效果，从师徒图片的最左边到图片的最右边*/
			from{
				margin-left: 0;
			}
			to{
				margin-left: -1600px;
			}
		}

		@keyframes bg{/*动画效果，从背景图片的最右边到图片的最左边*/
			from{
				left: -1920px;
			}
			to{
				left: 0px;
			}
		}

	</style>
</head>
<body>
	<div class="content">
		<!-- 背景 -->
		<div class="bg"></div>
		<!-- 师徒四人 -->
		<div class="st">
			<ul>
				<li>
					<div><img src="./img/wk.png"></div>
				</li>
				<li>
					<div><img src="./img/bj.png"></div>
				</li>
				<li>
					<div><img src="./img/ts.png"></div>
				</li>
				<li>
					<div><img src="./img/ss.png"></div>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>
来源：https://www.cnblogs.com/lidyfamily/p/11317370.html
标签
动画
动漫