<!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. **三元运算和lambda

    三元运算 在说三元运算之前,我们看一段代码: a = 1 if a == 1: name = 'Hello' else: name = 'World' print(name) 输出:Hello 对于这 ...

  2. delphi 选择文件夹，路径选择，浏览文件夹

    选择文件夹,路径选择, 文件夹 资源管理器 推荐  SelectDirectory http://docwiki.embarcadero.com/Libraries/Seattle/en/Vcl.Fi ...

  3. Oracle11gr2_ADG管理之switchover补充

    之前演示的switchver总是提示下面的错误,并且需要人工干预: Oracle11gr2_ADG管理之switchover实战 DGMGRL> switchover to snewtest; ...

  4. angular.module方法

    关于module的定义为:angular.module(‘com.ngbook.demo’, []).关于module函数可以传递3个参数,它们分别为: name:模块定义的名称,它应该是一个唯一的必 ...

  5. .NET高级工程师逻辑面试题

    1.面试题 有5座连续相邻的房子,并且每个房子有同的颜色:蓝色,绿色,红色,白色和黄色 每间房子的主人有不同的国籍:英国.印尼.德国.美国和荷兰 每个人喝不同的饮料:葡萄汁.咖啡.牛奶.茶和水 每个人 ...

  6. java算法 第七届 蓝桥杯B组（题+答案） 2.生日蜡烛

    2.生日蜡烛  (结果填空) 某君从某年开始每年都举办一次生日party,并且每次都要吹熄与年龄相同根数的蜡烛.现在算起来,他一共吹熄了236根蜡烛.请问,他从多少岁开始过生日party的?请填写他开 ...

  7. python3企业微信群组报警

    公司提出一个需求需要做一个企业微信的一个消息推送,需要将消息发送到聊天群里详细信息如下. 如何创建应用请阅读我的上篇文章:https://www.cnblogs.com/wangyajunblog/p ...

  8. JSP的原理、JSP的执行过程

    Jsp的本质是servlet, 通过response的printWriter返回,response的getOutputStream只能调用一次,返回流就不能返回页面刷新. JSP起源 在很多动态网页中 ...

  9. loadrunner怎样进行手动关联

    转自:http://novasblog.blog.163.com/blog/static/43713514200901341934981/ 手动关联的主要步骤为:        第一步:录制测试脚本, ...

  10. idea hibernate jpa 生成实体类

    0,添加mysql数据库连接 1,生成个hibernate.cfg.xml 2,打开Persisitence 3,Import Databases Schema 4,选择表生成实体类