<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. 服务上部署jmeter远程机

    1.首先连接服务器 2.在/home下新创建一个自己的文件夹 ]#useradd zhuxiao ]#ls 显示新的用户并在home下创建zhuxiao文件夹 ①切换到用户zhuxiao目录下 ]#s ...

  2. caffe学习记录2——blobs

    参考:caffe官网  2016-01-23 10:08:22 1 blobs,layers,nets是caffe模型的骨架 2 blobs是作者写好的数据存储的“容器”,可以有效实现CPU和GPU之 ...

  3. 图文详解如何利用Git+Github进行团队协作开发

    团队协作开发中,大部分都会用到版本控制软件,比如Git.Svn等.本文将通过一个实例,详细讲解在真实的工作环境中,一个团队应该如何利用Git+Github进行协作开发,即详解Git工作流程.并就其中比 ...

  4. absolute的left和right的妙用

    之前做了一个自定义鼠标右键的布局,做的过程中遇到了一个很有趣的问题,之前一直没有注意到. 目标样式如下: 期初并不知道文字内容需要随机,所以写的时候写“死”了. 所有的内容都是按照设计的四个文字走的, ...

  5. 获取web.config 内的值

    获取 System.Configuration.ConfigurationManager.AppSettings[DrugPackageRegistrationName]//获取web.config ...

  6. JavaScript中字符串截取函数slice()、substring()、substr()

    在js中字符截取函数有常用的三个slice().substring().substr()了,下面我来给大家介绍slice().substring().substr()函数在字符截取时的一些用法与区别吧 ...

  7. springboot 填坑一 springboot java.sql.SQLException: Access denied for user ''@'localhost' (using password: NO)

    这里有个很不明显的错误  初次搭建很容易犯这个错

  8. excel怎么一次性生成10万个6位连续数 和 随机6位数

    1.打开工作表,在名称框输入A1:A100000 2.编辑栏输入 =int(rand()*900000+100000) 3.按ctrl+enter 需要提取的话,马上ctrl+c就可以在其它软件中粘贴 ...

  9. 重温CLR（十三） 定制特性

    利用定制特性,可宣告式为自己的代码构造添加注解来实现特殊功能.定制特性允许为几乎每一个元数据表记录项定义和应用信息.这种可扩展的元数据信息能在运行时查询,从而动态改变代码的执行方式.使用各种.NET技 ...

  10. 看到就是赚到！Selenium完整框架——告别2017

    这个框架大家可以拿过去直接用——作为送给大家的元旦礼物——船长对你们简直太好了! 学了这么长时间,又是定位,又是发邮件,还有乱七八糟的unittest,现在时候后把东西用起来了~而且学会了这一篇你就可 ...