纯CSS3实现loading正在加载。。。
场景分析:随着我司专职前端切图人员离职,切图的活重新落到我们小组团队成员的日常任务list里面,加上我们小组 7个前端 基本都是后台转的前端 (赶鸭子上架 前端现在需求量大 没办法) 加上自己也将就一年不切图了 (有人专职切图就是好啊,论切图的重要性),日常效率大打折扣。这不 来需求了 不会切图了
UI让做个动效,嗯 就是这个看着简单的动效 好吧 花了将近一下午
废话不多说 开干 上代码先:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS3实现loading正在加载。。。</title>
</head>
<style>
.waiting {
position: relative;
width: 69px;
height: 35px;
line-height: 35px;
background: #E4F1FD;
border-radius: 20px;
margin-top: 15px;
margin-left: 15px;
color: #FFAF32;
}
/*这个是每个点的自己的块*/
.waiting li {
position: absolute;
top: 13px;
width: 10px;
height: 10px;
line-height: 10px;
list-style: none;
-webkit-animation: bounce_waiting 1.2s linear infinite;
-webkit-transform: scale(0);
-webkit-border-radius: 5px;
animation: bounce_waiting 1.2s linear infinite;
transform: scale(0);
border-radius: 5px;
}
.waiting li:first-child {
left: 15px;
-webkit-animation-delay: 0.48s;
animation-delay: .48s;
}
.waiting li:nth-child(2) {
left: 30px;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.waiting li:nth-child(3) {
left: 45px;
-webkit-animation-delay: 0.72s;
animation-delay: 0.72s;
} /*定义动画函数,从1倍减小到0*/
@-webkit-keyframes bounce_waiting {
0% {
-webkit-transform:scale(1);
background-color:#FFAF32;
}
100% {
-webkit-transform:scale(0);
background-color:#ffffff;
}
}
@keyframes bounce_waiting {
0% {
transform:scale(1);
background-color:#FFAF32;
}
100% {
transform:scale(0);
background-color:#ffffff;
}
}
</style>
<body>
<div class="waiting">
<ul>
<Li></Li>
<Li></Li>
<Li></Li>
</ul>
</div>
</body>
</html>
从代码里 我们可以看到 其实实现原理很简单
用到了CSS3的 transform animation 属性 嗯 就是这样
运用CSS3的animation 和 transform 属性我们其实可以实现很多简单的动效 后续有类似的再继续分享~
纯CSS3实现loading正在加载。。。的更多相关文章
- 纯css3实现的动画加载条
之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...
- 纯css3实现的动画加载特效
之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="wrap& ...
- 一款纯css3实现的条纹加载条
之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...
- 一款纯css3实现的动画加载导航
之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul ...
- 纯css3实现的win8加载动画
今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载
- 使用css3实现小菊花加载效果
使用css3实现小菊花加载效果 最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img ...
- JQuery浮动层Loading页面加载特效
之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...
- CSS3实现的图片加载动画效果
来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...
随机推荐
- matlab实现可调节占空比的方波
我大概讲一下实现的原理:正弦波移相φ,当使得大于sin(φ)的值为1,其他值为-1,占空比就跟这个φ值之间有联系. 占空比原理图如下所示. 结果上图,可以实现调节占空比,方波频率,方波个数. 下面是函 ...
- javascript原型的意义
prototype属性: 这个属性包含一个对象(以下简称"prototype对象"),所有实例对象需要共享的属性和方法,都放在这个对象里面:那些不需要共享的属性和方法,就放在构造函 ...
- oracle导入时提示IMP-00010:不是有效的导出文件,头部验证失败
oracle导入时提示IMP-00010:不是有效的导出文件,头部验证失败: 原因分析:导出的oracle的版本与导入的oracle数据库的版本不一致: 可直接将dmp文件用notepad++打开修改 ...
- ubuntu12.04.5安装openssh-server所引发的血案
刚安装好的ubuntu12.04.5在安装openssh-server之后,安装其他软件都安装不了,如下: root@ubuntu:/home/lancer/software/ssh# apt-get ...
- 秒懂JS对象、构造器函数和原型对象之间的关系
学习JS的过程中,想要掌握面向对象的程序设计风格,对象模型(原型和继承)是其中的重点和难点,拜读了各类经典书籍和各位前辈的技术文章,感觉都太过高深,花费了不少时间才搞明白(个人智商是硬伤/(ㄒoㄒ)/ ...
- Nginx反向代理以及负载均衡配置
项目地址:http://git.oschina.net/miki-long/nginx 前提:最近在研究nginx的用法,在windows上小试了一下,由于windows下不支持nginx缓存配置,所 ...
- 简单的RTSP消息交互过程
C表示RTSP客户端,S表示RTSP服务端 第一步:查询服务器端可用方法 1. C->S:OPTION request //询问S有哪些方法可用 2. S->C:OPTION ...
- STM32实战应用(一)——1602蓝牙时钟1液晶的显示测试
前言 从51到STM32F4学习这么久了,总算找到点头绪了,目前学习了GPIO,中断,定时器,看门狗的基本使用,所以想试着看看能不能做个什么东西,就是想复习一下最近学习的知识.正好上学期单片机课程设计 ...
- Composer 安装(一)
一.简介 Composer 是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖的库文件. ...
- 【lucene系列学习二】Lucene实现高亮显示关键词
首先,导入下图所示库 然后,import org.apache.lucene.search.highlight.*; 下面,我们新建一个实现高亮显示功能的函数 public static String ...