<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. CS231n课程笔记翻译3:线性分类笔记

    译者注:本文智能单元首发,译自斯坦福CS231n课程笔记Linear Classification Note,课程教师Andrej Karpathy授权翻译.本篇教程由杜客翻译完成,巩子嘉和堃堃进行校 ...

  2. 人生苦短之我用Python篇(XML模块)

    XML模块 http://baike.baidu.com/link?url=-mBgvMdEDU7F05Pw7h_hBt7A0ctYiPm5a_WvKVLknydnRXKRIyydcVZWRjd_5H ...

  3. PHP练习

    <?php function table($row,$col,$c){ $str= "<table border=1>"; for ($i=0; $i <$ ...

  4. “App Store加载失败,使已购页面再试一次”解决方案

    问题描述: 用A账户登陆App Store,下载了Xcode.还没有下载完就需要更换账户 更换账户 找到App Store界面上部的商店,选择注销,然后再登陆. 账户更换完毕,讲道理来说应该是可以下载 ...

  5. js之隔行换色

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  6. 类中的__slots__方法与__dict__方法相排斥

    类的 __slots__ 列表 作用: 限定一个类创建的实例只能有固定的属性(实例变量) 不允许对象添加列表以外的属性(实例变量) 防止用户因错写属性的名称而发生程序错误 说明: 1. __slots ...

  7. Sprint Boot 学习Q&A

    [ERROR] Failed to execute goal pl.project13.maven:git-commit-id-plugin:2.1.11:revision (default) on ...

  8. 判断IOS安装后是否是第一次启动

    if(![[NSUserDefaults standardUserDefaults] boolForKey:@"firstLaunch"]){ [[NSUserDefaults s ...

  9. 在iOS上实现二维码功能

    http://blog.csdn.net/abcmx/article/details/8011904 如今二维码随处可见,无论是实物商品还是各种礼券都少不了二维码的身影.而手机等移动设备又成为二维码的 ...

  10. linux 系统下配置java环境变量

    liunx桌面版本系统下载地址:http://www.ubuntukylin.com/downloads/ 1.源码包准备: 首先到官网下载jdk,http://www.oracle.com/tech ...