<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. D. Closest Equals(线段树)

    题目链接: D. Closest Equals time limit per test 3 seconds memory limit per test 256 megabytes input stan ...

  2. android 获取 图片或视频略缩图

    /** * 根据指定的图像路径和大小来获取缩略图 此方法有两点好处: 1. * 使用较小的内存空间,第一次获取的bitmap实际上为null,只是为了读取宽度和高度, * 第二次读取的bitmap是根 ...

  3. 细说C语言的优先级和结合性

    Table0. 为什么要掌握优先级1. 优先级1.1 优先级图表1.2 运算符实例1.3 优先级顺口溜2. 结合性3. 参考资料 写代码的时候,常会翻看的一个表就是“c语言运算符优先级表”.c的运算符 ...

  4. crt,excrt学习总结

    \(crt,Chinese\ Remainder\ Theorem\) 概述 前置技能:同余基础性质,\(exgcd\). \(crt\),中国剩余定理.用于解决模数互质的线性同余方程组.大概长这样: ...

  5. Roslyn 的确定性构建

    注意到每次编译完之后,你的 dll 或者 exe 是不一样的吗?本来这并没有什么大不了的,但大家都知道数字和鹅厂的安全软件遍布在我们大(tiān)陆(cháo)地区的大量电脑上,它们的查杀策略是——凡 ...

  6. MD5加盐加密

    package com.chauvet.utils; import java.security.NoSuchAlgorithmException; import java.util.Random; / ...

  7. Xcode ARC需要什么版本的环境支持

    Mac OS X v10.6 和 v10.7 (64位应用) 的Xcode 4.2以上版本支持ARC,iOS 4 和 iOS 5 下ARC都能工作,但Weak不支持Mac OS X v10.6 和 i ...

  8. CSS基本样式简单介绍

    具体详情内容请查阅<css参考手册> 一.基本结构样式 width 宽度 height 高度 background 背景 border 边框 padding 内边距 margin 外边距 ...

  9. OpenCL入门

    初入OpenCL,做个记录. 在Windows下开发OpenCL程序,必须先下载OpenCL的SDK,现在AMD,NVIDIA,Intel均提供各自的OpenCL库,基本是大同小异.安装好SDK后新建 ...

  10. for, while的用法

    for循环求1+2+3+4+....+100 # include <stdio.h> int main(void) { int i; //循环中更新的变量i不能定义成浮点型 ; ; i&l ...