css3 loading 效果
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <style type="text/css">
- .box {
- width: 100%;
- padding: 3%;
- box-sizing: border-box;
- overflow: hidden
- }
- .box .loader {
- width: 30%;
- float: left;
- height: 200px;
- margin-right: 3%;
- border: 1px #ccc solid;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: center
- }
- @-webkit-keyframes loading-1 {
- 0% {
- transform: rotate(0deg)
- }
- 50% {
- transform: rotate(180deg)
- }
- 100% {
- transform: rotate(360deg)
- }
- }
- .loading-1 {
- width: 35px;
- height: 35px;
- position: relative
- }
- .loading-1 i {
- display: block;
- width: 100%;
- height: 100%;
- border-radius: 50%;
- background: linear-gradient(transparent 0, transparent 70%, #333 30%, #333 100%);
- -webkit-animation: loading-1 .6s linear 0s infinite
- }
- @-webkit-keyframes loading-2 {
- 0% {
- transform: scaleY(1)
- }
- 50% {
- transform: scaleY(.4)
- }
- 100% {
- transform: scaleY(1)
- }
- }
- .loading-2 i {
- display: inline-block;
- width: 4px;
- height: 35px;
- border-radius: 2px;
- margin: 0 2px;
- background-color: #333
- }
- .loading-2 i:nth-child(1) {
- -webkit-animation: loading-2 1s ease-in .1s infinite
- }
- .loading-2 i:nth-child(2) {
- -webkit-animation: loading-2 1s ease-in .2s infinite
- }
- .loading-2 i:nth-child(3) {
- -webkit-animation: loading-2 1s ease-in .3s infinite
- }
- .loading-2 i:nth-child(4) {
- -webkit-animation: loading-2 1s ease-in .4s infinite
- }
- .loading-2 i:nth-child(5) {
- -webkit-animation: loading-2 1s ease-in .5s infinite
- }
- @-webkit-keyframes loading-3 {
- 50% {
- transform: scale(.4);
- opacity: .3
- }
- 100% {
- transform: scale(1);
- opacity: 1
- }
- }
- .loading-3 {
- position: relative
- }
- .loading-3 i {
- display: block;
- width: 15px;
- height: 15px;
- border-radius: 50%;
- background-color: #333;
- position: absolute
- }
- .loading-3 i:nth-child(1) {
- top: 25px;
- left: 0;
- -webkit-animation: loading-3 1s ease 0s infinite
- }
- .loading-3 i:nth-child(2) {
- top: 17px;
- left: 17px;
- -webkit-animation: loading-3 1s ease -.12s infinite
- }
- .loading-3 i:nth-child(3) {
- top: 0;
- left: 25px;
- -webkit-animation: loading-3 1s ease -.24s infinite
- }
- .loading-3 i:nth-child(4) {
- top: -17px;
- left: 17px;
- -webkit-animation: loading-3 1s ease -.36s infinite
- }
- .loading-3 i:nth-child(5) {
- top: -25px;
- left: 0;
- -webkit-animation: loading-3 1s ease -.48s infinite
- }
- .loading-3 i:nth-child(6) {
- top: -17px;
- left: -17px;
- -webkit-animation: loading-3 1s ease -.6s infinite
- }
- .loading-3 i:nth-child(7) {
- top: 0;
- left: -25px;
- -webkit-animation: loading-3 1s ease -.72s infinite
- }
- .loading-3 i:nth-child(8) {
- top: 17px;
- left: -17px;
- -webkit-animation: loading-3 1s ease -.84s infinite
- }
- </style>
- <body>
- <div class="box">
- <div class="loader">
- <div class="loading-1">
- <i></i>
- </div>
- </div>
- <div class="loader">
- <div class="loading-2">
- <i></i>
- <i></i>
- <i></i>
- <i></i>
- <i></i>
- </div>
- </div>
- <div class="loader">
- <div class="loading-3">
- <i></i>
- <i></i>
- <i></i>
- <i></i>
- <i></i>
- <i></i>
- <i></i>
- <i></i>
- </div>
- </div>
- </div>
- </body>
- </html>
css3 loading 效果的更多相关文章
- HTML5+CSS3 loading 效果收集--转载
用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...
- CSS3 loading效果全
梦想天空 关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:) 首页 管理 订阅 网页设计 JavaScript jQuery ...
- html5 css3 loading 效果
canvas html5load1 主要思路update 实现12个点的绘制和旋转效果 var update = function() { ctx.save();// 把当前绘图状态保存起来 ct ...
- css3 loading效果
file:///E:/zhangqiangWork/2014/SPDbank/index.html 参考该网站 http://tobiasahlin.com/spinkit/ 查看源代码把里面的dom ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- CSS3轻松实现清新 Loading 效果
至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...
- CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
- 用CSS3实现饼状loading效果
原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...
随机推荐
- STRTOK函数和STRTOK_R函数
STRTOK函数和STRTOK_R函数 注:本文转载自博客园,感谢作者整理! 1.一个应用实例 网络上一个比较经典的例子是将字符串切分,存入结构体中.如,现有结构体 typedef struct pe ...
- 树莓派进阶之路 (021) - 3.2inch RPi LCD (B)
参考文档:http://www.waveshare.net/wiki/3.2inch_RPi_LCD_(B) 产品特点 320x240分辨率 电阻式触摸控制 兼容并可直接插入任何版本树莓派 提供Ras ...
- linux达人养成计划学习笔记(六)—— 挂载命令
一.查询与自动挂载 mount #查询系统中已挂载的设备 mount -a #根据配置文件/etc/fstab的内容,自动挂载 二.挂载命令格式 mount [-t 文件系统] [-o 特殊选项] 设 ...
- sql 2005出现错误:数据库 'Twitter' 的事务日志已满。若要查明无法重用日志中的空间的原因,请参阅 sys.databases 中的 log_reuse_wait_desc 列。
--先备份数据库 --截断事务日志 backup log Twitter with no_loggo --收缩数据库 dbcc shrinkdatabase(Twitter) go O ...
- FluentValidation:C#后端输入验证框架的官方文档解读
参照 FluentValidation 的官方文档写的例子,方便日后查看和使用. 原文:https://github.com/JeremySkinner/FluentValidation/wiki H ...
- Docker LNMP环境搭建
原文地址:https://www.awaimai.com/2120.html 1 快速使用 2 安装docker和docker-compose 3 使用国内镜像仓库 4 目录说明 4.1 目录结构 4 ...
- Config程序配置文件操作实践进阶之ConfigurationSectionGroup
今天又进一步对System.Configuration下的ConfigurationSectionGroup类及相关的类与方法进行了研究.发现要构建多层次嵌套的XML标签 则必须用到Configura ...
- win7怎么快速截取图片
点击开始--运行或者winkey + r 键直接进入运行. 2 在输入框输入snippingtool,点击确定. 3 这就找到截图工具,如图. END 方法/步骤2 进入c盘--Windows-- ...
- Bitnami Redmine 中文附件名 报错修复
最近自己在服务器上搭了个redmine,用的是Bitnami的一键安装程序. 搭好后,运行得不错,居然还增加了负载均衡. 某天上传中文附件,打开报内部错误,去redmine官网看了下,果然有这个问题, ...
- 还没被玩坏的robobrowser(2)——安装及快速开始
安装robobrowser 注意:这里假设你知道如何使用pip安装python的库的知识,如果你不了解这一块的话,点这里获取帮助. 强烈推荐使用pip安装. pip install robobrows ...