web前端开发:css3实现loading

有大量web前端开发工具及学习资料，可以搜群【 web前端学习部落22群 】进行下载，遇到学习问题也可以问群内专家以及课程老师哟

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>loading</title>

<style>

.container{width: 300px;height: 300px;position: relative;margin:50px auto;}

.circle{width: 100px;height: 100px;position: absolute;border-radius: 50%;}

#one{left: 0;top: 0;background:#f00;animation: move1 2s ease-in-out infinite;

-webkit-animation: move1 2s ease-in-out infinite;/*infinite动画无限播放*/

-moz-animation: move1 2s ease-in-out infinite;

-ms-animation: move1 2s ease-in-out infinite;

}

#two{right: 0;top: 0;background:#000;animation: move2 2s ease-in-out infinite;

-webkit-animation: move2 2s ease-in-out infinite;/*infinite动画无限播放*/

-moz-animation: move2 2s ease-in-out infinite;

-ms-animation: move2 2s ease-in-out infinite;

}

#three{left: 0;bottom: 0;background:blue;animation: move3 2s ease-in-out infinite;

-webkit-animation: move3 2s ease-in-out infinite;/*infinite动画无限播放*/

-moz-animation: move3 2s ease-in-out infinite;

-ms-animation: move3 2s ease-in-out infinite;

}

#four{right: 0;bottom: 0;background:yellow;animation: move4 2s ease-in-out infinite;

-webkit-animation: move4 2s ease-in-out infinite;/*infinite动画无限播放*/

-moz-animation: move4 2s ease-in-out infinite;           -ms-animation: move4 2s ease-in-out infinite;

}

/*动画*/

@keyframes move1{

0%{transform: translate(0,0)}

50%{transform: translate(200px,200px)}

100%{transform: translate(0,0)}

}

-webkit-@keyframes move1{

0%{transform: translateX(0) translateY(0)}

50%{transform: translateX(200px) translateY(200px)}

100%{transform: translateX(0) translateY(0)}

}

@keyframes move2{

0%{transform: translate(0,0)}

50%{transform: translate(-200px,200px)}

100%{transform: translate(0,0)}

}

-webkit-@keyframes move2{

0%{transform: translateX(0) translateY(0)}

50%{transform: translateX(-200px) translateY(200px)}

100%{transform: translateX(0) translateY(0)}

}

@keyframes move3{

0%{transform: translate(0,0)}

50%{transform: translate(200px,-200px)}

100%{transform: translate(0,0)}

}

-webkit-@keyframes move3{

0%{transform: translateX(0) translateY(0)}

50%{transform: translateX(200px) translateY(-200px)}

100%{transform: translateX(0) translateY(0)}

}

@keyframes move4{

0%{transform: translate(0,0)}

50%{transform: translate(-200px,-200px)}

100%{transform: translate(0,0)}

}

-webkit-@keyframes move4{

0%{transform: translateX(0) translateY(0)}

50%{transform: translateX(-200px) translateY(-200px)}

100%{transform: translateX(0) translateY(0)}

}

-o-@keyframes move4{

0%{transform: translateX(0) translateY(0)}

50%{transform: translateX(-200px) translateY(-200px)}

100%{transform: translateX(0) translateY(0)}

}

-ms-@keyframes move4{

0%{transform: translateX(0) translateY(0)}

50%{transform: translateX(-200px) translateY(-200px)}

100%{transform: translateX(0) translateY(0)}

}

</style>

</head>

<body>

<div class="container">

<div class="circle" id="one"></div>

<div class="circle" id="two"></div>

<div class="circle" id="three"></div>

<div class="circle" id="four"></div>

</div>

</body>

</html>

有大量web前端开发工具及学习资料，可以搜群【 web前端学习部落22群 】进行下载，遇到学习问题也可以问群内专家以及课程老师哟

web前端开发:css3实现loading的更多相关文章

  1. 1+x 证书 Web 前端开发 CSS3 专项练习

    官方QQ群 1+x 证书 Web 前端开发 CSS3 专项练习 http://blog.zh66.club/index.php/archives/196/

  2. 1+x证书Web前端开发CSS3详细教程

    web 前端开发之 CSS3 新特性 http://blog.zh66.club/index.php/archives/189/ web 前端开发之 html5 新特性 http://blog.zh6 ...

  3. 1+x 证书 web 前端开发初级对应课程分析

    响应国家号召 1+X 证书 Web 前端开发考试样题 官方QQ群 1+x 证书 web 前端开发初级对应课程分析 http://blog.zh66.club/index.php/archives/19 ...

  4. 响应国家号召 1+X 证书 Web 前端开发考试模拟题

    1+x证书Web前端开发初级理论考试样题2019 http://blog.zh66.club/index.php/archives/149/ 1+x证书Web前端开发初级实操考试样题2019 http ...

  5. Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十三】

    <Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  6. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  7. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十七】

    <Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  8. Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十二】

    <Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...

  9. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十】

    <Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

随机推荐

  1. webrtc公开课

    http://blog.csdn.net/yangzhenping/article/details/51152376 http://edu.csdn.net/huiyiCourse/live

  2. C和指针 第一章 字符串处理程序

    #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX_COL 20 #def ...

  3. Mongodb——GridFS

    GridFS用于存储和恢复那些超过16M(BSON文件限制)的文件. GridFS将文件分成大块,将每个大块存储为单独的文件.GridFS中限制chunk最大为256k.GridFS使用两个colle ...

  4. FineUI第十三天---`列布局

    这是经典的列布局:                  <x:Panel runat=                     <Items>                      ...

  5. String、StringBuffer、StringBuilder的不同使用场景

    String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程安全) 简要的说, String 类型和 StringBuffer 类型的主要性能 ...

  6. word20161129

    1. nested 英[nestɪd]美[nestɪd]adj. 嵌套的;v. 筑巢( nest的过去式和过去分词 );[例句]In the makeGrades method I use a cod ...

  7. PO、VO、DAO、BO、POJO

    一.PO :(persistant object ),持久对象 可以看成是与数据库中的表相映射的java对象.使用Hibernate来生成PO是不错的选择.二.VO :(value object) , ...

  8. [RouterOS] ROS对接碧海威或PA等流控实现完美流控详细教程（附脚本全免费）

    前言: 经常在群里看到不少朋友争论海蜘蛛 ROS 维盟 爱快 碧海威 流控大师 Woyos等等软路由,哪个好.实际上,网络产品是复杂的,现在的软路由功能上已经远远不是单独的路由了.每种产品都有他本身的 ...

  9. IOI2015 Boxes

    Description 给出一个环形,n个点,每次只能访问k个点,求最短距离. Sol 贪心. CCF的题解. 首先只会最多走一趟环形,根据抽屉原理,如果一边不足k个才会到另一边,所以对于第二次以上的 ...

  10. 17.4---返回max，不用if

    思路:借助max公式就可以了.max(x,y)=0.5*(x+y+|x-y|) 注意:1,结尾要加(int). 答案: max(x,y)=0.5*(x+y+|x-y|)