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. Android 实现简单音乐播放器（二）

    在Android 实现简单音乐播放器(一)中,我介绍了MusicPlayer的页面设计. 现在,我简单总结一些功能实现过程中的要点和有趣的细节,结合MainActivity.java代码进行说明(写出 ...

  2. CF570D——Tree Requests

    1.题目大意:给你一棵树,每个点有一个字符,然后我们定义1的深度是1,然后1的儿子深度是2... 然后有一个询问,询问以i为根节点的子树,然后深度是k的那层的所有字符,可否组成一个回文串 2.分析:首 ...

  3. Android学习笔记（二）——探究一个活动

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 活动(Activity)是最容易吸引到用户的地方了,它是一种可以包含用户界面的组件,主要用于和用户进行交互.一 ...

  4. MVPHelper

    在MVP的使用过程中,我们需要反复的去写各种MVP的接口和实现类, 实在是 太麻烦了!!所以抽时间撸了一款插件(只可用于Intellj IDEA 和 Android Studio),用于生成MVP接口 ...

  5. Hello 2016

    Hello 2016 I am really happy to work and study here. Nothing is better than be oneself ! It's import ...

  6. 如何给zencart安装image handler插件？

    以下内容均为个人的工作总结,有错误的理解都很正常,所以提醒您,可以参考,但是由此造成的一切后果,本人概不负责. 1 去zencart官网下载一个插件包(注意版本是否匹配相应的zencart版本,我的是 ...

  7. apache2错误日志在哪，可以看到php错误

    在以下路径中 /var/log/apache2/error.log

  8. openstacksdk enable logging

    http://git.openstack.org/cgit/openstack/python-openstacksdk/tree/doc/source/users/guides/logging.rst

  9. JS添加删除DIV

    function addDiv(w,h){     //如果原来有“divCell”这个图层,先删除这个图层    deleteDiv();    //创建一个div       var my = d ...

  10. jq获取元素

    <tr><td><div id="add"></div></td></tr>$("#add&quo ...