<!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. python调用函数

    1.同一包内的调用 直接使用import 文件名 或者from 文件名 import 函数名 a.py def p(): print("abc") b.py from a impo ...

  2. PHP - declare tick

    今天看php手册,结构流程控制语句,翻到个没见过的关键字declare(申明的意思).于是稍稍看了下. 大概意思是:定义一段代码.关于他合适执行,怎么执行完全依照他的参数. 反正不知道什么意思.先来一 ...

  3. ios开发中view.layer.shouldRasterize = YES 的使用说明

    在做一个NavigationController push 子页面时,发现push和pop时很卡,研究了一大阵子后,发现在子页面里影响UI流畅的只有UIImageView的圆角设置:然后我就关闭了圆角 ...

  4. 201671010127 2016-2017-18 Java期末总结

    通过本学期Java课程的学习,我对于面向对象的编程语言有了进一步的了解.首先面向对象编程的特点是抽象.封装.继承.多态.由于已经学过c语言,所以对Java的学习实际上是从第四章对向与类开始的,然后学习 ...

  5. Bresenham画线算法

    [Bresenham画线算法] Bresenham是一种光栅化算法.不仅可以用于画线,也可以用用画圆及其它曲线. 通过lower与upper的差,可以知道哪一个点更接近线段: 参考:<计算机图形 ...

  6. centOS系统安装MySQL教程

    如何卸载CentOS系统自带MySQL 1.1. 查找以前是否装有MySQL 命令:rpm -qa|grep -i mysql 可以看到如下图的所示:(图片来自互联网,仅做参考使用) 说明系统自带: ...

  7. 待解决:2bootstrap-cerulean.css Failed to load resource: the server responded with a status of 404 ()

    2bootstrap-cerulean.css Failed to load resource: the server responded with a status of 404 ()

  8. 关于新建XIB去关联控制器，报错- the view outlet was not set

    凡事必勤,切勿眼高手低.这是我对于自己惰性的又一次的自我认识与批评.以前遇见而又解决的问题,当时没有记录,以为都是小CASE,直到积累了广泛的问题和技能,遇见了相同的问题,而又忘记了,又一次认识到笔记 ...

  9. 477. Total Hamming Distance总的二进制距离

    ［抄题］: The Hamming distance between two integers is the number of positions at which the correspondin ...

  10. LIS和LCS LCIS

    首先介绍一下LIS和LCS的DP解法O(N^2) LCS:两个有序序列a和b,求他们公共子序列的最大长度 我们定义一个数组DP[i][j],表示的是a的前i项和b的前j项的最大公共子序列的长度,那么由 ...