领购物优惠券9块9包邮
首页 > 前端技术 > css教程

实例教程 纯CSS3打造非常炫的加载动画效果

   2015-12-19 0
核心提示：这篇文章主要为大家介绍了一款非常炫的加载图，代码非常简单。没有用任何javascript代码。纯css3实现。用在需要一定时间加载的地方非常合适，感兴趣的可以来复制代码学习哦

　　纯css3打造的一款非常炫的加载图。用在需要一定时间加载的地方非常合适。代码非常简单。没有用任何javascript代码。纯css3实现。先上效果图：

实例教程 纯CSS3打造非常炫的加载动画效果

　　实现代码如下：

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <div class="content">  
  2.        <div style="width: 970px; margin: auto">  
  3.        </div>  
  4.        <div class="rotate">  
  5.            <span class="triangle base"></span><span class="triangle no1"></span><span class="triangle no2">  
  6.            </span><span class="triangle no3"></span>  
  7.        </div>  
  8.    </div>  

　　CSS代码：

CSS Code复制内容到剪贴板
  1. body {   
  2.     padding:0;   
  3.     margin:0;      
  4.     background-color: #2a4e66;   
  5.   overflow: hidden;   
  6. }   
  7.   
  8. .content {   
  9.     width:100%;   
  10.     height:100%;   
  11.     top:0;   
  12.     rightright:0;   
  13.     bottombottom:0;   
  14.     left:0;   
  15.     position:absolute;   
  16. }   
  17.   
  18. .rotate {   
  19.     position: absolute;   
  20.     top: 50%;   
  21.     left: 50%;   
  22.     margin: -93px 0 0 -93px;   
  23.     background: transparent;   
  24.     width: 186px;   
  25.     height: 186px;   
  26.     border-radius: 50%;   
  27.     z-index: 20;   
  28. }   
  29.   
  30. .rotate:after {   
  31.     content: '';       
  32.     position: absolute;   
  33.     box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff;   
  34.     width: 186px;   
  35.     height: 186px;   
  36.     border-radius: 50%;   
  37.     z-index: 10;   
  38. }   
  39.   
  40. span.triangle.base {   
  41.     position: absolute;   
  42.     width: 0;    
  43.     height: 0;   
  44.     margin: 46px 0 0 13px;   
  45.     border-left: 80px solid transparent;   
  46.     border-right: 80px solid transparent;                  
  47.     border-top: 140px solid #eeeeee;   
  48.     transform-origin: 50% 50%;   
  49.     z-index: 20;   
  50. }   
  51.   
  52. span.triangle.no1 {   
  53.     position: absolute;   
  54.     margin: 46px 0 0 13px;   
  55.     width: 0;    
  56.     height: 0;    
  57.     border-left: 80px solid transparent;   
  58.     border-right: 80px solid transparent;                  
  59.     border-bottom: 140px solid #eeeeee;   
  60.     transform-origin: 0 100%;   
  61.     z-index: 20;   
  62. }   
  63.   
  64. span.triangle.no2 {   
  65.     position: absolute;   
  66.     margin: 46px 0 0 13px;   
  67.     width: 0;    
  68.     height: 0;    
  69.     border-left: 80px solid transparent;   
  70.     border-right: 80px solid transparent;                  
  71.     border-bottom: 140px solid #eeeeee;   
  72.     transform-origin: 100% 100%;   
  73.     z-index: 20;   
  74. }   
  75.   
  76. span.triangle.no3 {   
  77.     position: absolute;   
  78.     margin: 46px 0 0 13px;   
  79.     width: 0;    
  80.     height: 0;    
  81.     border-left: 80px solid transparent;   
  82.     border-right: 80px solid transparent;                  
  83.     border-bottom: 140px solid #eeeeee;   
  84.     transform-origin: 50% 100%;   
  85.     z-index: 20;   
  86. }   
  87.   
  88. /* Animation */  
  89.   
  90. .rotate {   
  91.     -webkit-animation: rotateTriangle 3s linear infinite;   
  92.     animation: rotateTriangle 3s linear infinite;   
  93. }   
  94.   
  95. @-webkit-keyframes rotateTriangle {   
  96.     from { -webkit-transform: rotate(0deg); }   
  97.     to { -webkit-transform: rotate(60deg); }   
  98. }   
  99. @keyframes rotateTriangle {   
  100.     from { transform: rotate(0deg); }   
  101.     to { transform: rotate(60deg); }   
  102. }   
  103.   
  104. .rotate:after {   
  105.     -webkit-animation: glowAnimation 3s ease infinite;   
  106.     animation: glowAnimation 3s ease infinite;   
  107. }   
  108.   
  109. @-webkit-keyframes glowAnimation {         
  110.     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; }   
  111.     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; }   
  112.     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; }   
  113. }   
  114. @keyframes glowAnimation {   
  115.     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; }   
  116.     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; }   
  117.     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; }   
  118. }   
  119.   
  120. span.triangle.base {   
  121.     -webkit-animation: scaleTriangleBase 3s linear infinite;   
  122.     animation: scaleTriangleBase 3s linear infinite;   
  123. }   
  124.   
  125. @-webkit-keyframes scaleTriangleBase {   
  126.     from { -webkit-transform: translate(0px,-11px) scale(0.5); }   
  127.     to { -webkit-transform: translate(0px,0px) scale(1); }   
  128.     }   
  129. @keyframes scaleTriangleBase {   
  130.     from { transform: translate(0px,-11px) scale(0.5); }   
  131.     to { transform: translate(0px,0px) scale(1); }   
  132. }   
  133.   
  134. span.triangle.no1 {   
  135.     -webkit-animation: scaleTriangleOne 3s linear infinite;   
  136.     animation: scaleTriangleOne 3s linear infinite;   
  137. }   
  138.   
  139. @-webkit-keyframes scaleTriangleOne {   
  140.     from { -webkit-transform: translate(0px,-46px) scale(0.5); }   
  141.     to { -webkit-transform: translate(-80px,0px) scale(0); }   
  142. }   
  143. @keyframes scaleTriangleOne {   
  144.     from { transform: translate(0px,-46px) scale(0.5); }   
  145.     to { transform: translate(-80px,0px) scale(0); }   
  146. }   
  147.   
  148. span.triangle.no2 {   
  149.     -webkit-animation: scaleTriangleTwo 3s linear infinite;   
  150.     animation: scaleTriangleTwo 3s linear infinite;   
  151. }   
  152.   
  153. @-webkit-keyframes scaleTriangleTwo {   
  154.     from { -webkit-transform: translate(0px,-46px) scale(0.5); }   
  155.     to { -webkit-transform: translate(80px,0px) scale(0); }   
  156. }   
  157. @keyframes scaleTriangleTwo {   
  158.     from { transform: translate(0px,-46px) scale(0.5); }   
  159.     to { transform: translate(80px,0px) scale(0); }   
  160. }   
  161.   
  162. span.triangle.no3 {   
  163.     -webkit-animation: scaleTriangleThree 3s linear infinite;   
  164.     animation: scaleTriangleThree 3s linear infinite;   
  165. }   
  166.   
  167. @-webkit-keyframes scaleTriangleThree {   
  168.     from { -webkit-transform: translate(0px,-116px) scale(0.5); }   
  169.     to { -webkit-transform: translate(0px,-280px) scale(0); }   
  170. }   
  171. @keyframes scaleTriangleThree {   
  172.     from { transform: translate(0px,-116px) scale(0.5); }   
  173.     to { transform: translate(0px,-280px) scale(0); }   
  174. }  
    175. 　　
　　以上就是实现一款非常炫的加载图的css代码，谢谢阅读，希望能帮到大家，请继续关注乐学网（lexue001.com），我们会努力分享更多优秀的文章。
 
标签： 纯CSS3 加载动画
反对 0举报 0 评论 0
 

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.

  • 纯CSS3实现的一些酷炫效果 css实现炫酷背景
    纯CSS3实现的一些酷炫效果 css实现炫酷背景
    　　之前在网上看到一些用纯CSS3实现的酷炫效果，以为实现起来比较困难，于是想看看具体是怎么实现的。一、笑脸猫动画实现效果如下：这个实现起来确实比较麻烦，很多地方需要花时间，有耐心地调整。1.先看下页面结构：bodydiv class="container"!-- 脸 --div
    03-08
  • 纯css3代码写九宫格效果 css九宫格 图片布局
    主要用到css3中的transition和布局知识。代码如下1 !DOCTYPE html2 html lang="en"3 head4 meta charset="UTF-8"5 meta name=""6 title标题/title7 /head8 style type="text/css"9 *{margin: 0;padding: 0;} 10 body{background: url(images/bg.jpg);}
    03-08
  • 【原创】使用纯CSS3制作一个无限循环的动画
    实际效果：@-webkit-keyframes gogogo {0%{-webkit-transform: rotate(0deg); border:5px solid red;}50%{-webkit-transform: rotate(180deg);background:black; border:5px solid yellow;}100%{-webkit-transform: rotate(360deg);background:white; border:
    03-08
  • 纯css3鼠标经过图片显示描述特效 css中鼠标经过时显示图片
    纯css3鼠标经过图片显示描述特效 css中鼠标经过
    http://www.w2bc.com/Article/5582今天给大家带来的是用css3技术实现鼠标经过图片，显示图片描述的动画效果。鼠标经过图片时，图片动画缩小并渐变显示描述。我们一起看看效果图：                        在线预览   源码下载我们
    03-08
  • [原创]纯CSS3打造的3D翻页翻转特效
    刚接触CSS3动画，心血来潮实现了一个心目中自己设计的翻页效果的3D动画，页面纯CSS3，目前只能在Chrome中玩，理论上可以支持Safari。1. 新建HTML，代码如下（数据和翻页后的数据都是瞎模拟的）!doctype htmlheadmeta charset="utf-8"titleCSS3 Animation/titl
    02-08
  • 【CSS3】纯CSS3制作页面切换效果
    【CSS3】纯CSS3制作页面切换效果
      此前写的那个太复杂了，来点简单的核心  htmlheadtitle/titlestyle type="text/css"* { margin: 0; padding: 0; border: none; } .Bl {width: 600px; height: 540px; margin: 0 auto;position: relative;top: 50%;transform: translateY(-50%);}.Blinpu
    02-08
  • 纯CSS3实现8组超炫酷鼠标滑过图片动画
    这篇文章主要为大家分享了8组超炫酷纯CSS3鼠标滑过图片动画效果，每一个动画效果都很精彩，值得大家学习借鉴，感兴趣的小伙伴们可以参考一下
    04-27 CSS3鼠标滑过
  • 纯CSS3打造属于自己的“小黄人”
    这篇文章主要为大家详细介绍了纯CSS3打造属于自己的“小黄人”的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    04-27 CSS3小黄人
  • 纯CSS3代码实现文字描边
    CSS3作为新兴的前端技术可以实现很多复杂变化的效果，比如文字描边。这里主要用到text-shadow属性，顾名思义就是为文字加上阴影效果，本文给大家介绍纯CSS3代码实现文字描边，需要的朋友参考下
    04-27 CSS3文字描边
  • 非常震撼的纯CSS3人物行走动画
    这篇文章主要介绍了一款非常震撼的纯CSS3人物行走动画，利用CSS3技术将人物行走的姿态描绘得非常逼真，感兴趣的小伙伴们可以参考一下
    03-12 CSS3人物行走
更多>html教程
Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题 HTML在网页中插入音频视频简单的滚动效果
更多>css教程
纯CSS3实现的一些酷炫效果 css实现炫酷背景 css3 渐变gradient
更多>html5教程
HTML5实现多张图片上传功能 HTML5手机端弹出遮罩菜单特效代码
更多>XML/XSLT
简介XML文档的阅读与编辑 深入解析XML中的DTD文档类型定义
更多>javascript
JavaScript清除空格、换行，把双引号转换成单引号 JavaScript中什么是闭包
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  网站留言  |  违规举报