<!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. C#操作并口

    http://www.doc88.com/p-2794713468912.html http://blog.csdn.net/pengqianhe/article/details/8021072 ht ...

  2. FilreDAC DLL共享数据连接

    D:\Users\Public\Documents\Embarcadero\Studio\16.0\Samples\Object Pascal\Database\FireDAC\Samples\Com ...

  3. django html模板继承 {%block 标记名｝ ｛%endblock%｝

    对于url文件 url(r'^tp1/', views.tp1) 对于views文件,跳转到tp1.html 同时将list列表传到前端 def tp1(request): list = [1, 2, ...

  4. Java枚举类的serialVersionUID

    起因 最近在公司里敲代码的时候偶然间发现以前留下的枚举类实现了Serializable接口,然后写了个serialVersionUID...我以前一直没在枚举类里使用过..觉得有点神奇....于是百度 ...

  5. Alternative PHP Cache ( APC )

    简介: Alternative PHP Cache (APC) 是一个开放自由的PHP opcode 缓存.它的目标是提供一个自由.开放和健全的框架用于缓存和优化 PHP 的中间代码,加快 PHP 执 ...

  6. IDEA2017 破解方式

    1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.填入下面的license server: http://intellij.mandroid.cn/ http://ide ...

  7. Android开发实战之ViewPager实现向导界面

    当我们更新应用,或者第一次进入应用时都会有一个向导界面,介绍这个app的内容和使用方式. 如果你细心你会发现其实这就是个viewpager,本篇博文将介绍应用的向导界面是如何制作的.希 望本篇博文对你 ...

  8. Gym101128G:Game of Cards

    题意: 有P摞纸牌和一个数字k,每次可以从一摞中拿0-k张牌,拿完再剩下的牌中的第一张数字是几,就必须再拿几张,谁不能拿谁输. emmm感觉好像就是裸的SG游戏啊,数据不大,递推出每一摞牌的SG值,然 ...

  9. ubuntu Qt5 librealsense opencv

    08:11:47: 进程"/usr/bin/make"正常退出. 08:11:47: 配置没有改变, 跳过 qmake 步骤. 08:11:47: 正在启动 "/usr/ ...

  10. 543. Diameter of Binary Tree 二叉树的最大直径

    ［抄题］: Given a binary tree, you need to compute the length of the diameter of the tree. The diameter ...