效果图截图如下：

直接上代码：

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 规则。

animation & @keyframes 实现loading效果的更多相关文章

  1. CSS content换行技术实现字符animation loading效果

    一.之前我的字符loading实现 关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...

  2. 使用CSS时间打点的Loading效果的教程

    基于box-shadow实现的打点效果 理论上,box-shadow可以实现任意的图形效果,自然我们可以利用box-shadow生成我们的点效果,然后通过animation控制不同时间点点的数目就可以 ...

  3. 用CSS3实现饼状loading效果

    原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...

  4. css3 之炫酷的loading效果

    css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...

  5. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...

  6. CSS3实现的几个小loading效果

    昨晚上闲的没事突然想做几个小loading效果,下面是昨晚上做的几个小案例,分享给大家 1.水波loading:这个loading是我觉得非常简单,但是看上去的效果却非常不错的一个小loading 这 ...

  7. 前端页面loading效果(CSS实现)

    当首页内容或图片比较多时,加载时间会比较长,此时可能出现页面白屏的情况,用户体验较差.所以,在页面完全加载出来之前,可以考虑加入loading效果,当页面完全加载完后,是loading消失即可. 1. ...

  8. CSS3饼状loading效果

    概述 之前看到很多饼状loading效果是用图片的方式实现的,本例子采用的是纯CSS3实现,这样可以节省资源空间,有兴趣的小伙伴可以看下~ 详细 代码下载:http://www.demodashi.c ...

  9. JQuery+CSS3实现Ajax加载时loading效果

    之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...

随机推荐

  1. 【NOI2008】假面舞会（图论，搜索）

    题面 Description 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一个自己喜欢的面 具.每个面具都有一个编号 ...

  2. [BZOJ2503][HAOI2006]均分数据

    BZOJ Luogu sol 如果已经确定了一个序列,现要求把这个序列分成m个连续段作为答案,那么就可以用一个显而易见的DP DP显然可以得到当前序列下的最优解. 所以模拟退火瞎JB改一改序列每次DP ...

  3. ffplay常用命令

    一.ffplay 常用参数 ffplay不仅仅是播放器,同时也是测试ffmpeg的codec引擎,format引擎,以及filter引擎的工具,并且也可以做可视化的媒体参数分析,可以通过ffplay ...

  4. Android TV 电视调试和遥控器事件监听

    Android TV 真机调试 要进行Android TV开发免不了要进行真机调试. 1.确定电视盒子和开发机器在同一局域网中 2.打开电视盒子的adb允许调试开关 3.进入adb所在文件夹进行adb ...

  5. 30.Django CSRF 中间件

    CSRF 1.概述 CSRF(Cross Site Request Forgery)跨站点伪造请求,举例来讲,某个恶意的网站上有一个指向你的网站的链接,如果某个用户已经登录到你的网站上了,那么当这个用 ...

  6. python已安装了DNS处理模块，执行时却报错ImportError

    一.代码: #!/usr/bin/python import dns.resolver ............此处省略 二.故障报错 ubuntu:~/automation/001_base$ py ...

  7. 11 个简单的 Java 性能调优技巧

    大多数开发人员理所当然地以为性能优化很复杂,需要大量的经验和知识.好吧,不能说这是完全错误的.优化应用程序以获得最佳性能不是一件容易的事情.但是,这并不意味着如果你不具备这些知识,就不能做任何事情.这 ...

  8. Android 零散知识点整理

    Android 零散知识点整理 为什么Android的更新试图操作必须在主线程中进行? 这是因为Android系统中的视图组件并不是线程安全的.通常应该让主线程负责创建.显示和更新UI,启动子线程,停 ...

  9. 基于 Hexo + GitHub Pages 搭建个人博客（一）

    前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...

  10. bat脚本:windows下一键启动zookeeper+kafka

    bat脚本:windows下一键启动zookeeper+kafka 把下面两行代码存为bat文件,双击执行即可.注意更改相应的目录 这里用ping来控制时间(先zookeeper,ping 4 次后 ...