css和html实现梦幻西游页面特效
如下：
我们要准备开发环境,viscode ,图片。
准备好了后面，我们就要开始了：
先在body里面写上我们要的结构主体：
<div class="footer"><div class="west west1">1</div><div class="west west2">2</div><div class="west west3">3</div><div class="west west4">4</div></div>
下面我们就来写嵌入样式
什么是嵌入样式：
嵌入方式指的是在 HTML 头部中的
示例：
<head><style>.content {background: red;}</style></head>
浏览器页面一般会自带样式：
所以我们一般要先把浏览器带的样式给清楚掉：
body{margin: 0;}或者*{margin:0;padding:0；}
添加下面样式：
<style>body{margin: 0;}.footer{width: 760px;height: 240px;margin: 300px auto;background-color: red;}.west{float: left;width: 25%;height: 100%;background-color: #33ccff;background-repeat: no-repeat;background-position-y: center;}.west1{background-image: url('./img/west_01.png');animation: swk 1.4s steps(8) infinite;}.west2{background-image: url('./img/west_02.png');animation: zbj 1.4s steps(8) infinite;}.west3{background-image: url('./img/west_03.png');animation: shs 1.4s steps(8) infinite;}.west4{background-image: url('./img/west_04.png');animation: ts 1.4s steps(8) infinite;}</style>
如图1：
我们看到的图片是静态的，如何要其动起来呢？
我们通过css里面的@keyframes 动画来实现：
<style>body{margin: 0;}.footer{width: 760px;height: 240px;margin: 300px auto;background-color: red;}.west{float: left;width: 25%;height: 100%;background-color: #33ccff;background-repeat: no-repeat;background-position-y: center;}.west1{background-image: url('./img/west_01.png');animation: swk 1.4s steps(8) infinite;}.west2{background-image: url('./img/west_02.png');animation: zbj 1.4s steps(8) infinite;}.west3{background-image: url('./img/west_03.png');animation: shs 1.4s steps(8) infinite;}.west4{background-image: url('./img/west_04.png');animation: ts 1.4s steps(8) infinite;}@keyframes swk{0%{background-position-x: 0px;}100%{background-position-x: -1600px;}}@keyframes zbj{0%{background-position-x: 0px;}100%{background-position-x: -1600px;}}@keyframes shs{0%{background-position-x: 0px;}100%{background-position-x: -1680px;}}@keyframes ts{0%{background-position-x: 0px;}100%{background-position-x: -1360px;}}</style>
现在就是动态效果了：
如下那么为什么唐僧是那样的呢，是因为，唐僧的图片的大小不一样，我们进入img查看其图片大小：
如图2：
完整代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-image: url('./img/bac.webp');}.footer{width: 760px;height: 240px;margin: 300px auto;/* background-color: red; */}.west{float: left;width: 25%;height: 100%;/* background-color: #33ccff; */background-repeat: no-repeat;background-position-y: center;}.west1{background-image: url('./img/west_01.png');animation: swk 1.4s steps(8) infinite;}.west2{background-image: url('./img/west_02.png');animation: zbj 1.4s steps(8) infinite;}.west3{background-image: url('./img/west_03.png');animation: ts 1.4s steps(8) infinite;}.west4{background-image: url('./img/west_04.png');animation: shs 1.4s steps(8) infinite;}@keyframes swk{0%{background-position-x: 0px;}100%{background-position-x: -1600px;}}@keyframes zbj{0%{background-position-x: 0px;}100%{background-position-x: -1600px;}}@keyframes shs{0%{background-position-x: 0px;}100%{background-position-x: -1680px;}}@keyframes ts{0%{background-position-x: 0px;}100%{background-position-x: -1360px;}}</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>
效果：
需要图片如下：
