css3 animation steps制作饿了么loading
2024-08-23 23:02:54
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>
最新文章
- The Java Enum: A Singleton Pattern [reproduced]
- Word2010如何恢复没有保存的文件
- AX 2012 在Grid 中添加image标识状态
- c# 模拟get和post
- Flexbox
- 简单方便的在线客服展示插件 jQuery.onServ
- 数据结构(RMQ):UVAoj 11235 Frequent values
- C语言 HTTP上传文件-利用libcurl库上传文件
- Mozilla5.0的含义
- 如何把va_list可变参数传送到下一级函数中(如传送到printf)
- kissy小记
- 微信小程序-开心大转盘(圆盘指针)代码分析
- Vmware黑屏解决方法
- JS jQuery json日期格式问题的办法
- bat 变量作用域
- 一道面试题:用shell写一个从1加到100的程序
- kafka的OffsetOutOfRangeError
- mysql binlog日志手动清除
- @NotEmpty、@NotNull、@NotBlank 的区别
- loj516dp一般看规律
热门文章
- 洛谷——P1088 火星人
- Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals )D. Innokenty and a Football League(2-sat)
- 6、Flask实战第6天:视图函数Response返回值
- conversion function to_char to_number
- 【Trie】bzoj1212 [HNOI2004]L语言
- 使用MR求解多个矩阵的乘积之后
- 【棋盘DP】【OpenJudge7614】最低通行费
- python的编码程序例题
- jquery获取css颜色值返回RGB应用
- svn的安装(整合apache、ldap)包括错误解决post commit FS processing had error