web前端动画_西游记

本文问web前端基础知识点，重点是动画模块代码，感谢潭州课堂免费公开课。

使用语言：html、css

使用软件：editplus3 ,(txt文本也可以，改后缀 txt 为 html)

素材提取：（包含：效果展示文件、素材图：师徒四人、背景图）

链接：https://pan.baidu.com/s/1Mvna6fZ9rkQ4ybpzwKD3jA 提取码：ttja

效果图：（其实是动画页面，此处为静态截图）

web前端动画_西游记

代码：

<!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 ;/* 动画 动画名称 */
	}
	.list{
		position:relative; /* 相对定位 */
		width:100%;    /* 当前标签的宽度，随浏览器宽度而改变 */
		height:200px;    /* 当前标签的高度 200像素 */
		/*background:red;*/ /* 测试代码，用于凸显当前元素所占空间，完工后注掉 */
		top:400px; /* 当前标签相对父标签上方的距离：400px */ 
	}

	.list div{
		width:180px;
		height:180px;
		/* background-color:skyblue; */ /* 测试代码，用于凸显当前元素所占空间，完工后注掉 */

	}

    .list .list-3{
		/* 背景图 */
		background-image:url('images/west_03.png');
		/* 当前标签的定位 */
		position:absolute; /* 定位：绝对定位 */
		top:0; /* 当前标签的上方距离当前标签的父标签的距离：0 */
		left:40%; /* 当前标签的左边距离父标签的距离：父标签宽度的40% */
		/* 动画： 动画名称 秒数 步 循环播放 -  适用于单位人物的动画 */
		animation:ts 1s steps(8) infinite ;
	}

	.list .list-1{
		background-image:url('images/west_01.png');
		position:absolute;
		top:0;
		left:5%;
		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:25%;
		animation:run 1s steps(8) infinite ;/* 动画 动画名称 */
	}
	
	.list .list-4{
		background-image:url('images/west_04.png');
		position:absolute;
		top:0;
		left:60%;
		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'>
		<div class='list-1'></div>
		<div class='list-2'></div>
		<div class='list-3'></div>
		<div class='list-4'></div>
	</div>
 </body>
</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 ;/* 动画 动画名称 */
	}
	.list{
		position:relative; /* 相对定位 */
		width:100%;
		height:200px;
		/*background:red;*/
		top:400px;
	}

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

	}

	.list .list-1{
        /* 背景图：url('图片存储路径') */
		background-image:url('images/west_01.png');
        /* 定位 */
        position:absolute; /* 定位：绝对定位 */
		top:0; /* 当前标签的上方距离当前标签的父标签距离：0 */
		left:5%; /* 当前标签的左边距离父标签的距离：父标签宽度的5% */

		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:25%;
		animation:run 1s steps(8) infinite ;/* 动画 动画名称 */
	}
	.list .list-3{
		/* 背景图 */
		background-image:url('images/west_03.png');
		/* 定位 */
		position:absolute; /* 定位：绝对定位 */
		top:0; /* 当前标签的上方距离当前标签的父标签距离：0 */
		left:40%; /* 当前标签的左边距离父标签的距离：父标签宽度的40% */
		/* 动画： 动画名称 秒数 步 循环播放 -  适用于单位人物的动画 */
		animation:ts 1s steps(8) infinite ;
	}
	.list .list-4{
		background-image:url('images/west_04.png');
		position:absolute;
		top:0;
		left:60%;
		animation:ss 1s steps(8) infinite ;/* 动画 动画名称 */
	}
	
	/* 动画 ，run 对应 animation:run 1s steps(8) infinite ; 中的run */
	@keyframes run{
		to{
			background-position:-1600px 0; /* -1600px:与动画原图像素有关 */
            /* 1600px 为什么加“-”负号？在浏览器开发者模式中可为其增加删去“-”号，自行探索原因 */
		}
	}

	@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'>
		<div class='list-1'></div>
		<div class='list-2'></div>
		<div class='list-3'></div>
		<div class='list-4'></div>
	</div>
 </body>
</html>

get :

如何启动动画

动画图片的格式

当鼠标悬停时，被悬停的元素发生动画

.xxdiv{
    transition: .5s; /* css3 过渡: 0.5s */
}
/** 鼠标悬停到当前元素，改变样式 */
.xxdiv:hover{
    /* css 变换：位移 x y  */
    transform:translateY(-20px);
}

web前端动画_西游记

相关推荐