实现效果：一只熊从左边跑到中间，然后在屏幕中间
思路：1、准备一个盒子（恰好可以装一个熊，然后不停的更换大熊的位置，让一系列的PNG图片像连环画一样做移动，营造奔跑的感觉
2、让大熊从左边走到中间
代码：
<style>
.box {
position: relative;
height: 350px;
margin: 100px auto;
background-image: url(../images/bingshan.jpg);
}
.bear {
position: absolute;
top: 250px;
left: 0;
width: 200px;
height: 100px;
background-image: url(../images/bear.png);
/* 不能用滑动，要分8步完成 infinite表示无限循环*/
/* 可以添加多个动画，中间用逗号分开 */
/* forwards停留在结束的地方 */
animation: bear steps(8) 1s infinite, move forwards 7s;
}
/* 熊奔跑的动画 */
@keyframes bear {
0% {}
100% {
background-position: -1600px 0;
}
}
/* 大熊从左边跑到中间 */
@keyframes move {
0% {}
100% {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div class="box">
<div class="bear"></div>
</div>
</body>
6133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
