<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.quan{

position: relative;

border: 4px solid rgba(255,255,255,.25);

width: 80px;

height: 80px;

border-radius: 50%;

-webkit-animation: a 1s infinite linear;

}

span{

position: absolute;

width: 80px;

height: 80px;

border: 4px solid transparent;

border-top: 4px solid #fff;

top: -4px;

left: -4px;

border-radius: 50%;

}

@-webkit-keyframes a{

0%{-webkit-transform: rotate(0deg);}

100%{-webkit-transform: rotate(360deg);}

}

</style>

</head>

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

<div class="quan">

<span id=""></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. RMI垃圾收集简介

    和单机系统类似, 分布式系统也需要自动清除不再有客户端引用的对象(remote object). 远程对象的自动垃圾回收机制, 将程序员从深坑中解放出来, 不再需要人工跟踪client所引用的对象了. ...

  2. topcoder WCNMLGB

    点开题->断开连接->再也上不去->我玩NM

  3. key相同合并Map

    public class Demo11 { public static void main(String[] args) { ConcurrentHashMap<Integer, Map< ...

  4. iOS通讯录相关知识-浅析

    本文来自于:贞娃儿的博客  http://blog.sina.com.cn/zhenwawaer  在开发一些应用中,我们如果需要iPhone设备中的通讯录信息.或者,需要开发通讯录相关的一些功能.那 ...

  5. Django的CBV

    CBV CBV(class base views) 就是在视图里使用类处理请求. Python是一个面向对象的编程语言,如果只用函数来开发,有很多面向对象的优点就错失了(继承.封装.多态).所以Dja ...

  6. I.MX6 修改调试串口号（ttymx0 -> ttymxc2)

    I.MX6 修改调试串口号(ttymx0 -> ttymxc2) 一.参考文章: uboot修改默认调试串口ttymxc0 ->ttymxc4(imx53) http://www.xueb ...

  7. Ubuntu 12.04.1 OK335xS busybox-1.24.1 文件系统编译错误及解决方案

    Ubuntu OK335xS busybox- 文件系统编译错误及解决方案 一.参考文档: 编译busybox的一些错误: http://blog.csdn.net/hshl1214/article/ ...

  8. 【剑指offer】找出数组中任意重复的数字（不修改数组），C++实现

    原创博文,转载请注明出处! # 题目 在一个长度为n+1的数组里的所有数字都在1~n的范围内,所以数组中至少有一个数字是重复的.请找出数组中任意一个重复的数字,但不能修改输入的数组.例如,如果输入长度 ...

  9. 【排序】插入排序，C++实现

    # 基本思想 每一步将一个待排序的记录,插入到前面已经排好序的有序序列中去,直到插完所有元素为止. # C++代码 #include<iostream> #include<vecto ...

  10. 为什么委托的减法（- 或 -=）可能出现非预期的结果？（Delegate Subtraction Has Unpredictable Result）

    当我们为一个委托写 -= 的时候,ReSharper 会提示“Delegate Subtraction Has Unpredictable Result”,即“委托的减法可能出现非预期的结果”.然而在 ...