admin管理员组文章数量:1616033
效果图:
背景图是自己另外找的,北极熊在奔跑的同时,背景图也在向它身后移动。
素材:
实现思路:
1 先定义一个盒子来“装”北极熊,因为素材是 1600 x 100 px,包含8张北极熊动作图,所以盒子的宽高定为 200 x 100px,这样一来盒子每次只会显示“一只”北极熊了。
2 然后把北极熊素材作为上述盒子的背景图,然后配合animation动画,通过修改该盒子的 background-position ,来控制北极熊素材图的移动,然后我们看到展示出来的效果就会是北极熊的移动。
3 同理,也可以给背景设置一个类似的盒子,来控制背景图的移动。
4 盒子的嵌套关系为 body>背景图div>北极熊div
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
body>div {
position: relative;
width: 100%;
height: 1000px;
background: url("../../网页素材/建筑背景图.jpg") no-repeat;
animation: background_move 15s linear infinite;
}
body>div>div {
position: absolute;
width: 200px;
height: 100px;
margin: 600px 0;
background: url("../images/bear.png") no-repeat;
animation: bear 1s steps(8) infinite, move forwards 3s;
}
@keyframes bear {
0% {}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
@keyframes background_move {
0% {}
100% {
background-position: -2000px 0;
}
}
</style>
<title>Document</title>
</head>
<body>
<div>
<div>
</div>
</div>
</body>
</html>
版权声明:本文标题:如何用CSS实现百度浏览器官网的北极熊奔跑动画 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728734510a1170769.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论