<!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. Mysql之数据库设计

    一.三大范式 1.第一范式:消除一个字段包含多个数据库值,消除一个记录包含重复的组(单独的一列包含多个项目),即可满足1NF. 2.第二范式:消除部分依赖性即可转化为2NF.部分依赖性表示一个记录中包 ...

  2. ajax传递给后台数组参数方式

    出自:http://blog.csdn.net/lingxyd_0/article/details/10428785 在项目上用到了批量删除与批量更改状态,前台使用了EasyUI的DataGrid,用 ...

  3. VS2015编译VLC2.2.1(under WIN7-64)<转>

    概述: 感谢https://github.com/sunqueen/vlc-2.2.1.32-2013 这个工程,我的工作基本上都是基于它,我只是觉得他的工程设置不够清晰,重新做了一次.区别在于我的工 ...

  4. C#中的goto

    int i = 9;if (i % 2 == 0) goto Found;else goto NoFound; NoFound:            Console.WriteLine(i.ToSt ...

  5. python gun readline

    https://github.com/ludwigschwardt/python-gnureadline

  6. java 蓝桥杯算法提高 _1区间k大数查询

    import java.util.Scanner; public class _1区间K大数查询 { public static void main(String[] args) { Scanner ...

  7. java算法 蓝桥杯 文化之旅

    问题描述 有一位使者要游历各国,他每到一个国家,都能学到一种文化,但他不愿意学习任何一种文化超过一次(即如果他学习了某种文化,则他就不能到达其他有这种文化的国家).不同的国家可能有相同的文化.不同文化 ...

  8. launcher启动应用重启的BUG解决

    最近遇到了一个问题,从launcher重新进入已经运行的应用会直接跳到应用的第一个界面. 经过对应用的跟踪,结合网络上的资料 http://stackoverflow.com/questions/19 ...

  9. TEXTBOX属性TEXTMODE设置为PASSWORD后,后台不能给这个TEXTBOX赋值原因

    TEXTBOX属性TEXTMODE设置为PASSWORD后,后台不能给这个TEXTBOX赋值原因? 在开发中,会在用户管理等修改页面中设置密码的显示.但是直接给TextBox的Text属性赋值在前台无 ...

  10. 如何用shell脚本执行或关闭jar包服务？

    现在springboot很流行,但是大家都知道springboot是以jar包的方式进行打包的,那样就少不了开启或关闭服务的操作了,但是命令方式未免过于繁琐. 下面记录shell脚本的方式启动或关闭服 ...