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. 牡丹江.2014B(图论，树的直径）

    B - Building Fire Stations Time Limit:5000MS     Memory Limit:131072KB     64bit IO Format:%lld & ...

  2. 创业15条经验总结：温饱之后，创业公司CEO如何树“三观”？

    都说创业改变命运,事实上不是,创业,时时刻刻,可能连“命”都保不住!创业公司最重要的只有“活下去”.满足了这个.才有资格谈其他.公司连饭都开不了,还谈什么其他?创业公司如果连生存问题都解决不了,高位的 ...

  3. 如何编写可维护的面向对象JavaScript代码

    能够写出可维护的面向对象JavaScript代 码不仅可以节约金钱,还能让你很受欢迎.不信?有可能你自己或者其他什么人有一天会回来重用你的代码.如果能尽量让这个经历不那么痛苦,就可以节省不少时 间.地 ...

  4. xcode 插件

    http://www.cocoachina.com/ios/20160122/15080.html https://github.com/rickytan/RTImageAssets http://m ...

  5. ReactiveCocoa源码拆分解析(一)

    (整个关于ReactiveCocoa的工程可以在https://github.com/qianhongqiang/QHQReactive下载) ReactiveCocoa的介绍我就不说了,可以自行百度 ...

  6. css3延时动画

    不太理解属性都是什么意思,但是有动画效果,我也是惊呆了 <style> #animated_div{animation:animated_div 4s 1; -moz-animation: ...

  7. Pcserver+oracle10g+rac

    成本的相对廉价,技术的成熟,功能的强大此方案将越来越受中小企业的青睐.     一.实验前准备 虚拟机版本:Vwareserver1.0.6 Linux版本:redhat5.5enterprise服务 ...

  8. Button圆角处理

    <?xml version="1.0" encoding="UTF-8"?> <selector xmlns:android="ht ...

  9. 寻找下一款Prisma APP：深度学习在图像处理中的应用探讨（阅读小结）

    原文链接:https://yq.aliyun.com/articles/61941?spm=5176.100239.bloglist.64.UPL8ec 某会议中的一篇演讲,主要讲述深度学习在图像领域 ...

  10. 'ModelOptions' object has no attribute 'get_field_names

    peewee安装时随意了点.装了2.8.0的. 倒回到2.6.0就好了. sudo pip uninstall peewee sudo pip install peewee==2.6.0