简单的CSS3动画案例—

这个动画效果其实很简单，只需要用精灵图的方式加上动画和过渡效果就可以实现，用运动曲线steps()，分成8步steps(8)，每次向x轴负方向移动1/8。具体细节还是直接看代码吧：

<div class="bg2"></div>
<div class="bg1"></div>
<div class="bear"></div>

图片如下：

样式：

        * {padding: 0;margin: 0;}body {background-color: #eee;}.bear {position: absolute;top: 500px;width: 200px;height: 100px;background: url(./images/bear.png) no-repeat;/* 添加多个动画，逗号隔开 */animation: bear 1s steps(8) infinite, move 5s forwards;}.bg1 {position: absolute;top: 270px;width: 100%;height: 336px;background: url(./images/bg1.png) repeat;animation: bg1 50s linear infinite;}.bg2 {position: absolute;top: 84px;width: 100%;height: 569px;background: url(./images/bg2.png) repeat;animation: bg1 80s linear infinite;}@keyframes bg1 {0% {background-position: 0 0;}100% {background-position: -3840px 0;}}@keyframes bg2 {0% {background-position: 0 0;}100% {background-position: -3840px 0;}}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes move {0% {left: 0;}100% {left: 50%;transform: translateX(-50%);}}

简单的CSS3动画案例——奔跑的熊哥相关推荐

18个强大的纯CSS3动画案例分享
编辑整理 | web前端开发在之前,我也分享过很多关于CSS3,HTML5的动画案例,今天我要与你分享的这18个动画案例,也是比较炫酷的,可以实现很多交互,这些CSS3动画,可以给你的网页增添不少趣 ...
html图片动态案例,10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了1 ...
css3d动画案例,10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了1 ...
5分钟教你利用css3动画实现奔跑的北极熊效果
实现原理:利用css3动画中的animation-timing-function的steps(),让一张有连续动作图片一段一段的在页面上显示出来,从而实现动画效果. 1.需要素材: 2.准备一个div ...
css3动画案例，滤镜的各个使用比较
css动画案例,用案例看出其用法动画复合写法案例,制作音乐盒滤镜滤镜阴影与盒子阴影的对比. 动画动画通过@keyframs定义动画. 在指定元素中,通过animation属性来调用动画. ...
css3动画实现奔跑的火柴人
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
css3动画案例—太阳大海跳动
要点: 1.一个动画定义完成之后,任何元素只要调用这个动画的名字,都可以执行这个动画 2.同一个动画,里面的多个效果也是有前后顺序的,注意效果的差别 html代码: <!DOCTYPE html ...
css3 动画+奔跑的熊案例
动画的使用 1.先定义动画 2.调用动画用keyframes定义动画 @keyframes 动画名称{ /* 开始状态 / 0%{ } / 结束状态 / 100%{ } } 调用动画 animati ...
京东css3动画全屏海报_30个免费的CSS3动画片段代码
30个免费的CSS3动画片段代码 Sponsor 对于网页设计师来说,前端代码CSS/HTML不是强项,但有时候也是需要写的.特别是现在流行CSS3动画,学习和了解一些相关知识是必须的. CSS3动画 ...
炫酷的css3动作源码,8 个超炫酷的纯 CSS3 动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

简单的CSS3动画案例——奔跑的熊哥

简单的CSS3动画案例——奔跑的熊哥相关推荐

最新文章

热门文章