<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. Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...

  2. select2如何设置默认空值

    1.问题背景 select2搜索下拉框,当满足某种条件时,让它默认选中空值 2.问题原因 <!DOCTYPE html> <html> <head> <met ...

  3. linux c++ 服务器端开发面试必看书籍

    摘自别人博客,地址:http://blog.csdn.net/qianggezhishen/article/details/45951095 打算从这开始一本一本开始看 题外话: 推荐一个 githu ...

  4. 根据显示器的分辨率，加载不同CSS样式表

    <link rel="stylesheet" type="text/css" id="css"><script langu ...

  5. day5 io模型

    五种概览:http://www.cnblogs.com/xiehongfeng100/p/4763225.html http://sukai.me/linux-five-io-models/  内有多 ...

  6. 升级到XE10

    下午抽空从XE7升级到XE10,用的是lsuper大侠的Dx10Update1_23.0.21418.4207,用到的控件基本装全乎了. 过程中也碰到点问题,记录下子. 1. cnPack结构匹配线与 ...

  7. Encode Adjacent Letters

    Encode a string by counting the consecutive letter. (i.e., "aaaabbxxxyyz" might become &qu ...

  8. Set集合学习

    Java中的Set主要有:HashSet.TreeSet.LinkedHashSet. 一:HashSet HashSet 是一个没有重复元素的无序集合. HashSet由HashMap实现的,不保证 ...

  9. Hive中日期处理

    1.日期函数UNIX时间戳转日期函数:from_unixtime() 函数 格式 返回值 说明 from_unixtime from_unixtime(bigint unixtime[, string ...

  10. gradle build scan 插件使用

    1. 添加插件 build.gradle plugins { id 'com.gradle.build-scan' version '1.10.2' } buildScan { // Uncommen ...