<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. three.js入门——先跑个旋转的正方体

    WebGl中文网看了几篇教程,又百度了几篇文章,顿时感觉手痒,打开编辑器,写个demo玩玩. demo是写在vue项目中的,所以首先: npm install three --save; npm in ...

  2. Jenkins简单的使用

    1.每个版本开发提单子,写清楚发布那个项目.配置文件.所执行SQL语句等:QA开始部署测试环境 2.如下时发布项目 一.版本发布 登陆系统,选择对应的项目(以api-gateway为例,如果找不到对应 ...

  3. Java面试题收集以及参考答案（100道）

    不积跬步无以至千里,这里会不断收集和更新Java基础相关的面试题,目前已收集100题. 1.什么是B/S架构?什么是C/S架构 B/S(Browser/Server),浏览器/服务器程序 C/S(Cl ...

  4. boost::function和boost:bind取代虚函数

    以boost::function和boost:bind取代虚函数 这是一篇比较情绪化的blog,中心思想是"继承就像一条贼船,上去就下不来了",而借助boost::function ...

  5. css工具类封装

    温馨提示:一下css封装,建议按需使用,否则会造成很大的代码冗余,且很多样式会造成不符合预期的效果,建议合理使用 <a href="https://meyerweb.com/eric/ ...

  6. java 输入输出流 关于InputStream 和 OutputSteam 实现文本一行一行读入和 文本一行一行输出

    对  byte 有了新的认知:byte表示一个字节 因此他可以表示成 一个 数字: 一个数字可以映射成一个字符:InputStream 中的 read() 函数  的意思是读入一个整数,读入一个整数的 ...

  7. NFS,两台linux设置网络共享文件系统

    NFS,MOUNT,UMOUNT 简介 NFS是Network File System的简写,网络文件系统.通过使用NFS,用户和程序可以像访问本地文件一样访问远端系统上的文件,根据权限的控制可以对N ...

  8. IIS项目发布完整流程

    第一步: 发布项目 使在IIS上发布是防止源码泄露 第二步: 打开IIS(如果没有就自己安装一个)打开IIS步骤 控制面板>系统安全>管理工具>IIS管理器 填写网站的名称和之前发布 ...

  9. 《DSP using MATLAB》示例Example7.3

    由图上可以看出,与幅度谱对应的相位谱是分段线性函数,而与振幅谱对应的相位谱是真正线性函数. 幅度谱和振幅谱的区别也很明显.

  10. vb编写串口调试程序

    sub是子模块,可以调用但是没有返回值,function是有返回值的. public sub 可以在其它form里调用,而private sub 只能在当前form里调用. vb里的if else , ...