<!DOCTYPE html><html lang="en"><!--头部标签--><head><meta charset="UTF-8"><title>造梦西游</title><!-- style 给网页中的标签装饰，CSS样式（层叠样式表） --><style>/*标签选择器在给标签设置默认样式的时候可以选择标签选择器*/body{/*外边距的样式*/margin: 0;background-image: url("images/背景图.webp");}/*class选择器*/.footer{/*宽度 像素为单位*/width: 760px;/*高度 像素为单位*/height: 240px;/*背景颜色 颜色值（颜色单词）background-color: #b1f5cc;*//*上下外边距 左右（auto自动相等）*/margin: 300px auto;}.west{/*浮动 向左浮动*/float: left;/*背景重复 平铺no-repeat就是不重复不平铺*/background-repeat: no-repeat;/*百分比是参考当前元素的父元素计算的*/width: 25%;height: 100%;/*背景位置 Y方向 居中*/background-position-y: center;}.west1{background-image: url("images/swk.png");/*播放动画 名称 时间 脚步（8） 循环播放*/animation: swk 1.4s steps(8) infinite;/*整个动画走1600px 走8步 每一步是200px 加上animation后 这200px是瞬间到达的*/}.west2{background-image: url("images/zbj.png");animation: zbj 1.4s steps(8) infinite;}.west3{background-image: url("images/ts.png");animation: ts 1.4s steps(8) infinite;}.west4{background-image: url("images/ss.png");animation: ss 1.4s steps(8) infinite;}/*关键帧（画面） 动画名称（见名知意）*/@keyframes swk{/*动画开始的画面*/0%{/*背景位置 X方向 开始的画面是0px*/background-position-x: 0px;}/*结束的画面 图片宽为1600像素 所以为-1600px*/100%{background-position-x: -1600px;}}@keyframes zbj{0%{background-position-x: 0px;}100%{background-position-x: -1600px;}}@keyframes ts{0%{background-position-x: 0px;}100%{background-position-x: -1360px;}}@keyframes ss{0%{background-position-x: 0px;}100%{background-position-x: -1680px;}}/*CSS3动画->只需要一切关键的画面 开始的画面 跟结束的画面传统动画->动画片 动态效果->有很多张静止连续的画面连续播放*/</style><!--身体标签--></head><body><div class="footer"><div class="west west1"></div><div class="west west2"></div><div class="west west3"></div><div class="west west4"></div></div></body></html>
