<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#box{

width: 400px;

height: 400px;

margin: 100px auto 0;

position: relative;

}

span{

position: absolute;

width: 16px;

height: 16px;

border-radius: 50%;

background: #fff;

-webkit-animation: a 1s infinite linear;

}

span:nth-child(1){

left: 0px;

-webkit-animation-delay: 0s;

}

span:nth-child(2){

left: 20px;

-webkit-animation-delay: 0.25s;

}

span:nth-child(3){

left: 40px;

-webkit-animation-delay: 0.5s;

}

span:nth-child(4){

left: 60px;

-webkit-animation-delay: 0.75s;

}

span:nth-child(5){

left: 80px;

-webkit-animation-delay: 1s;

}

@-webkit-keyframes a{

0%{-webkit-transform: translateY(0px); opacity: 0.5;}

50%{-webkit-transform: translateY(-30px); opacity: 1;}

100%{-webkit-transform: translateY(0px); opacity: 0.5;}

}

</style>

</head>

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

<div id="box">

<span></span>

<span></span>

<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. Jenkins自动构建VS的代码20150607

    1. 安装Jenkins Ø 双击安装即可,如果需要,可以配置环境变量(一般没设置) Ø 在浏览器中输入:http://localhost:8080/打开jekins,及完成jenkins安装 Ø 如 ...

  2. Thread之七：Object里的wait、notify、notifyAll的使用方法

    wait().notify().notifyAll()是三个定义在Object类里的方法,可以用来控制线程的状态 public final native void notify(); public f ...

  3. 你离BAT之间，只差这一套Java面试题

    最近,各大公司开始了春招,很多人已经开始在准备面试了,特地来总结下初中级程序员应该掌握的面试题目.这篇面试指南,只适用于初中级程序员,其中不涉及分布式等问题.关于中高级的程序员问题,我后面可能再出一篇 ...

  4. python 之头像上传，预览

    上传头像 我们需要实现的效果是:当我们点击默认头像,用户可以进行选择要上传的头像文件,其原理就是头像的img标签与文件input(file类型)框重合或者关联,可以通过如下两种方式进行实现: 方法一l ...

  5. Linux下安装nginx和php

    1. 安装nginx,传送门:http://www.cnblogs.com/emberd/p/4536238.html2. 下载php源码压缩包:php-5.6.1.tar.gz3. 解压后进入目录, ...

  6. 【ACM非算法部分】综合篇

    从零开始系列,也为了更好的补缺补漏. ===================== 目录: scanf()函数 STL汇总 读入优化 =====================

  7. ios 延迟调用 && UIImageView && UILabel && UISegmentedControl && UISwitch && UISlider

    // //  ViewController.m //  UI_Lesson3 // //  Created by archerzz on 15/8/13. //  Copyright (c) 2015 ...

  8. Jmeter简单的操作数据库

    mysql驱动包下载地址: https://dev.mysql.com/downloads/connector/j/ 1.添加驱动配置,把下载下来的驱动配置上去 2.添加‘配置元件-用户定义的变量’, ...

  9. SPOJ Favorite Dice（数学期望）

    BuggyD loves to carry his favorite die around. Perhaps you wonder why it's his favorite? Well, his d ...

  10. hiho 1515 : 分数调查 简单bfs

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi的学校总共有N名学生,编号1-N.学校刚刚进行了一场全校的古诗文水平测验. 学校没有公布测验的成绩,所以小Hi只能得 ...