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 ...
随机推荐
- Java的位运算符与二进制转换
转换: Java整型数据类型有:byte.char.short.int.long.要把它们转换成二进制的原码形式,必须明白他们各占几个字节.,一个字节==8位数 数据类型 ...
- 【DFS序】【莫队算法】【权值分块】bzoj2809 [Apio2012]dispatching
题意:在树中找到一个点i,并且找到这个点子树中的一些点组成一个集合,使得集合中的所有点的c之和不超过M,且Li*集合中元素个数和最大 首先,我们将树处理出dfs序,将子树询问转化成区间询问. 然后我们 ...
- 使用IDEA创建package
1)使用IDEA创建java工程 什么也不选,直接点击Next 无脑继续下一步 点击“Finish”完成工程的创建. 2)在使用IDEA创建了工程之后,首先选中“src”文件夹,然后 紧接着输入包名 ...
- Scala实战高手****第4课:零基础彻底实战Scala控制结构及Spark源码解析
1.环境搭建 基础环境配置 jdk+idea+maven+scala2.11.以上工具安装配置此处不再赘述. 2.源码导入 官网下载spark源码后解压到合适的项目目录下,打开idea,File-&g ...
- 最新Mac安装CocoaPods详细教程及各种坑解决办法
网上有很多教程,但要么内容很老,要么不详细,要么各种坑的情况没写.最近买新电脑了,正好要走一遍这些流程,所以写下次教程. 一.安装RVM及更新Ruby 安装RVM的目的是为了更新Ruby,如果你的Ru ...
- Linux下判断字符串长度
方法1:使用wc -L命令 wc -L可以获取到当前行的长度,因此对于单独行的字符串可以用这个简单的方法获取,另外wc -l则是获取当前字符串内容的行数. echo 'abc' |wc -L 注意:这 ...
- O2S.Components.PDFRender4NET.dll 图片空白BUG问题
在用网上的2.0.1.0破解版的时候,会出现莫名的错误,大多数pdf转成图片都是Ok的,但是有部分转出来是空白,因为我这里要涉及大量的pdf转图片,不允许出现错误. 后来经过实验发现是这个版本存在bu ...
- 在Windows平台下安装与配置Memcached及C#使用方法
1.在Windows下安装Memcached 资料来源:http://www.jb51.net/article/30334.htm 在Windows平台下安装与配置Memcached的方法,Memca ...
- ylbtech-LanguageSamples-COMInteropPart1(COM 互操作 - 第一部分)
ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-COMInteropPart1(COM 互操作 - 第一部分) 1.A,示例(Sampl ...
- TortoiseSVN 使用简介
什么是SVN(subversion)? 有一个简单但不十分精确的比喻:SVN = 版本控制 + 备份服务. 简单的说就是,你可以把SVN看做一个备份服务器,但是更好的是,他可以帮助记住每一次上传的版本 ...