文档章节

animation & @keyframes 实现loading效果

fanyx
 fanyx
发布于 2016/10/19 16:07
字数 618
阅读 69
收藏 0

效果图截图如下:

输入图片说明

直接上代码:

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css3实现loading效果</title>
	<link rel="stylesheet" type="text/css" href="css3-loading.css">
</head>
<body>
	<div class="loading-box">
		<div class="loading"></div>
		<p class="font">Loading</p>
	</div>
</body>
</html>

css

.loading-box{
	width: 200px;
	height: 200px;
	position: relative;
	margin: 100px auto 0 auto;
}
.font{
	width: 100%;
	height: 40px;
	font-size: 20px;
	font-family: Arial;
	position: absolute;
	text-align: center;
	line-height: 40px;
	left: 0;
	top: 50%;
	margin-top: -20px;
	color: green;
}
.loading{
	width: 170px;
	height: 170px;
	margin: 10px auto 10px auto;
	border-radius: 100%;
	border-left:10px solid #eeeeee; 
	border-bottom:10px solid #eeeeee; 
	border-right:10px solid green; 
	border-top:10px solid green; 
	-webkit-animation: loading .6s infinite linear;
	-moz-animation: loading .6s infinite linear;
	-ms-animation: loading .6s infinite linear;
	-o-animation: loading .6s infinite linear;
	animation: loading .6s infinite linear;
}
@keyframes "loading" {
 from {
    -webkit-transform: rotate(0deg);
   	-moz-transform: rotate(0deg);
   	-o-transform: rotate(0deg);
   	-ms-transform: rotate(0deg);
   	transform: rotate(0deg);
 }
 to {
    -webkit-transform: rotate(359deg);
   	-moz-transform: rotate(359deg);
   	-o-transform: rotate(359deg);
   	-ms-transform: rotate(359deg);
   	transform: rotate(359deg);
 }

}

@-moz-keyframes loading {
 from {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -moz-transform: rotate(359deg);
   transform: rotate(359deg);
 }

}

@-webkit-keyframes "loading" {
 from {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -webkit-transform: rotate(359deg);
   transform: rotate(359deg);
 }

}

@-ms-keyframes "loading" {
 from {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -ms-transform: rotate(359deg);
   transform: rotate(359deg);
 }

}

@-o-keyframes "loading" {
 from {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -o-transform: rotate(359deg);
   transform: rotate(359deg);
 }

}

animation

语法

animation: name duration timing-function delay iteration-count direction;

定义和用法

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name:规定需要绑定到选择器的keyframe名称
  • animation-duration:规定完成动画所花费的时间,以秒或毫秒计
  • animation-timing-function:规定动画的速度曲线
  • animation-delay:规定在动画开始之前的延迟
  • animation-iteration-count:规定动画开始之前的延迟
  • animation-direction:规定是否应该轮流反向播放动画
animation-timing-function的属性值
  • linear :动画从头到尾速度是相同的
  • ease :默认。动画以低速开始,然后加快,在结束前变慢。
  • ease-in :动画以低速开始。
  • ease-out :动画以低速结束。
  • ease-in-out :动画以低速开始和结束。
  • cubic-bezier(n,n,n,n) :在cubic-bezier函数中自己的值。该值是从0到1的数值。

兼容性

  • IE10及Firefox、Opera支持animation属性。
  • Safari和Chrome支持替代的-webkit-animation属性。
  • IE9及其以下版本不支持animation属性。

请始终规定animation-duration属性,否则时长为0,就不会播放动画了。

@keyframes

语法

@keyframes animationname {keyframes-selector {css-styles;}}

定义和用法

  • animationname:定义动画的名称。
  • keyframes-selector:动画时长的百分比。
  • css-styles:一个或多个合法的css样式属性。
keyframes-selector合法值
  • 0-100%
  • form(与0%相同)
  • to(与100%相同)

兼容性

  • 目前浏览器都不支持 @keyframes 规则。
  • Firefox 支持替代的 @-moz-keyframes 规则。
  • Opera 支持替代的 @-o-keyframes 规则。
  • Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

© 著作权归作者所有

fanyx
粉丝 0
博文 3
码字总数 1544
作品 0
成都
前端工程师
私信 提问
30种CSS3炫酷页面预加载loading动画特效

简要教程   这是一组效果非常炫酷的CSS3页面预加载loading动画特效。该特效共有30种不同的loading效果。所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画。当你点击页面...

柠檬酷
2015/09/10
214
0
你可能不知道的 CSS3 Animation

过段时间可能要帮姑娘做一些计算机视觉的东西,所以研究一下动画这一块。前端创建动画的方式有三种,分别是 setTimeout/setInterval, requestAnimationFrame 以及 CSS3 Animation,而 reques...

YanceyOfficial
04/04
0
0
CSS3实现动画效果教程详解

在传统网页上动画一般都是通过Javascript或flash来实现,但是Html5的时代的到来,CSS的进化,让动画实现起来更加easy,今天E良师益友网就来介绍一下如何通过CSS3来实现简单的动画效果: 一、C...

罗马教堂的钟声
2016/01/08
305
0
过渡效果 loding 动画 animation

小仙女KOMons
2018/09/17
0
0
HTML CSS笔记变形效果-过渡效果-动画效果

一.transform CSS3 提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个:transform 和 transform-origin。 对于 transform 的属性值,具体如下表: //向...

菜鸟不菜么
2018/05/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

浅谈java过滤器Filter

一、简介 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码、做一些业务逻辑判断如是否有权限访问页面等。其工作原理是,只要你在web.xml...

青衣霓裳
24分钟前
3
0
技术产品研发型企业的发展困境

目前中小企业想要发展自己的业务,必须使用到底层架构技术,于是企业多采用三种技术方案,一、招相关技术人员,并为之长期投入技术成本;二、使用相关开源技术框架,并培养相关业务人员;三、...

数蚕
47分钟前
5
0
《2019网络安全行业人才发展研究报告》出炉

随着大安全时代的到来,网络安全已经从虚拟空间延伸到现实空间。当今网络战愈演愈烈,网络军备赛即将来临。网络空间领域的战争归根到底还是人才的竞争。面对新形势,建立高效的网络安全人才培...

360网络安全大学
49分钟前
3
0
酒德利商城开发程序逻辑

<textarea name="Content" rows="2" cols="20" id="Content" class="t14" style="font-family:宋体;font-size:10.5pt;"></textarea> 酒德利商城开发zhao·I5OI3I5I74O微/电,酒德利批发零售,......

洋哥说
59分钟前
2
0
十款强大的IDEA插件-Java开发者的利器

xl_echo编辑整理,欢迎转载,转载请声明文章来源。欢迎添加echo微信(微信号:t2421499075)交流学习。 百战不败,依不自称常胜,百败不颓,依能奋力前行。——这才是真正的堪称强大!! 插件一...

xlecho
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部