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. maven 工程启动找不到 Spring ContextLoaderListener 的解决办法

    1.错误:  Error configuring application listener of class org.springframework.web.context.ContextLoader ...

  2. Java网络编程学习

    服务器是指提供信息的计算机或程序,客户机是指请求信息的计算机或程序,而网络用于连接服务器与客户机,实现两者相互通信.但有时在某个网络中很难将服务器与客户机区分开.我们通常所说的“局域网”(Local ...

  3. HDU 5384 字典树、AC自动机

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5384 用字典树.AC自动机两种做法都可以做 #include<stdio.h> #includ ...

  4. oracle 行列转换的运用

    问题: 员工表: A(E_ID,NAME,) 部门表:  B(D_ID,D_NAME) 员工与部门关系:C(ID,E_ID,D_ID) SELECT  A.E_ID,A.NAME ,B.D_NAME ...

  5. iOS开发——UI进阶篇（十三）UITabBarController简单使用，qq主流框架

    一.UITabBarController简单使用 // 程序加载完毕 - (BOOL)application:(UIApplication *)application didFinishLaunchi ...

  6. C++ stringstream

    C++ 引入了ostringstream.istringstream.stringstream这三个类,这三个类包含在sstream.h头文件中.三个类中 1)istringstream类用于执行C+ ...

  7. word20161130

    1. even 偶数 [ǒu shù][词典] even; [数] even number;[例句]在本例中,slot A中有奇数个阵列,slot B中有偶数个阵列.In this example, ...

  8. 一起入门python5之for循环

    昨天中午本来写了的,结果手贱了一下ctrl+x以后又去复制了别的东西.结果所有写的都没有了.蛋疼.继续写吧.今天来说for循环即条件判断>>> age = 20        #首先 ...

  9. Kali Linux渗透基础知识整理（四）：维持访问

    Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...

  10. SNMP报文抓取与分析(一)

    SNMP报文抓取与分析(一) 1.抓取SNMP报文 SNMP报文的形式大致如下图所示 我们这里使用netcat这个工具来抓取snmp的PDU(协议数据单元).(因为我们并不需要前面的IP和UDP首部) ...