百度浏览器小熊奔跑动画前端

图片：共8个小熊

原理：
利用一个div盒子，只显示一个小熊的大小（w200，h100）
让图片在盒子内移动（往左走）达成动画效果
动画曲线中的steps（）完成

做法：
设置背景颜色，否则看不见小熊
声明一个div，设置宽高
设置背景图bear.png
声明动画函数bear，函数中声明始末位置
div中调用动画函数bear（）
移动到浏览器中央：
利用定位和move函数

效果图：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: #ccc;}div {position: absolute;width: 200px;height: 100px;background: url(bear.png) no-repeat;animation: bear 2s steps(8) infinite, move 1s forwards;}@keyframes bear {0% {background-position: 0 0;}100% {/* 往左走。所以是负数 */background-position: -1600px 0;}}@keyframes move {0% {left: 0;}100% {left: 50%;transform: translateX(-50%);}}</style>
</head><body><div></div>
</body></html>

百度浏览器小熊奔跑动画前端相关推荐

HTML5+CSS3原百度浏览器背景奔跑的北极熊，加了点小玩意
原百度浏览器背景效果,奔跑的北极熊. 主要是复习CSS3的动画效果. 加了点极光效果和切换模式. 需要素材可以在下方评论. <!DOCTYPE html> <html lang=&q ...
小熊奔跑动画（CSS3）
动画(animation)是CSS3具有颠覆性的特征之一,可以设置多个节点来精确控制一个或一组动画. 一.基本使用 1.定义动画: 用@keyframes定义动画 @keyframes 动画名称{0% ...
百度浏览器奔跑的小熊
原百度浏览器,奔跑的小熊通过动画的方式,让图片看起来像是在奔跑一样原理其实很简单------ 图片的大小是1600px,一共就8个小熊,分成8个部分,让这八个部分在一定时间内从头到尾显示一遍,就形 ...
利用CSS3动画制作“百度浏览器”官网奔跑的北极熊
现在各大浏览器的官网是越做越炫酷了.比如百度浏览器官网,虽然我不用这个浏览器呢(只用原版Chrome,不为其他,只因国内换壳的浏览器内核版本太低,跟Chrome官方始终有差距).但是不得不佩服百度的设 ...
【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）
本期带大家制作百度浏览器官网(目前官网已经注销)中奔跑的北极熊的动画效果. 动画原理奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起,形成一张背景图片,然后设置一个盒子,将背景图片放入,通过设 ...
HTML+CSS如何实现奔跑的小熊的动画？
HTML+ CSS如何实现奔跑的小熊的动画 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
CSS3动画实现小熊奔跑
目录一.需要注意的二.效果图三.代码四.项目所需图片一.需要注意的小熊.冰山和冰山黑影定位为绝对定位,有层级关系index. 冰山和冰山黑影必须水平方向重复repeat-x,否则会中断卡壳 ...
针对前端在百度浏览器总的固定定位的问题
再做一个广告宣传页的时候,碰到这样一个问题: 如上边这样一张图片,底部有一个按钮这个按钮固定在底部(fixed定位): 看似很简单的一个效果实现,然而在百度浏览器却出现了问题: 按钮在百度浏览器中会 ...
手机百度浏览器底部fixed悬浮框屏蔽问题，终极解决方案
手机百度APP或者浏览器屏蔽广告被很多网页前端设计师困扰,也有很多网友提供解决方案,但是目前很多就被百度识破,增加了屏蔽规则,使其失效! 网络目前提的办法: 1.使用伪类生成器也就是使用::afte ...

百度浏览器小熊奔跑动画前端

百度浏览器小熊奔跑动画前端相关推荐

最新文章

热门文章

百度浏览器小熊奔跑动画 前端

百度浏览器小熊奔跑动画 前端相关推荐

最新文章

热门文章

百度浏览器小熊奔跑动画前端

百度浏览器小熊奔跑动画前端相关推荐