admin管理员组

文章数量:1534198


本期带大家制作百度浏览器官网（目前官网已经注销）中奔跑的北极熊的动画效果。

动画原理

奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起，形成一张背景图片，然后设置一个盒子，将背景图片放入，通过设置

animation-timing-function: steps();

盒子不动，让背景图片以片段为单位移动，当速度达到足够快时，就感觉北极熊正在奔跑。

背景图片

首先准备一张背景图片，当作北极熊奔跑的背景，不设置背景图片也可以，但要设置背景颜色，方便观看北极熊奔跑动画。本案例用的背景图片是雪山背景图片。
雪山背景图片

北极熊奔跑的片段拼接图

代码实现

1、搭建HTML结构

box为整体的大盒子，里面的img用于存放雪山背景图片，bear盒子用于展示北极熊奔跑动画。

<body>
    <div class="box">
        <img src="image/bg1.png" alt="" class="

本文标签： 北极熊不含官网浏览器背景

版权声明：本文标题：【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1726871683a1087923.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。