用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - html代码库

梦幻西游底部师徒四人动态图

2020-07-05 作者:苏格拉底举报

[html]代码库

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>梦幻西游</title>
		<style>
			body{
				background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/ft2_7b14393.webp);
			}
			.footer{
				width: 760px;
				height: 300px;
				/* 背景颜色 */
				margin: 400px auto;/* 外边距  上下  左右 */
			}
			.west{
				float: left;/* 浮动 */
				width: 190px;
				height: 240px;
				
				
				background-repeat: no-repeat;
				 background-position-y:center;
				
			}
			.west:nth-child(1){
				background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_01_3ca39fe.png);
				background-position-x: 0px;/* -1600px */
				animation: move1 1.4s steps(8) infinite;
				}
			.west:nth-child(2){
					background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_02_47bad19.png);
					background-position-x: 0px;/* -1600px */
					animation: move2 1.4s steps(8) infinite;
				}
			.west:nth-child(3){
						background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_03_f962447.png);
						background-position-x: 0px;/* -1600px */
						animation: move3 1.4s steps(8) infinite;
				}
			.west:nth-child(4){
							background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_04_6516d80.png);
							background-position-x: 0px;/* -1600px */
							animation: move4 1.4s steps(8) infinite;
			}
			@keyframes move1{
				0%{
					background-position-x: 0px;
				}
				100%{
					background-position-x: -1600px;
				}
			}
			@keyframes move2{
				0%{
					background-position-x: 0px;
				}
				100%{
					background-position-x: -1600px;
				}
			}
			@keyframes move3{
				0%{
					background-position-x: 0px;
				}
				100%{
					background-position-x: -1360px;
				}
			}
			@keyframes move4{
				0%{
					background-position-x: 0px;
				}
				100%{
					background-position-x: -1660px;
				}
			}
		</style>
	</head>
	<body>
		<div class="footer">
		<div class="west"></div>
		<div class="west"></div>
		<div class="west"></div>
		<div class="west"></div>
	</body>
</html>

[代码运行效果截图]


梦幻西游底部师徒四人动态图


分享到:
更多

网友评论    (发表评论)

共3 条评论 1/1页

发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。