纯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. Git 打标签(分布式版本控制系统)

    前言 像其他版本控制系统(VCS)一样,Git 可以给历史中的某一个提交打上标签,以示重要.比较有代表性的是人们会使用这个功能来标记发布结点(v1.0 等等). 1.列出标签 在 Git 中列出已有的 ...

  2. SharePoint 2013混合模式登陆中 使用 自定义登陆页

    接前一篇博客<SharePoint 2013自定义Providers在基于表单的身份验证(Forms-Based-Authentication)中的应用>,当实现混合模式登陆后,接着我们就 ...

  3. Java读取excel的示例

    一.引用的jar包,apache的POI // https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml compile group: ' ...

  4. 【转载】centos7.3 防火墙配置

    firewalld介绍原文:https://www.cnblogs.com/moxiaoan/p/5683743.html 一. centos7 默认有一个防火墙 firewalld,具体使用如下: ...

  5. SQL中特殊符号的使用

    1. & 在Oracle中,& 是从需要外部输入输入的变量,PS:MySqL中可以直接用"P&G"这样的字符串,故不存在本文所说的问题 如下SQL语句就不能 ...

  6. Intellij dea 注释行如何自动缩进?

    Intellij dea 注释行如何自动缩进?   进入 Settings -> Code Style -> Java ,在右边选择 “Code Generation” Tab,然后找到 ...

  7. jQuery学习笔记(事件)

    1. 加载DOM jQuery用$(document).ready()方法来代替传统JavaScrpt的window.onload方法.但它们执行时机有所不同,window.onload在网页所有元素 ...

  8. 使用组件构建Android应用程序

    原文链接:http://android.eoe.cn/topic/android_sdk 应用程序组件 Android's application framework lets you create ...

  9. iOS 应用程序目录结构

    iOS应用程序采用的是沙盒原理设计,普及一下知识:沙盒是在受限的安全环境中运行应用程序的一种做法,这种做法是要限制授予应用程序的代码访问权限. 具体的特点有三点:1.每个应用程序都有自己的存储空间:  ...

  10. [tools]hugo&github构建静态网站/百度统计

    hugo/github构建网站基本原理 1.hugo是一个静态化的工具,你写md,然后他把md转换成对应样式的html, 2.并给html嵌入百度统计的script.然后你将html放到github上 ...