CSS动画-西游记源码

释放双眼,带上耳机,听听看~!

先给大家看一下效果图(PS:其实是动图的)

html代码如下:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>西天取经</title>
  <style>
	body{
		margin: 0; /* 去除外边距 */
		background-image:url('images/bac.webp');
		background-position:1px 0;
		/* 动画: 动画名称 秒数 步 循环播放 - 适用于bgi */
		animation:bg 100s steps(1920) infinite ;/* 动画 动画名称 */
		background-size: cover;
        background-attachment: fixed;
        background-position: center 0;
	}
	.list{
		position:relative; /* 相对定位 */
		width:100%;
		height:200px;
		/*background:red;*/
		top:600px;
	}



@media screen and (max-width: 1221px) { 
    
    .wapnone{
        
        top:130ch;
        
        
    }
}







	.list div{
		width:180px;
		height:180px;
		/* background-color:skyblue; */

	}

	.list .list-1{
		background-image:url('images/west_01.png');
		position:absolute;
		top:0;
		left:20%;
		background-position:1px 0;
		animation:run 1s steps(8) infinite ;/* 动画 动画名称 */
	}

	.list .list-2{
		background-image:url('images/west_02.png');
		position:absolute;
		top:0;
		left:35%;
		animation:run 1s steps(8) infinite ;/* 动画 动画名称 */
	}
	.list .list-3{
		/* 背景图 */
		background-image:url('images/west_03.png');
		/* 定位 */
		position:absolute; /* 定位:绝对定位 */
		top:0; /* 当前标签的上方距离当前标签的父标签距离:0 */
		left:50%; /* 当前标签的左边距离父标签的距离:父标签宽度的40% */
		/* 动画: 动画名称 秒数 步 循环播放 -  适用于单位人物的动画 */
		animation:ts 1s steps(8) infinite ;
	}
	.list .list-4{
		background-image:url('images/west_04.png');
		position:absolute;
		top:0;
		left:65%;
		animation:ss 1s steps(8) infinite ;/* 动画 动画名称 */
	}
	
	/* 动画 ,run 对应 animation:run 1s steps(8) infinite ; 中的run */
	@keyframes run{
		to{
			background-position:-1600px 0;
		}
	}

	@keyframes ts{
		to{
		 background-position: -1360px 0;
		}
	}
	@keyframes ss{
		to{
		 background-position: -1680px 0;
		}
	}
	@keyframes bg{
		to{
		 background-position: 1920px 0;
		}
	}
  </style>
 </head>
 <body>

	<div class='list wapnone'>
		<div class='list-1'></div>
		<div class='list-2'></div>
		<div class='list-3'></div>
		<div class='list-4'></div>
		</div>
 </body>
</html>

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA买糖
共{{data.count}}人
人已赞赏
默认

一句代码禁用Gutenberg编辑器

2021-11-8 10:57:56

默认

CNM.SB个人主页全开源版本免费下载 个人官网展示单页

2021-11-11 16:34:09

声明:本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 xutian@ahap.cn 或点击右侧 私信:许天娱乐 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
有新私信 私信列表
搜索