＜CSS练习＞奔跑的小熊 CSS3动画含素材

本案例用了2个动画
第一个动画是整张的素材（文章末尾）从左往右依次划过盒子大小为：width: 200px;height: 100px; 这里animation属性用步长steps()
第二个是第一个的动画一直运动到浏览器的中央 animoaion-fill-mode:forwards;
因为素材是白色的我这里设置了背景图为粉色更方便看出效果
静态效果图：
小熊从左边一直跑跑到中间继续原地跑

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div {position: absolute;width: 200px;height: 100px;background: url(素材/xiong.png) no-repeat;background-color: pink;animation: bear 1s steps(8) infinite, move 3s forwards;}@keyframes bear{0%{background-position: 0;}100%{background-position: -1600px 0;}}@keyframes move{from{left: 0;}to{left: 50%;/* margin-left: -100px; */transform: translateX(-50%);}}</style></head><body><div class=""></div></body>
</html>

素材：

＜CSS练习＞奔跑的小熊 CSS3动画含素材相关推荐

HTML+CSS如何实现奔跑的小熊的动画？
HTML+ CSS如何实现奔跑的小熊的动画 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
css ltimg gt只适应,css3动画,CSS3实战小技巧--使用CSS变量实现波浪动画
css3动画,CSS3实用技巧--利用CSS变量实现波浪动画.今日头条新闻(www.leadip.com)为您带来相关内容的详细介绍. CSS3实用技巧--用CSS变量实现波浪动画 2017年3月,微 ...
html动画用css还是js,javascript与css3动画结合使用小结
当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画.因为在桌面浏览器上, 并非所有的都支持css3.用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养.总有不少人会觉 ...
html+fadein动画,使用Animate.css制作超炫的CSS3动画
如何使用首先引入animate css文件. 然后给指定的元素加上指定的动画class样式名. 这里包括两个class名,第一个是基本的,也是必须添加的样式名,任何想实现的元素都得添加这个样式.第二 ...
奔跑的小熊案例（含图）
图一是雪山图,图二是小熊图,注意在没放雪山的背景前要加点背景颜色才能看得到小熊. 代码部分 <head><meta charset="UTF-8">< ...
css 水珠动图,使用CSS3动画、渐变和伪元素实现的水滴动画
CSS 语言: CSSSCSS 确定 /* General Demo Style */ @import url(http://fonts.googleapis.com/css?family=Lato: ...
百度浏览器奔跑的小熊
原百度浏览器,奔跑的小熊通过动画的方式,让图片看起来像是在奔跑一样原理其实很简单------ 图片的大小是1600px,一共就8个小熊,分成8个部分,让这八个部分在一定时间内从头到尾显示一遍,就形 ...
CSS动画奔跑的小熊案例
CSS动画奔跑的小熊案例资源个人学习代码 <!DOCTYPE html> <html lang="zh-CN"><head><meta ...
【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）
本期带大家制作百度浏览器官网(目前官网已经注销)中奔跑的北极熊的动画效果. 动画原理奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起,形成一张背景图片,然后设置一个盒子,将背景图片放入,通过设 ...

＜CSS练习＞奔跑的小熊 CSS3动画含素材

＜CSS练习＞奔跑的小熊 CSS3动画含素材相关推荐

最新文章

热门文章

＜CSS练习＞ 奔跑的小熊 CSS3动画 含素材

＜CSS练习＞ 奔跑的小熊 CSS3动画 含素材相关推荐

最新文章

热门文章

＜CSS练习＞奔跑的小熊 CSS3动画含素材

＜CSS练习＞奔跑的小熊 CSS3动画含素材相关推荐