展示如下图动画效果：
实现代码如下：
<!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>