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>
效果：
需要图片如下：
