纯css3打造的一款非常炫的加载图。用在需要一定时间加载的地方非常合适。先上效果图:

点击这里在线预览

代码非常简单。没有用任何javascript代码。纯css3实现。

html代码:

 <div class="content">
<div style="width: 970px; margin: auto">
</div>
<div class="rotate">
<span class="triangle base"></span><span class="triangle no1"></span><span class="triangle no2">
</span><span class="triangle no3"></span>
</div>
</div>

css代码:

 body {
padding:;
margin:;
background-color: #2a4e66;
overflow: hidden;
} .content {
width:100%;
height:100%;
top:;
right:;
bottom:;
left:;
position:absolute;
} .rotate {
position: absolute;
top: 50%;
left: 50%;
margin: -93px 0 0 -93px;
background: transparent;
width: 186px;
height: 186px;
border-radius: 50%;
z-index:;
} .rotate:after {
content: '';
position: absolute;
box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff;
width: 186px;
height: 186px;
border-radius: 50%;
z-index:;
} span.triangle.base {
position: absolute;
width:;
height:;
margin: 46px 0 0 13px;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 140px solid #eeeeee;
transform-origin: 50% 50%;
z-index:;
} span.triangle.no1 {
position: absolute;
margin: 46px 0 0 13px;
width:;
height:;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 140px solid #eeeeee;
transform-origin: 0 100%;
z-index:;
} span.triangle.no2 {
position: absolute;
margin: 46px 0 0 13px;
width:;
height:;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 140px solid #eeeeee;
transform-origin: 100% 100%;
z-index:;
} span.triangle.no3 {
position: absolute;
margin: 46px 0 0 13px;
width:;
height:;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 140px solid #eeeeee;
transform-origin: 50% 100%;
z-index:;
} /* Animation */ .rotate {
-webkit-animation: rotateTriangle 3s linear infinite;
animation: rotateTriangle 3s linear infinite;
} @-webkit-keyframes rotateTriangle {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(60deg); }
}
@keyframes rotateTriangle {
from { transform: rotate(0deg); }
to { transform: rotate(60deg); }
} .rotate:after {
-webkit-animation: glowAnimation 3s ease infinite;
animation: glowAnimation 3s ease infinite;
} @-webkit-keyframes glowAnimation {
0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }
10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }
100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }
}
@keyframes glowAnimation {
0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }
10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }
100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }
} span.triangle.base {
-webkit-animation: scaleTriangleBase 3s linear infinite;
animation: scaleTriangleBase 3s linear infinite;
} @-webkit-keyframes scaleTriangleBase {
from { -webkit-transform: translate(0px,-11px) scale(0.5); }
to { -webkit-transform: translate(0px,0px) scale(1); }
}
@keyframes scaleTriangleBase {
from { transform: translate(0px,-11px) scale(0.5); }
to { transform: translate(0px,0px) scale(1); }
} span.triangle.no1 {
-webkit-animation: scaleTriangleOne 3s linear infinite;
animation: scaleTriangleOne 3s linear infinite;
} @-webkit-keyframes scaleTriangleOne {
from { -webkit-transform: translate(0px,-46px) scale(0.5); }
to { -webkit-transform: translate(-80px,0px) scale(0); }
}
@keyframes scaleTriangleOne {
from { transform: translate(0px,-46px) scale(0.5); }
to { transform: translate(-80px,0px) scale(0); }
} span.triangle.no2 {
-webkit-animation: scaleTriangleTwo 3s linear infinite;
animation: scaleTriangleTwo 3s linear infinite;
} @-webkit-keyframes scaleTriangleTwo {
from { -webkit-transform: translate(0px,-46px) scale(0.5); }
to { -webkit-transform: translate(80px,0px) scale(0); }
}
@keyframes scaleTriangleTwo {
from { transform: translate(0px,-46px) scale(0.5); }
to { transform: translate(80px,0px) scale(0); }
} span.triangle.no3 {
-webkit-animation: scaleTriangleThree 3s linear infinite;
animation: scaleTriangleThree 3s linear infinite;
} @-webkit-keyframes scaleTriangleThree {
from { -webkit-transform: translate(0px,-116px) scale(0.5); }
to { -webkit-transform: translate(0px,-280px) scale(0); }
}
@keyframes scaleTriangleThree {
from { transform: translate(0px,-116px) scale(0.5); }
to { transform: translate(0px,-280px) scale(0); }
}

转载请注明来源地址:http://www.cnblogs.com/liaohuolin/p/3911528.html

纯CSS3打造非常炫的加载动画的更多相关文章

  1. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  2. android 新闻应用、Xposed模块、酷炫的加载动画、下载模块、九宫格控件等源码

    Android精选源码 灵活的ShadowView,可替代CardView使用 基于Tesseract-OCR实现自动扫描识别手机号 Android播放界面仿QQ音乐开源音乐播放器 新闻应用项目采用了 ...

  3. 纯 HTML/CSS 高仿 Win10 加载动画

    自己做的超高仿Win10加载动画(应该是全网最像的 HTML 实现了),自己想用就拿去用吧 转圈加载 在线演示 HTML: <div class="loading"> ...

  4. CSS3一个酷炫的加载效果

    上效果图,用截屏工具制作的,看起来有点卡,在网页上面显示还是不错的. CSS代码: <style type="text/css"> .loader{ position: ...

  5. CSS3实现的图片加载动画效果

    来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...

  6. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

  7. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  8. 我用 CSS3 实现了一个超炫的 3D 加载动画

    今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...

  9. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

随机推荐

  1. VS2017 IDE开发工具选型、安装和使用

    原文地址:https://blog.csdn.net/boonya/article/details/78739500 距离上次使用VS工具已是2年前了,这次准备选择比较新的版本来开发桌面程序了.总的来 ...

  2. Smarty标签运算,控制结构[if,for,foreach,section,while]

    Smarty标签运算: 在页面上做简单的运算[temp5.html] 条件判断if 循环结构 for foreach用得比较多,foreach例子从数据库取出的数据 section功能和foreach ...

  3. process credentials(三)

    主要内容包括: 1.进程描述符中Realtime Mutex相关数据结构的初始化 2.子进程如何复制父进程的credentials 3.per-task delay accounting的处理 4.子 ...

  4. SharePoint 2013 Backup Farm Automatically With a Powershell and Windows Task Schedule

    In this post,I will show you SharePoint 2013 How to Backup Farm Automatically with a PowerShell and ...

  5. Python 文件 tell() 方法

    描述 Python 文件 tell() 方法返回文件的当前位置,即文件指针当前位置. 语法 tell() 方法语法如下: fileObject.tell() 参数 无 返回值 返回文件的当前位置. 实 ...

  6. go包管理工具glide

    一.命令 安装 $ go get github.com/Masterminds/glide $ go install github.com/Masterminds/glide 初始化项目并在当前项目下 ...

  7. jmeter 压测duobbo接口,施压客户端自己把自己压死了

    jmeter 压测duobbo接口,jmeter代码不合理,导致每执行一次请求,会调用一次消耗内存的实例化.导致越压越慢,请求发不出去.这个时候需要考虑修改代码了. 截图中,tps越来越少. 原来初始 ...

  8. 用python做网页抓取与解析入门笔记[zz]

    (from http://chentingpc.me/article/?id=961) 事情的起因是,我做survey的时候搜到了这两本书:Computational Social Network A ...

  9. Android Webview SSL 自签名安全校验解决方案

    服务器证书校验主要针对 WebView 的安全问题. 在 app 中需要通过 WebView 访问 url,因为服务器采用的自签名证书,而不是 ca 认证,使用 WebView 加载 url 的时候会 ...

  10. SQL作业

    USE [test] GO /****** Object: StoredProcedure [dbo].[wangchuang] Script Date: 2016/8/25 14:09:24 *** ...