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. Word有用的快捷键

      1.shift+上下左右,可以用键盘从当前光标位置选择文本.可以配合各种其他导航键,比如ctrl+上下左右,Home, End, PageUp/Down. 2.选择文本后,按F2,光标会自动变成虚 ...

  2. ActionBar使用

    在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果. 一.添加A ...

  3. HNU 12869 Sequence（循环节）

    题目链接:http://acm.hnu.cn/online/?action=problem&type=show&id=12869 解题报告:看到n的范围这么大,一看就是找规律,把前30 ...

  4. iOS开发——UI进阶篇（十八）核心动画小例子，转盘（裁剪图片、自定义按钮、旋转）图片折叠、音量震动条、倒影、粒子效果

    一.转盘(裁剪图片.自定义按钮.旋转) 1.裁剪图片 将一张大图片裁剪为多张 // CGImageCreateWithImageInRect:用来裁剪图片 // image:需要裁剪的图片 // re ...

  5. iOS开发——UI基础-按钮内边距，图片拉伸

    一.内边距 UIButton有三个属性,分别可以设置按钮以及内部子控件的内边距 1.contentEdgeInsets 如果是设置contentEdgeInsets, 会把UIImageView和UI ...

  6. php preg_match($p, $str, $match)方法简介

    方法作用:匹配指定的正则表达式并将结果放在$match数组中 代码示例: $p = '/name:([\\ws]+)/'; $str = "name:steven jobs"; p ...

  7. c++写入txt文件

    简单方式: #include "stdafx.h" #include <iostream> #include <iomanip> #include < ...

  8. oracle数据库高级应用之《触发器的建立》

    (一)oracle数据库触发器的建立 eg1 CREATE OR REPLACE TRIGGER TRIGGER_ON_TD_DEPARTMENT AFTER INSERT OR UPDATE OR ...

  9. liunux mysql MySQL表名不区分大小写的设置方法

    原来Linux下的MySQL默认是区分表名大小写的,通过如下设置,可以让MySQL不区分表名大小写:1.用root登录,修改 /etc/my.cnf:2.在[mysqld]节点下,加入一行: lowe ...

  10. NGUI 滑动页(UIToggle和UIToggledObjects)

    1.NGUI->Create->Scroll View 2.给Scroll View添加一个 UIGrid,自己设置Arragement(横向竖向) 3.给Grid添加元素 4.给元素添加 ...