15种漂亮的css3 loading动画特效【源码案例】
本文共 1041 字，大约阅读时间需要 3 分钟。
在之前，跟大家分享过很多关于loading动画的特效，今天这15款漂亮的css3 loading动画特效。他们通过简单的HTML结构和CSS3代码来实现。
效果截图如下：
HTML结构
第一个示例的基本HTML结构如下。
| |
CSS样式
然后添加下面的CSS样式。
.loader-1 .loader-outter { position: absolute; border: 4px solid #f50057; border-left-color: transparent; border-bottom: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; } .loader-1 .loader-inner { position: absolute; border: 4px solid #f50057; border-radius: 50%; width: 40px; height: 40px; left: calc(50% - 20px); top: calc(50% - 20px); border-right: 0; border-top-color: transparent; -webkit-animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; } |
完整源码下载地址： https://tc5.us/file/21793581-403550556
转载地址：http://bffpi.baihongyu.com/
你可能感兴趣的文章
j2ee-验证码
查看>>
日志框架logj的使用
查看>>
js-高德地图规划路线
查看>>
常用js收集
查看>>
mydata97的日期控件
查看>>
如何防止sql注入
查看>>
maven多工程构建与打包
查看>>
springmvc传值
查看>>
Java 集合学习一 HashSet
查看>>
在Eclipse中查看Android源码
查看>>
Android-Socket登录实例
查看>>
Android使用webservice客户端实例
查看>>
层在页面中的定位
查看>>
[转]C语言printf
查看>>
C 语言 学习---获取文本框内容及字符串拼接
查看>>
C 语言学习 --设置文本框内容及进制转换
查看>>
C 语言 学习---判断文本框取得的数是否是整数
查看>>
C 语言 学习---ComboBox相关、简单计算器
查看>>
C 语言 学习---ComboBox相关、简易“假”管理系统
查看>>
C 语言 学习---回调、时间定时更新程序
查看>>