html代码

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<style type="text/css">

    .load2 {

        position: absolute;

        width:200px;

        height:160px;

         background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZWxsaXBzZSBjeD0iNDgiIGN5PSIxMi40NjMiIGZpbGw9IiNEM0U2RkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcng9IjQ3Ljg5IiByeT0iMTIuMzY5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDM4KSIvPjwvc3ZnPg==') no-repeat;

        margin-left:-96px;

        margin-top:-100px;

        left:50%;

        top:70%;

        animation:small .8s infinite;

        background-position: center;

    }

    @keyframes small {

        0% {

            transform: scale(1);

        }

        50% {

            transform: scale(.4);

        }

        100% {

            transform: scale(1);

        }

    }

    .load {

        position: absolute;

        left:50%;

        top:50%;

        background: url('loading.png');

        height:100px;

        width:100px;

        margin-left:-50px;

        margin-top:-50px;

        animation:test 4.5s steps(6) infinite,updown .8s infinite;

        /*-webkit-animation:test 3.5s steps(6) infinite;*/

    }

    @keyframes test {

        0% {

            background-position: 0 0;

        }

        100% {

            background-position: 0 600px;

        }

    }

    @keyframes updown{

        0% {

            transform: translateY(0px);

        }

        50% {

            transform: translateY(-50px);

        }

        100% {

            transform: translateY(0px);

        }

    }

</style>

<div class="load"></div>

<div class="load2"></div>

</div>

</body>

</html>

css3 animation steps制作饿了么loading的更多相关文章

  1. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  2. CSS3效果：animate实现点点点loading动画效果（一）

    实现如图所示的点点点loading效果: 一:CSS3 animation实现代码 html代码: 提交订单中<span class="ani_dot">...< ...

  3. 实现了一个百度首页的彩蛋——CSS3 Animation简介

    在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...

  4. css3 animation实现风车转动

    项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...

  5. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  6. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  7. CSS3效果：animate实现点点点loading动画效果（二）

    box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...

  8. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  9. CSS3 animation（动画） 属性

    一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...

随机推荐

  1. 让你的apache支持ipv6

    如果你使用的linux系统已经获取到了ipv6地址,你就可以让你的apache htpd 等也支持ipv6. 1.检查linux监听的端口,如果有:::port ,而且获取到了ipv6地址,则可以确定 ...

  2. 福州三中基训day2

    今天讲的BFS,不得不说,福建三中订的旅馆是真的劲,早餐极棒!!! 早上和yty大神边交流边听zld犇犇讲BFS,嘛,今天讲的比较基础,而且BFS也很好懂(三天弄过一道青铜莲花池的我好像没资格说),除 ...

  3. Linux命令之crontab

    crontab [-u user] file crontab [-u user] [-l | -r | -e] [-i] [-s] crontab命令被用来提交和管理用户需要周期性执行的任务,与win ...

  4. ( 转 ) Mysql group_concat 的反向应用实现（Mysql列转行）

    用过Mysql的都知道她有一个很好的实现行转列功能的函数group_concat函数,非常方便 点击(此处)折叠或打开 SELECT * FROM group_test; SELECT id, GRO ...

  5. Html5+CSS

    1. 内联样式是为元素添加样式的最简单有效的方式,但是更易于维护的方式是使用层叠样式表CSS(Cascading Style Sheets). <style>  选择器 {属性名称: 属性 ...

  6. NOIP 2015 跳石头

    题目背景 一年一度的“跳石头”比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 N 块岩石(不 ...

  7. Codeforces 915 E Physical Education Lessons

    题目描述 This year Alex has finished school, and now he is a first-year student of Berland State Univers ...

  8. 【博弈论】【SG函数】【枚举】bzoj1188 [HNOI2007]分裂游戏

    因为第i个瓶子里的所有豆子都是等价的,设sg(i)表示第i个瓶子的sg值,可以转移到sg(j)^sg(k)(i<j<n,j<=k<n)的状态. 只需要考虑豆子数是奇数的瓶子啦, ...

  9. 【树上莫队】bzoj3757 苹果树

    学习这位神犇的:http://blog.csdn.net/jiangyuze831/article/details/41476865 注意: ①排序时第一关键字是左端点所在块编号(块状树),第二关键字 ...

  10. BUG YII2.0 cURL error 6: Could not resolve host:

    BUG描述:登录直接显示 原因:服务器设置端口权限,或者DNS毛病 解决方案:只能去服务器端设置,配置端口 DNS: 修改dns 114.114.114.114 或者 8.8.8.8