<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. Suffix（hash+lcp+二分）

    题目链接: Suffix Consider n given non-empty strings denoted by s1 , s2 , · · · , sn . Now for each of th ...

  2. SQL 添加删除列

    --添加一列 alter table TableName add columnName columnType --删除表中的一列 alter table TableName drop column c ...

  3. Mac设置SVN：Cornerstone3

    前因 在windows下用Tortoisesvn.可惜Tortoisesvn没有Mac版,只能上知乎寻找适合于 Mac的SVN软件. 经过 找到了一款名为Cornerstone的软件.在App Sto ...

  4. Vue设置全局的方法和样式

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  5. Python学习-类

    类是对象的模板或蓝图,类是对象的抽象化,对象是类的实例化 在python中,一个对象的特征也称为属性(attribute),它所具有的的行为也称为方法(method) 对象 = 属性(特征)+方法(行 ...

  6. 错误:'class QApplication' has no member named 'setMainwidget'

    错误:'class QApplication' has no member named 'setMainwidget' 转自:http://blog.csdn.net/chenqiai0/articl ...

  7. Django之tag标签和filter标签

    1.Django的tag常见的标签,可以做一些简单的功能 {%if%} 的使用主要用于做判断,还可以包含{%elif%} 这样的用法,最后要跟上{% endif %}.可以使用你的and,or,not ...

  8. c++调用fortran程序中遇到的问题

    一.C++动态调用Fortran DLL (1)创建FORTRAN DLL工程,生成forsubs.dll文件供调用. ! forsubs.f90 ! ! FUNCTIONS/SUBROUTINES ...

  9. [MEF]第02篇 MEF的导入导出契约

    一.演示概述此演示介绍了如何为Export指定导出的协议名和类型,以及如何为Import指定导入的协议名和类型,只有确保导出和导入的协议名和类型相匹配了,才能注入成功,否则注入就会失败.相关下载(屏幕 ...

  10. 再谈zabbix 邮件通知配置(不用脚本，简单配置就可以了)

    备注: 安装过zabbix 的人,大家都应该了解,后者查询网上的资料邮件通知一般是编写一个脚本,即报警媒介类型,创建一个script类似的 然后编写脚本,进行发送,但是实际上,系统内置的邮件发送还是比 ...