css3 animation steps制作饿了么loading
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的更多相关文章
- CSS3 animation属性中的steps实现GIF动图(逐帧动画)
相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...
- CSS3效果：animate实现点点点loading动画效果（一）
实现如图所示的点点点loading效果: 一:CSS3 animation实现代码 html代码: 提交订单中<span class="ani_dot">...< ...
- 实现了一个百度首页的彩蛋——CSS3 Animation简介
在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...
- css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- CSS3效果：animate实现点点点loading动画效果（二）
box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...
- CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...
- CSS3 animation（动画） 属性
一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...
随机推荐
- 线段树【p2706】贪婪大陆
Background 面对蚂蚁们的疯狂进攻,小FF的Tower defence宣告失败--人类被蚂蚁们逼到了Greed Island上的一个海湾.现在,小FF的后方是一望无际的大海, 前方是变异了的超 ...
- Dfs【p1454】 圣诞夜的极光
题目描述-->p1454 圣诞夜的极光 题意概括: 寻找联通块数量,这里的连通块定义与其他的不同. 这里定义为曼哈顿距离不超过2的都属于一个联通块. 什么?不知道曼哈顿距离是啥? 曼哈顿距离简易 ...
- kattis Curious Cupid (莫队算法)
Curious Cupid There are K different languages in the world. Each person speaks one and only one lang ...
- java常见异常归纳
1.java.lang.NullPointerException(空指针异常) 调用了未经初始化的对象或者是不存在的对象 经常出现在创建图片.调用数组这些操作中,比如图片未经初始化,或者图片创建 ...
- matlab的table数据类型初步接触
由于数据分析,接触到cell的使用,字符串的使用以及ASCII的使用,但是发现在matlab中进行这样的操作相对繁琐,然后知道了table数据类型,是matlab新的数据类型,于2013版开始引入.据 ...
- Problem R: 求斐波那契数列的前n项值
#include<stdio.h> int main() { int n; while(scanf("%d",&n)!=EOF){ int x1,x2,i,x; ...
- Delphi 二维码产生和扫描
Zint用于产生二维码. Zxing用读取二维码. VFrames.pas和VSample.pas用于摄像头. 另附带摄像头相关的类库,也可用开源的dspack也可用于摄像头的需求. 以上为开源的信息 ...
- N进制加法
我是网络公司的一名普通程序员,英文名Steven,发音比较像“师弟”,自从入职培训自我介绍后,大家就称我为“二师弟”,我喜欢看科幻小说,也喜欢做梦,有一次梦到外星球,发现外星人使用的并非10进制/16 ...
- IntelliJ IDEA控制台输出中文乱码问题解决
如果还不行,那么再极端的设置,在IDEA启动的时候强制设置为UTF-8: 打开增加-Dfile.encoding=UTF-8,重启Intellij IDEA 再或者直接在项目运行的时候加入UTF-8的 ...
- 【spring mvc】spring mvc POST方式接收单个字符串参数，不加注解，接收到的值为null，加上@RequestBody,接收到{"uid":"品牌分类大”}，加上@RequestParam报错 ---- GET方式接收单个参数的方法
spring mvc POST方式 接收单个参数,不加任何注解,参数名对应,接收到的值为null spring mvc POST方式 接收单个参数,加上@RequestBody,接收到参数格式:{&q ...