<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#box{

position: relative;

width: 100px;

margin: 100px auto 0;

}

span{

position: absolute;

width: 50px;

height: 50px;

border: 5px solid #fff;

border-radius: 50%;

-webkit-animation: a 4s infinite linear;

}

span:nth-child(1){

-webkit-animation-delay: 0s;

}

span:nth-child(2){

-webkit-animation-delay: 0.66s;

}

span:nth-child(3){

-webkit-animation-delay: 1.33s;

}

@-webkit-keyframes a{

0%{-webkit-transform: scale(0); opacity: 0;}

25%{-webkit-transform: scale(0); opacity: 0.5;}

50%{-webkit-transform: scale(1); opacity: 1;}

75%{-webkit-transform: scale(1.5); opacity: 0.5;}

100%{-webkit-transform: scale(2); opacity: 0;}

}

</style>

</head>

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

<div id="box">

<span></span>

<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. echarts-detail--柱状图

    一:柱形图 1.Echarts-柱状图柱图宽度设置-----只需要设置series中的坐标系属性barWidth就可以 /** * 堆积柱状图 * @param xaxisdata x轴:标签(数组) ...

  2. 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）

    body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...

  3. shell编程--遍历目录下的文件

    假定目录text下有如下文件      目录:dir_1.dir_2.dir_3 文件:text_1.text_2 遍历目录下所有的文件是目录还是文件 if -- if类型: #!bin/sh for ...

  4. WebLogic11g-常用运维操作

    转:http://www.codeweblog.com/weblogic11g-%e5%b8%b8%e7%94%a8%e8%bf%90%e7%bb%b4%e6%93%8d%e4%bd%9c/ 希望这篇 ...

  5. "http://127.0.0.1:4723/wd/hub"的解释

    先补充一个内容,就是appium安装时候的环境变量配置,必须要配ANDROID_HOME这个变量,不是“要配置”,是“必须配置”,其他的那些放到系统变量的path里就可以了: # coding: ut ...

  6. 在Eclipse中导入dtd和xsd文件，使XML自动提示

    DTD 类型约束文件    1. Window->Preferences->XML->XML Catalog->User Specified Entries窗口中,选择Add ...

  7. saas 系统租户自助网站

    1. 原理       类似github 的自定义页面,使用jekyll 进行租户自助网站的生成,系统使用jenkins 进行租户的网站构建    同时结合租户的个性化域名系统,进行租户页面的发布管理 ...

  8. Mongodb简单介绍安装

    具体详细内容,请查阅 Mongodb官方文档 一.简单介绍 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. M ...

  9. vue的动画组件（transition）

    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...

  10. 简单服务端缓存API设计

    Want 我们希望设计一套缓存API,适应不同的缓存产品,并且基于Spring框架完美集成应用开发. 本文旨在针对缓存产品定义一个轻量级的客户端访问框架,目标支持多种缓存产品,面向接口编程,目前支持简 ...