今天突然看到阿里云官网的一个悬浮效果挺炫的，就想知道到底是怎么做的，研究了半天，加了一个技术群，原来是css3做的，然后做了一个小 Demo记录下来:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="{CHARSET}">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <title></title>

        <style>

            .run{width: 100px; height:100px;position:absolute;left:0;top:10px; background: url(images/run.jpg) no-repeat;}

            .run{

                animation:runAnimation 300ms steps(5) infinite;

                -webkit-animation:runAnimation 300ms steps(5) infinite;

                -o-animation:runAnimation 300ms steps(5) infinite;

                -moz-animation:runAnimation 300ms steps(5) infinite;

            }

            @-webkit-keyframes runAnimation{

                from{background-position: 0px 0px;}

                to{background-position: -500px 0px;}

            }

            @-moz-keyframes runAnimation{

                from{background-position: 0px 0px;}

                to{background-position: -500px 0px;}

            }

            @-o-keyframes runAnimation{

                from{background-position: 0px 0px;}

                to{background-position: -500px 0px;}

            }

        </style>

    </head>

    <body>

        <div class="run"></div>

    </body>

</html>

效果就是图片中的小牛一直奔跑　　

1.首先，引入图片，图片是状态是帧图片（就是一帧对应一个动作），然后定位。

2.用css3的animation语法：

animation: name duration timing-function delay iteration-count direction;

name:需要绑定到选择器的 keyframe 名称
duration :完成动画所花费的时间，以秒或毫秒计。
timing-function:动画的速度曲线。
delay :规定在动画开始之前的延迟。
iteration-count:规定动画应该播放的次数。
direction:规定是否应该轮流反向播放动画。

3.通过 @keyframes 规则，创建动画:

　　创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

　　在动画过程中，能够多次改变这套 CSS 样式。

　　以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

　　0% (from)是动画的开始时间，100%(to) 动画的结束时间。

　　tips：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

看起来很炫的效果，通过css3来写就很简单了。

css3动画之小牛奔跑的更多相关文章

  1. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  2. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  3. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  4. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  5. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  6. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  7. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  8. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  9. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

随机推荐

  1. Hibernate 二级缓存的配置及使用_EhCache

    大多数的应用程序中都会添加缓存模块,以减少数据库访问次数,同时增加响应速度.下面介绍一下hibernate的二级缓存.默认情况下hibernate的二级缓存是不开启的,我们需要手动配置并启用. 注: ...

  2. O(n) 筛法求素数

    var tot,i,j,k,m,n:longint; prime:array[0..100000] of boolean; p:array[0..100000] of longint;begin re ...

  3. KnockoutJS:

    一.ko对象 js对象的改变都会导致viewmodel的变化,但view不一定变化 往ko对象里面push,viewmodel的变化,引起view的变化. 往js对象里面push,model的变化引起 ...

  4. web自动化测试中绕开验证码登陆的方式

    web自动化测试中登陆需验证码是很大的一个困扰.现推荐一种简单的避开验证码登陆的方式,先代码进入登录页,人工输入验证码登录后浏览器自动保存cookie,再在新的标签中登录. 具体代码如下: publi ...

  5. 掌握Thinkphp3.2.0----标签库

    1.什么是内置标签?什么是标签扩展库? Cx.class.php 和 Html.class.php 2.怎么加载非内置标签,怎么使用? 两种方式加载 3.怎么扩展自定义的标签? 仿照Html.clas ...

  6. HTML：document.activeElement

    今天遇到一个很郁闷的问题: document.activeElement获取当前获得焦点的元素,在chrome总是得到body,后来经过试验得到结果如下: document.activeElement ...

  7. 给Source Insight做个外挂系列之六－－“TabSiPlus”的其它问题

    关于如何做一个Source Insight外挂插件的全过程都已经写完了,这么一点东西拖了一年的时间才写完,足以说明我是一个很懒的人,如果不是很多朋友的关心和督促,恐怕是难以完成了.许多朋友希望顺着本文 ...

  8. Yii入门☞应用

    Yii 应用的静态结构 应用: require可以有返回值,Yii中经常返回数组用以配置.以前只知道引用文件成功返回1. controllerMap属性允许你指定一个控制器ID到任意控制器类,修改配置 ...

  9. 我的jsonp跨域问题

    关于jsonp跨域问题,在这个方面也是了解一点点,先记录下来,主要作为以后查看,之前下载并安装过wampserver,了解到了jsonp和json的区别,现在谈谈跨域这个问题: 首先什么是跨域,简单地 ...

  10. bugs

    2016-09-04 10:24:14.503 Scgl[1035:341694] You've implemented -[<UIApplicationDelegate> applica ...