页面动画制作 将背景图片实现不平铺显示 运用css样式实现无限循环的动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>梦幻西游</title>
<style>
body{
background:url(img/xyq.webp);
}
.footer{
width: 760px;
height: 240px;
/*background-color: blue;*/
margin: 300px auto;
}
.west{
width: 190px;
height: 240px;
/*background-position: 0px 0px;*/
float: left;
background-repeat: no-repeat;
}
/*选择west的父元素的第一个子元素*/
.west:nth-child(1){
background: url(img/west_01.png) no-repeat;
/*背景平铺 不平铺*/
animation: play-1 1.4s steps(8) infinite;
/*绑定 名字 时间 脚步数 中间空白区域直接省略 无限循环*/
}
.west:nth-child(2){
background: url(img/west_02.png) no-repeat;
/*背景平铺 不平铺*/
animation: play-2 1.4s steps(8) infinite;
/*绑定 名字 时间 脚步数 中间空白区域直接省略 无限循环*/
}
.west:nth-child(3){
background: url(img/west_03.png) no-repeat;
/*背景平铺 不平铺*/
animation: play-3 1.4s steps(8) infinite;
/*绑定 名字 时间 脚步数 中间空白区域直接省略 无限循环*/
}
.west:nth-child(4){
background: url(img/west_04.png) no-repeat;
/*背景平铺 不平铺*/
animation: play-4 1.4s steps(8) infinite;
/*绑定 名字 时间 脚步数 中间空白区域直接省略 无限循环*/
}
/*css动画 名字 开始 结束*/
@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>
845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
