<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#box{

position: relative;

}

span{

position: absolute;

width: 30px;

height: 30px;

background: white;

border-radius: 50%;

}

span:nth-child(1){

-webkit-animation: a 1.5s infinite linear;

}

span:nth-child(2){

-webkit-animation: b 1.5s infinite linear;

}

@-webkit-keyframes a{

0%{-webkit-transform: translateX(0px); opacity: 1;}

50%{-webkit-transform: translateX(80px); opacity: 0.5;}

100%{-webkit-transform: translateX(0px); opacity: 1;}

}

@-webkit-keyframes b{

0%{-webkit-transform: translateX(80px); opacity: 1;}

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

100%{-webkit-transform: translateX(80px); opacity: 1;}

}

</style>

</head>

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

<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. 《Effective Java》读书笔记（一）之创建和销毁对象

    最近在研读<Effective Java>一书,读书不做点笔记,感觉很容易就忘掉,于是用本篇博客来记录阅读此书的笔记. 郑重声明: 由于是<Effective Java>一书的 ...

  2. python常用模块之random模块

    python常用模块之random模块 在程序中很多会用到随机字符,比如登陆网站的随机验证码,通过random模块可以很容易生成随机字符串 1.random.randrange():返回1-10之间的 ...

  3. 7.翻转句子中单词的顺序[ReverseWordOrderInSentence]

    [题目] 输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变.句子中单词以空格符隔开.为简单起见,标点符号和普通字母一样处理. 例如输入“I am a student.”,则输出“stud ...

  4. C程序fork进程导致PHP执行不退出

    /********************************************************************* * C程序fork进程导致PHP执行不退出 * 说明: * ...

  5. base64 和 Blob 相互转换

    Base64 to Blob function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/ ...

  6. 数据库备份mysqldump

    |--好友说:有些知识就是石头,走上这条路就没法绕过,就是牙齿啃碎了也要把它啃下来. ------------------------------------------ 针对当前备份做一个总结记忆: ...

  7. Ubuntu中apt-get安装或更新软件错误的解决办法

    $su #apt-get clean #cd /var/lib/apt #mv lists lists.back #mkdir -p lists/partial #apt-get clean #apt ...

  8. CSS Div固定在网页顶部、底部、左侧、右侧

    Div固定在网页顶部 .header { width:100%; height:80px; background-color:#FAFAFA; position:fixed; top:; left:; ...

  9. mongodb查询(转载)

    1.  基本查询:    构造查询数据.    > db.test.findOne()    {         "_id" : ObjectId("4fd58ec ...

  10. Servlet传统配置方式和Servlet3.0使用注解的方式

    一.Servlet的传统配置方式 在JavaWeb开发中, 每次编写一个Servlet都需要在web.xml文件中进行配置,如下所示: <servlet> <servlet-name ...