1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>css</title>
  6. </head>
  7. <body>
  8.  
  9. <div id="example"></div>
  10. <div style="position:relative;width:100px;height:100px">
  11. <div class="rotateline1"></div>
  12. <div class="rotateline2"></div>
  13. <div class="rotateline3"></div>
  14. </div>
  15.  
  16. </body>
  17. </html>
  18.  
  19. <style>
  20. .rotateline1{
  21.     position:absolute;
  22.     left:0;
  23.     top:0;
  24.     width: 100%;
  25.     height: 100%;
  26.     border-radius:50%;
  27.     border:4px solid transparent;
  28.     border-left: 4px solid red;
  29.     animation:spin .7s ease  infinite;
  30. }
  31. .rotateline2{
  32.     position:absolute;
  33.     left:10%;
  34.     top:10%;
  35.     width: 80%;
  36.     height: 80%;
  37.     border-radius:50%;
  38.     border:4px solid transparent;
  39.     border-left: 4px solid blue;
  40.     animation:spin 1s ease  infinite;
  41. }
  42. .rotateline3{
  43.     position:absolute;
  44.     left:20%;
  45.     top:20%;
  46.     width: 60%;
  47.     height: 60%;
  48.     border-radius:50%;
  49.     border:4px solid transparent;
  50.     border-left: 4px solid green;
  51.     animation:spin 1.2s ease  infinite;
  52. }
  53. @keyframes spin{
  54.     0%{
  55.         transform:rotate(0deg)
  56.     }
  57.     100%{
  58.         transform:rotate(360deg)
  59.     }
  60. }
  61. </style>

css 三彩loading的更多相关文章

  1. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  2. 使用css实现loading的加载

    使用css实现loading的加载的效果图 html代码 <div id="caseVerteClaire"> <div id="transform&q ...

  3. css skeleton loading & skeleton components

    css skeleton loading css & :empty See the Pen Skeleton Screen with CSS by xgqfrms (@xgqfrms) on ...

  4. 纯js+css实现loading等待效果

    此插件是基于jqueryUI的widget,下面是具体实现代码 第一部分css: /***loading***/ .loading-box{ position:absolute; text-align ...

  5. css动画 loading

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 6种纯css实现loading效果

    1. <div id="loadingWrap1"> <span></span> <span></span> <s ...

  7. Loading CSS without blocking render

    The principles behind these techniques aren't new. Filament group, for example, have published great ...

  8. 纯css去实现loading动画效果图

    当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...

  9. 前端CSS规范整理_转载、、、

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...

随机推荐

  1. python安装库(Windows下)

    首先确保安装了pip,并且pip也加入了系统path路径: pip下载:https://pypi.python.org/pypi/pip#downloads 下载Python对应的包:(http:// ...

  2. EF中关系映射问题

    一对一,和一对多的简单问题就部说了,直接来多对多这样的问题吧. 首现关系映射为这样的: /// <summary> /// 对应数据库中dbo.Address表 /// </summ ...

  3. 奶牛易物-Alpha版本测试报告

    1.在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个? a. 修复的bug: 1.mapper接口与mapper.xml文件绑定的问题; 2..配置逆向工程的配置文件的问题; 3.在编码 ...

  4. 两个不同vim之间复制内容

    常规想法是打开两个vim,然后进行yy和p操作,但是实践证明根本是不行的.此时,我们需要分割窗口,然后就可以复制粘贴了.步骤如下: 假设我要把srv.c文件的readline函数整体复制到cli.c文 ...

  5. java算法 蓝桥杯算法训练 Fibonacci数列

    问题描述 Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1. 当n比较大时,Fn也非常大,现在我们想知道,Fn除以10007的余数是多少. 输入格式 输入包含一个整数n ...

  6. 如何降低Unity程序的Drawcall

    [如何降低Unity程序的Drawcall] Unity can combine a number of objects at runtime and draws them together with ...

  7. Java-实体与集合转换

    import java.beans.BeanInfo; import java.beans.IntrospectionException; import java.beans.Introspector ...

  8. [C++] STACK_Principle

    STACK_Principle

  9. ECS 游戏架构 应用

    转载自:http://blog.csdn.net/i_dovelemon/article/details/30250049 如何在cocos2d-x中使用ECS(实体-组件-系统)架构方法开发一个游戏 ...

  10. IO引脚复用和映射

    1.端口复用 这些外设包括ADC,DAC以及串口等等. 查找STM32F429数据手册可以找到相关IO口的复用功能引脚. 注意:除ADC和DAC要配置成模拟通道外,其他的所有外设都要配置成复用功能.