如何用CSS实现百度浏览器官网的北极熊奔跑动画

效果图：

背景图是自己另外找的，北极熊在奔跑的同时，背景图也在向它身后移动。

素材：

实现思路：

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实现百度浏览器官网的北极熊奔跑动画相关推荐

小狐狸被抛弃？火狐浏览器官网域名仍为firefox.com.cn
在火狐浏览器"狐狸门"爆火的同时,传出了火狐浏览器正着手清除Logo中狐狸元素的消息,火狐浏览器要"杀死"小狐狸?一时间,Mozilla官方收到无数网友邮件,或 ...
tor浏览器官网地址
https://www.torproject.org 1. 复制上面官网链接,去浏览器搜索,点击如下网站 2. 进入首页,选择要下载的版本,操作系统不同下载的版本也不同,我这以windows为例 3 ...
html 自动打开qq浏览器,如何保证成功设置默认浏览器-在线帮助-QQ浏览器官网
如何保证成功设置默认浏览器? 您可以在QQ浏览器菜单或者选项中,设置QQ浏览器为默认浏览器.如果设置过程中遇到失败,可能是第三方软件拦截造成,常见的解决方法: 1. 如果您安装了金山毒霸( ),请检查 ...
如何从Google Chrome网络浏览器官网下载Google Chrome离线安装包
版权声明:本文为博主[hailangnet]原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 原文链接:https://blog.csdn.net/hailangn ...
win8最好用的浏览器官网免费下载
win8最好用的浏览器,你知道是哪一个吗? 下面给大家推荐一款很好的浏览器,欢迎大家使用! 这个是一款很轻便的浏览器,速度极快! 下载地址下载地址
前端每日实战：108# 视频演示如何用 CSS 和 D3 创作一个抽象的黑白交叠动画
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/Yjomyd 可交互视频此视频是可 ...
如何用 CSS 和 D3 创作一个抽象的黑白交叠动画
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/Yjomyd 可交互视频 ...
【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）
本期带大家制作百度浏览器官网(目前官网已经注销)中奔跑的北极熊的动画效果. 动画原理奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起,形成一张背景图片,然后设置一个盒子,将背景图片放入,通过设 ...
利用CSS3动画制作“百度浏览器”官网奔跑的北极熊
现在各大浏览器的官网是越做越炫酷了.比如百度浏览器官网,虽然我不用这个浏览器呢(只用原版Chrome,不为其他,只因国内换壳的浏览器内核版本太低,跟Chrome官方始终有差距).但是不得不佩服百度的设 ...

如何用CSS实现百度浏览器官网的北极熊奔跑动画

如何用CSS实现百度浏览器官网的北极熊奔跑动画相关推荐

最新文章

热门文章