动画小练习
代码效果展示
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 标题 -->
<title>梦幻西游</title>
<!-- 网页样式 -->
<style>
body {
background: url(./images/xyq.webp) no-repeat;
}
.footer {
width: 760px;
height: 240px;
/* background-color: blue; */
margin: 350px auto;
}
.west {
width: 190px;
height: 240px;
float: left;
background-repeat: no-repeat !important;
}
/* 选择west的父元素的第一个子元素 */
.west:nth-child(1) {
/* background-color: green; */
background: url(./images/west_01.png);
/* 绑定 名字 时间 步数 无线循环 */
animation: play-1 1.4s steps(8) infinite;
}
.west:nth-child(2) {
background: url(./images/west_02.png);
animation: play-2 1.4s steps(8) infinite;
}
.west:nth-child(3) {
background: url(./images/west_03.png);
animation: play-3 1.4s steps(8) infinite;
}
.west:nth-child(4) {
background: url(./images/west_04.png);
animation: play-4 1.4s steps(8) infinite;
}
@keyframes play-1 {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes play-2 {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes play-3 {
0% {
background-position: 0 0;
}
100% {
background-position: -1360px 0;
}
}
@keyframes play-4 {
0% {
background-position: 0 0;
}
100% {
background-position: -1680px 0;
}
}
</style>
</head>
<!-- 网页身体 -->
<body>
<!-- 盒子 -->
<div class="footer">
<div class="west"></div>
<div class="west"></div>
<div class="west"></div>
<div class="west"></div>
</div>
</body>
</html>
代码图片素材
