Libx

20个loading小动画|不定时更新

字数统计: 1,006阅读时长: 5 min
2017/03/26 Share

20个loading动画

以下20个动画均来自codepen,原文:http://www.hongkiat.com/blog/free-animated-loaders/感觉比较有意思,准备一个一个的的实现一遍


持续更新:

1: CSS loader,基本实现出来是这样的:

这个应该来说是比较简单的,首先Markup

<!DOCTYPE html>
<html>
<head>
<title>加载效果</title>
<link rel="stylesheet" type="text/css" href="practice8.css">
</head>
<body>
<div class="loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</body>
</html>

对页面进行基本的布局:主要是一些基本的居中。
.loader{
position: absolute;
top: 100px;
margin-left: 50%;
transform:translateX(-50%);
}
.dot{
margin: 10px;
width:24px;
height:24px;
background: #521;
border-radius: 100%;//画圆
display: inline-block;
animation: slide 1s infinite;
}
现在已经可以看到几个点已经出现在了网页上,现在来写一下动画:/*原作者使用的css预处理stylus,而我还没有用用过,所以用纯CSS来实现。
.dot:nth-child(1){
-webkit-animation-delay:100ms;
animation-delay:100ms;
}
.dot:nth-child(2){
-webkit-animation-delay:200ms;
animation-delay:200ms;
}
.dot:nth-child(3){
-webkit-animation-delay:300ms;
animation-delay:300ms;
}
.dot:nth-child(4){
-webkit-animation-delay:400ms;
animation-delay:400ms;
}
.dot:nth-child(5){
-webkit-animation-delay:500ms;
animation-delay:500ms;
}/*这样单个处理是比较麻烦的,使用stylus或者用JS会更好*/
@keyframes slide{
0%{
transform: scale(1);
}
50%{
transform: scale(2);
background: #606;
opacity: 0.5;
}
100%{
transform: scale(1);
}
}
而在stylus中对各个点的选择更加简洁:
for n in (1..5)
.dot:nth-child({n})
animation-delay (.1s * n)
background red(#3ac, (50 * n))

//不禁要感慨预处理的强大,用纯css实现需要60多行的代码,只用了30多行,,,真是66666

好了,第一个效果就做好了~

//未完待续



分割线:继续更新2017/3/26/20.55

晚上闲着没事便去实现了第二个效果:

 

Code Loader in css 原创作者:@depy

来分析一下我们所要实现的效果:内容主要就是两个大括号加上三个点,所以这里用不上图片,只需要用文字然后将其大小调整较大即可。动画是三个点各自在做有规律的运动,只需设置几个关键帧然后循环即可。我们准备把括号和三个点放在一个div里 然后对大括号和点分别设置合适的类,利用点位将其放到合适位置,且主题内容均是居中,好了胸有成竹,我们开始。

还是熟悉的流程,首先Markup:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="9.css">
</head>
<body>
<section class='loader'>
<div class='loader-center'>
<div class='chars'>
<span class='char brace'>{</span>
<span class='dots'>
<span class='char dot _dot-1'>.</span>
<span class='char dot _dot-2'>.</span>
<span class='char dot _dot-3'>.</span>
</span>
<span class='char brace'>}</span>
</div>
</div>
</body>
</html>

对页面进行基本的布局:
section.loader {
font-family: Consolas, monaco, monospace;
position:absolute;
background-color:#232427;
color:#FF893A;
width:300px;
height:100px;
line-height:100px;
text-align:center;
font-size:40px;
letter-spacing:-6px;
top:50%; left:50%;
margin-left:-150px; margin-top:-50px;
}
section.loader .chars .dots .char {
font-size:150%;
display:inline-block;
}
基本的布局已经完成了,主体居中,大括号和三个点已经居中放到了合适的位置只是还没有动画,现在我们就为这三个点分别设置动画
.dot._dot-1 {
animation:dot_1 1s ease-in-out infinite;
animation-fill-mode: backwards;
animation-direction: alternate;
}
.dot._dot-2 {
animation:dot_2 2s ease-in-out infinite;
animation-fill-mode: backwards;
animation-direction: alternate;
animation-delay:1s;
}
.dot._dot-3 {
animation:dot_3 1.5s ease-in-out infinite;
animation-fill-mode: backwards;
animation-direction: alternate;
animation-delay:0.5s;
}
将三个点的动画设置不同的运动持续时间和延迟时间,使得动画整体看上去不是很有规律,增大整体的周期时间。

动画已经基本设置完,现在对三个点分别设置几个关键帧
@keyframes dot_1 {
0% {
top:0;
left:0;
}
50% {
top:30px;
left:20px;
}
100% {
top:0px;
left:40px;
}
}
@keyframes dot_2 {
0% {
top:0;
left:0;
}
50% {
top:-30px;
left:20px;
}
100% {
top:0px;
left:40px;
}
}
@keyframes dot_3 {
0% {
top:0;
left:0;
}
50% {
top:-30px;
left:-40px;
}
100% {
top:0px;
left:-80px;
}
}

圆点的位置也是通过定位来实现~

现在这个效果就已经完美的实现啦~ ^-^ 不写了,看电影去啦~

未完待续

CATALOG
  1. 1. 20个loading动画