通过css3,实现加载转动贝塞尔曲线动画
参考博客:http://blog.jobbole.com/94966/
css代码:
.loading { position : relative; display : inline-block; width: 100px;height: 100px;background-color: cyan}
.loading .dot { position: absolute; opacity :; transform: rotate(225deg); animation-name: loading; animation-iteration-count: infinite; animation-duration: 5.28s; }
.loading .dot:after { content : ""; position : absolute; width : 6px; height : 6px; border-radius : 50%; background : #000; }
.loading .dot:nth-child(2) { animation-delay : .23s; }
.loading .dot:nth-child(3) { animation-delay : .46s; }
.loading .dot:nth-child(4) { animation-delay : .69s; }
.loading .dot:nth-child(5) { animation-delay : .92s; } .dot{
position: absolute;
height: 50px;
width: 50px;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -25px;;
}
html:
<div class="loading">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div> </div>
通过css3,实现加载转动贝塞尔曲线动画的更多相关文章
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题
PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...
- 10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- CSS3实现加载数据动画2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3实现加载数据动画1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 页面加载时的div动画
用@keyframes(动画),实现页面加载时的div动画(不要用js控制,因为当页面加载的时候,js还不一定可以使用) 可以在https://daneden.github.io/animate.cs ...
- [Swift通天遁地]一、超级工具-(4)使用UIWebView(网页视图)加载HTML和Gif动画
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 纯CSS3技术 加载中
你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术 html <div class="loader">加载中...</div> css: 图( ...
随机推荐
- html2canvas脚本实现将html内容转换canvas内容
在开始使用html2canvas之前,有一些关于html2canvas及其一些限制的好处. 介绍 该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”.屏幕截图基于DOM,因此它可能不是真实 ...
- 设计模式-----Builder模式
前言 近日,看到Myabtis中组件中SqlSessionFactory由SqlSessionFactoryBuilder().build()生成时,且采用Builder模式,遂记录学习之. SqlS ...
- Java并发编程的艺术(一)
题目1 创建3个线程,让3个线程分别按着顺序打印AAAA,BBBB,CCCC(第一个线程打印AAAA,第二个线程打印BBBB,第一个线程始终在第二个线程之前打印) 代码(该代码为打印3个线程分别打印一 ...
- Hive 和 Mysql
mysql是关系型数据库,通常用来增删改查,OLTP hive是数据仓库,依赖hdfs,一般只做查询,OLAP
- Spring Boot 1.5.* 升级 2.1 - 完善中
Spring Boot 原版本 1.5.12.RELEASE 新版本 2.1.0.RELEASE Spring Cloud 原版本 Edgware.SR3 新版本 Finchley.SR2 一.Act ...
- Strange Way to Express Integers(中国剩余定理+不互质)
Strange Way to Express Integers Time Limit:1000MS Memory Limit:131072KB 64bit IO Format:%I64d & ...
- char *s="string"和char s[]="string"的区别
char *s="string"的内容是不可以改的 void main() { char* pStr1 = "Hello!"; char pSt ...
- 如何把SVG小图片转换为 html字体图表
自制作的简单字体图表使用案例:查看demo 制作步骤: 1:登录制作工具在线网站 https://icomoon.io/ 2:右上角红色 按钮进入到:https://icomoon.io/app/#/ ...
- css选择器:基本选择器
基本选择器 1.通用元素选择器 *表示应用到所有的标签. *{ padding:0px; margin:0px; } 2.元素/标签选择器 匹配所有p标签的元素 p{ color:red; backg ...
- js 键盘码
键盘各按键对应的数字 keycode 9 = Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift keycode 17 = Con ...