<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#box{

position: relative;

}

span{

position: absolute;

border: 8px solid #fff;

border-top: 8px solid transparent;

border-radius: 50%;

}

span:nth-child(1){

width: 80px;

height: 80px;

-webkit-animation: a 1s infinite linear;

}

span:nth-child(2){

width: 40px;

height: 40px;

left: 20px;

top: 20px;

-webkit-animation: b 0.5s infinite linear;

}

@-webkit-keyframes a{

0%{-webkit-transform: rotate(360deg); opacity: 1;}

50%{-webkit-transform: rotate(180deg); opacity: 0.5;}

100%{-webkit-transform: rotate(0deg); opacity: 1;}

}

@-webkit-keyframes b{

0%{-webkit-transform: rotate(0deg); opacity: 0.5;}

50%{-webkit-transform: rotate(180deg); opacity: 1;}

100%{-webkit-transform: rotate(360deg); opacity: 0.5;}

}

</style>

</head>

<body style="background-color: rosybrown;">

<div id="box">

<span></span>

<span></span>

</div>

</body>

仅用CSS3创建h5预加载双旋圈的更多相关文章

  1. 仅用CSS3创建h5预加载雷达圈

    <head> <meta charset="UTF-8"> <title></title> <style type=" ...

  2. 仅用CSS3创建h5预加载跳动圈

    <head> <meta charset="UTF-8"> <title></title> <style type=" ...

  3. 仅用CSS3创建h5预加载交错圈

    <head> <meta charset="UTF-8"> <title></title> <style type=" ...

  4. 仅用CSS3创建h5预加载旋转圈

    <head> <meta charset="UTF-8"> <title></title> <style type=" ...

  5. 移动端-H5预加载页面

    利用简洁的图片预加载组件提升h5移动页面的用户体验   阅读目录 1. 实现思路 2. demo说明 3. 注意事项 4. 总结 在 做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未 ...

  6. h5预加载代码

    预加载 <!--预加载--> <div class="preload"> <div class="prezoom"> < ...

  7. Flex 4 自定义预加载器

    本示例的目的是在Flash Professional里创建自定义预加载器SWC,并扩展SparkDownloadProgressBar类在Flex 4应用程序中使用.    预加载器显示加载进度百分比 ...

  8. 通过link的preload进行内容预加载

    Preload 作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制.Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失. <l ...

  9. Flying Pages：在单击之前预加载页面，打开网页快得飞起

    Flying Pages能够实现:在用户点击网页的链接之前,就预加载这个网页,当再点击这个网页时,页面便能飞速打开,能为网站优化加分.接下来,就由LOYSEO来讲解Flying Pages的使用方法. ...

随机推荐

  1. flowable ContentEngine和ContentEngineConfiguration的关系

    一.CommandExecutor ContentEngineConfiguration继承自 AbstractEngineConfiguration. 在 AbstractEngineConfigu ...

  2. python 多维list声明时的小问题

    a=[[]]*3 a Out[18]: [[], [], []] a[0].append(1) a Out[20]: [[1], [1], [1]] b=[[] for _ in range(3)] ...

  3. 关于Django的core first 、db first

    db first 根据数据库的表生成类 django : python manage.py inspectdb code first 根据类创建数据库表: django: python manage. ...

  4. MySQL中的锁理解

    1.目的:解决客户端并发访问的冲突问题 2.锁的分类 1.锁类型 1.读锁(共享锁) 查询(select):加读锁之后,别人不能更改表记录,但是可以进行查询. 2.写锁(互斥锁,排他锁) 更新(upd ...

  5. Typescript : 遍历Array的方法：for, forEach, every等

    方法一,for…of 这个貌似是最常用的方法,angular 2中HTML语法绑定也是要的这种语法. let someArray = [1, "string", false]; f ...

  6. Java并发--深入剖析ThreadLocal

    想必很多朋友对ThreadLocal并不陌生,今天我们就来一起探讨下ThreadLocal的使用方法和实现原理.首先,本文先谈一下对ThreadLocal的理解,然后根据ThreadLocal类的源码 ...

  7. 查询避免Unknown column ‘xxx’ in ‘where clause’

    但凡写过sql语句的人估计都曾经碰到过类似于Unknown column ‘xxx’ in ‘where clause’的问题. 单从字面理解,我们很容易得出列名不存在的结论,但是,很多时候起始并不是 ...

  8. 51nod 1118 机器人走方格

    M * N的方格,一个机器人从左上走到右下,只能向右或向下走.有多少种不同的走法?由于方法数量可能很大,只需要输出Mod 10^9 + 7的结果. 收起   输入 第1行,2个数M,N,中间用空格隔开 ...

  9. python环境搭建-Linux系统下python2.7升级python3.5.2步骤

    首先Python 查看版本 , 在Linux下特别注意权限问题,创建目录时候切记给予权限 如果是 ubnutu 请使用首先切换到 sudo su , 否则 make install 会出现问题.. 升 ...

  10. Ubuntu搭建 Apache、MySQL、PHP环境

    以Ubuntu 16.04为例: 1.安装MysSQL 打开命令行输入 :sudo apt-get install mysql-server 输入管理员密码 选择Y 在安装的中间会出现输入Mysql的 ...