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管理员
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    有新消息 消息中心
    搜索