<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. 我也说说Emacs吧(2) - Emacs其实就是函数的组合

    Emacs本质上是函数的组合 从帮助上看emacs有何不同 Vim和Sublime Text等编辑器,本质上是一个编辑器. 比如我们看看vim的帮助,是这个风格的,比如我要看i命令的帮助: <i ...

  2. windows cmd 命令行 —— 进程与服务

    1. 进程查看与操作 tasklist tskill pid 2. 服务查看与操作 net start net stop

  3. learn go error

    package main // 参考文档: // https://github.com/Unknwon/the-way-to-go_ZH_CN/blob/master/eBook/05.2.md im ...

  4. Python源码分析（二） - List对象

    python中的高级特性之一就是内置了list,dict等.今天就先围绕列表(List)进行源码分析. Python中的List对象(PyListObject) Python中的的PyListObje ...

  5. SQL查询执行步骤

    1.总结 执行顺序 3.select ...聚合函数 from 表名 1.where ... 2.group by ... 4.having ... 5.order by ... 6.limit .. ...

  6. js学习笔记知识点

    AJAX用法安全限制JSONPCORS面向对象编程创建对象构造函数原型继承class继承 AJAX 用法 AJAX不是JavaScript的规范,它只是一个哥们“发明”的缩写:Asynchronous ...

  7. 深入理解java虚拟机-第13章-线程安全与锁优化

    第十三章 线程安全与锁优化 线程安全 java语言中的线程安全 1 不可变.Immutable 的对象一定是线程安全的 2 绝对线程安全 一个类要达到不管运行时环境如何,调用者都不需要额外的同步措施, ...

  8. MPI 学习

    一.编译MPI mpic++ test.cc -o test 二.启动MPI mpiexec -np 10 ./test 三.几个例子 第一个进程向第二个发一个数,第二个进程向第三个进程发送一个数.. ...

  9. ubuntu 添加应用到Dash启动器

    打开终端输入 $sudo vim /usr/share/applications/name.desktop name是你的程序标识名称 在打开的编辑器中添加以下内容,这里以配置NetBeans为例: ...

  10. Form元素与字体

    前言 以前写代码的时候总是喜欢在body元素中写字体属性,用以控制全局字体样式,后来发现表单元素中的字体样式并不能被控制,郁闷的不行. 解决方法 因为表单元素无法继承body的字体属性,所以要单独设置 ...