css3 loading 效果1

 

代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{position: relative;margin: 100px;}
#box span{display: block;width: 9px;height: 5px;position: absolute;bottom: 0;background-color: #9b59b6;-webkit-animation:preloader 1.0s infinite ease-in-out;
}
#box span:nth-child(2){left: 11px;-webkit-animation-delay:0.2s;}
#box span:nth-child(3){left: 22px;-webkit-animation-delay:0.4s;}
#box span:nth-child(4){left: 33px;-webkit-animation-delay:0.6s;}
#box span:nth-child(5){left: 44px;-webkit-animation-delay:0.8s;}
@-webkit-keyframes preloader{0%{height: 5px;transform:translateY(0px);background-color: #9b59b6;}25%{height: 35px;transform:translateY(15px);background-color: #3498db;}50%{height: 5px;transform:translateY(0px);background-color: #9b59b6;}100%{height: 5px;transform:translateY(0px);background-color: #9b59b6;}
}
</style>
</head>
<body><div id="box"><span></span><span></span><span></span><span></span><span></span></div>
</body>
</html>

效果图:

转载于:https://www.cnblogs.com/baixc/p/4430311.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/459482.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算几何 - XOJ 1171 线段求交

问题 Description 线段求交即给定一组线段求出这些线段的相交情况&#xff0c;它是计算几何的基础问题之一,有着广泛的应用. Input第一行为一个正整数n表示线段的个数&#xff08;n<10000&#xff09;第二行到第n1行每行包括4个正整数x1,y1,x2,y2, (0 < x1,y1,x2,y2 <…

类成员函数解析

1、 构造函数&#xff1a; &#xff08;1&#xff09; 定义&#xff1a;是一个特殊的成员函数&#xff0c;名字与类名相同&#xff0c;创建类类型对象时&#xff0c;由编译器自动调用&#xff0c;在对象的生命周期内只且只调用一次&#xff0c;以保证每个数据成员都有一…

微信开发学习日记(六):weiphp框架

最近重点在看weiphp这个开源的第三方微信公众平台框架。在网上找微信资料&#xff0c;找到了这个。很早之前&#xff0c;就初步学习了Thinkphp和Onethink2个开源框架&#xff0c;当看到weiphp是用这2个框架开发的时候&#xff0c;我就更愿意去学习&#xff0c;毕竟学习成本很低…

SVN常用命令备注

1、将文件checkout到本地目录 svn checkout path&#xff08;path是服务器上的目录&#xff09; 例如&#xff1a;svn checkout svn://192.168.1.1/pro/domain 简写&#xff1a;svn co 2、往版本库中添加新的文件 svn add file 例如&#xff1a;svn add test.php(添加test.php)…

add-apt-repository cloud-archive:liberty

apt-get update && apt-get upgrade; v

日期类Date

#include <iostream>using namespace std;//日期是否合法//日期比较//两个日期中间差的天数//日期加上或减去一定的天数后的日期class Date{friend ostream& operator<<(ostream& _cout, const Date& d);friend istream& operator>>(istream…

Linux下编译安装Apache httpd 2.4

Apache是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上&#xff0c;由于其跨平台和安全性被广泛使用&#xff0c;是最流行的Web服务器端软件之一。当前Apache版本为2.4&#xff0c;本文主要描述基于CentOS 6.5以源码方式安装Apache httpd。 一…

选取硬币问题

有1元&#xff0c;5元&#xff0c;10元&#xff0c;50元&#xff0c;100元&#xff0c;500元的硬币各c0,c1,c2,c3,c4, c5枚 现在要使用这些硬币支付n元&#xff0c;问最少需要多少枚硬币&#xff0c;假设至少存在一种方案。 应该尽可能使用500元的&#xff0c;然后再使用100元的…

SAP OBYC自动记账的实例说明 +VALUE STRING

对Value String定义&#xff1a;定义了一系列的步骤优先顺序&#xff0c;每一个步骤都连接到不同的过账事务码&#xff0c;而这个顺序本身就称作价值串。价值串你可以看作是一种记账的规则&#xff0c;为物料移动或者发票校验包含了一系列的科目分配特征。并且物料移动的科目确…

C++ 继承解析

继承 1、概念&#xff1a; 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加功能。这样产生新的类&#xff0c;称派生类。继承呈现了面向对象程序设计的层次结构&#xff0c;体…

javascript window.open

翻译原文&#xff1a;open methodOpens a new window and loads the document specified by a given URL.Navigates the app window to the specified location.Syntaxvar retval window.open(url, name, features, replace);Parametersurl [in, optional] Type: String …

[傅里叶变换及其应用学习笔记] 九. 继续卷积的讨论

这份是本人的学习笔记&#xff0c;课程为网易公开课上的斯坦福大学公开课&#xff1a;傅里叶变换及其应用。 卷积在滤波中的应用 浑浊度&#xff08;Turbidity&#xff09;研究是关于测量水的清澈度的研究。大致方法是把光传感器放置到深水区域&#xff0c;然后测量光线的昏暗程…

C++多态相关关问题及虚表剖析

关于C多态的问题&#xff1a;&#xff08;基于Visual Studio 2012编译器&#xff09; 一、多态引入 1、对象的类型&#xff1a; &#xff08;1&#xff09; 静态的类型&#xff1a;对象声明时的类型&#xff0c;在编译的时候确定 &#xff08;2&#xff09; 动态的类型&…

C++调用约定

<div class"markdown_views"><p>有一定C开发经验的人一定对”__cdecl、__stdcall、__fastcall”肯定不陌生吧&#xff01;但你真正理解了吗&#xff1f;是的&#xff0c;我曾在这采了无数个坑&#xff0c;栽了无数个跟头&#xff0c;终于忍无可忍要把它总…

CSS中的特殊的选择器

/*表示div盒子中的P标签*/ div P{} /*表示div盒子中除第一个P之外的都要添加样式*/ div pp{} /*表示div盒子中从第三个p开始都要添加样式*/转载于:https://www.cnblogs.com/Dream-Seeker/p/4454325.html

添加文字和水印

1.加文字-(UIImage *)addText:(UIImage *)img text:(NSString *)text1{//get image width and heightint w img.size.width;int h img.size.height;CGColorSpaceRef colorSpace CGColorSpaceCreateDeviceRGB();//create a graphic context with CGBitmapContextCreateCGCont…

C++动态绑定及返回类型协变

C多态之动态绑定&#xff1a; 1、概念&#xff1a;在程序执行期间(非编译期)判断所引用对象的实际类型&#xff0c;根据其实际类型调用相应的方法。 使用virtual关键字修饰类的成员函数时&#xff0c;指明该函数为虚函数&#xff0c;派生类需要重新实现&#xff0c;编译器将实…

使用ucontext组件实现的coroutine代码分析

coroutine一般翻译过来就是协程&#xff0c;类似于线程可以切换&#xff0c;而跟线程是由操作系统调度器来实现切换不一样&#xff0c;协程由用户程序自己调度进行切换。我以前也看过协程相关的内容&#xff0c;但没有自己去实现过。最近搞OpenStack&#xff0c;OpenStack各个模…

C++模板剖析:函数模板、类模板解析

C中关于模板&泛型编程问题&#xff1a; 问题引入&#xff1a;何编写一个通用加法函数&#xff1f; &#xff08;1&#xff09;使用函数重载&#xff0c;针对每个所需相同行为的不同类型重新实现它 int Add(const int &_iLeft, const int&_iRight) { return (_iL…