<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>css</title>

</head>

<body>

<div id="example"></div>

<div style="position:relative;width:100px;height:100px">

<div class="rotateline1"></div>

<div class="rotateline2"></div>

<div class="rotateline3"></div>

</div>

</body>

</html>

<style>

.rotateline1{

    position:absolute;

    left:0;

    top:0;

    width: 100%;

    height: 100%;

    border-radius:50%;

    border:4px solid transparent;

    border-left: 4px solid red;

    animation:spin .7s ease  infinite;

}

.rotateline2{

    position:absolute;

    left:10%;

    top:10%;

    width: 80%;

    height: 80%;

    border-radius:50%;

    border:4px solid transparent;

    border-left: 4px solid blue;

    animation:spin 1s ease  infinite;

}

.rotateline3{

    position:absolute;

    left:20%;

    top:20%;

    width: 60%;

    height: 60%;

    border-radius:50%;

    border:4px solid transparent;

    border-left: 4px solid green;

    animation:spin 1.2s ease  infinite;

}

@keyframes spin{

    0%{

        transform:rotate(0deg)

    }

    100%{

        transform:rotate(360deg)

    }

}

</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. leetcode849

    public class Solution { public int MaxDistToClosest(int[] seats) { ; var len = seats.Length; ) { ; } ...

  2. 初识Dash -- 构建一个人人都能够轻松上手的界面，操控数据和可视化

    从事数据科学工作,少不了使用Pandas.scikit-learn这些Python生态系统中的利器,还有就是控制工作流的Jupyter Notebooks,没的说,你和同事都爱用.但是,要想将工作成果 ...

  3. 【MongoDB】MongoDB 性能优化 - BI查询聚合

    在BI服务中通过查询聚合语句分析定位慢查询/聚合分析,小结如下: 慢查询定位: 通过Profile分析慢查询 对于查询优化: 通过添加相应索引提升查询速度: 对于聚合大数据方案: 首先要说明的一个问题 ...

  4. BurpSuite系列(十二)----User options模块(用户选择)

    一.简介   User options模块主要用来配置一些常用的选项. 二.模块说明 User options主要由4个模块组成: 1.Connections 连接 2.SSL 3.Display 4 ...

  5. iOS学习之UIDatePicker控件使用

    iOS上的选择时间日期的控件是这样的,左边是时间和日期混合,右边是单纯的日期模式. ,   您可以选择自己需要的模式,Time, Date,Date and Time  , Count Down Ti ...

  6. go_指针

    值传递:相当于在内存中拷贝一分变量出来,拷贝变量的改变对原变量不影响 引用传递:直接引用内存中的变量,会被改变 c,c++值传递和引用传递都有 Java,python多用引用传递 go语言指针简单之处 ...

  7. IDEA06 代码规范检测插件之Alibaba Java Coding Guidelines

    1 官方资料 1.1 官方介绍 https://mp.weixin.qq.com/s/IbibsXlWHlM59kfXJqRvZA#rd 1.2 github地址 https://github.com ...

  8. DBArtist之Oracle入门第3步: 安装配置PL/SQL Developer

    操作系统:            WINDOWS 7 (64位) 数据库:               Oracle 11gR2 (64位) PL/SQL Developer :    PL/SQL ...

  9. catkin_make与gtest出现冲突的问题与解决

    gtest是测试时调用的,把测试禁止掉试试 catkin_make --pkg pkgname -DCATKIN_ENABLE_TESTING=0

  10. WebAPI如何返回json

    public HttpResponseMessage PostUser(User user) { JavaScriptSerializer serializer = new JavaScriptSer ...