CSS3的loading制作,让页面加载时不再单调

页面的loading效果一直都是个比较重要的制作,往往一个好的加载效果可以有效的提升用户体验。而实际开发中,loading效果具体该如何制作?前端工程师又会有哪些特殊的技能呢?

本文主要内容

1、效果展示

2、主要涉及到的知识点

3、基本实现思路

4、案例实现

5、总结

1、效果展示

CSS3效果的制作不在于那些语句、命令,而是在于如何把语句组合到一起来实现实际效果。换句话说,CSS3效果只有想不到的,但是没有做不到的。下图就是一个开发中常用到的loading效果展示。

2、主要涉及到的知识点

此效果的实现并不是很难,只需要借助之前CSS3文章系列中讲解过的圆角、变形、动画,在配合上相应的位置定位即可实现,具体我们来分析下需要用到的知识点。

1)CSS3圆角

主要功能是为标签添加圆角样式,有如下的属性:

border-radius : none | percent;

none代表的是不设置圆角,percent表示可以使用百分数实现圆角的设置,如下:

border-radius: 50%;

2)CSS3变形

CSS3的变形主要是transform提供的几种方式,包含旋转、平移、扭曲、缩放等等。在本例中主要使用到的是旋转,用于实现圆环的变化效果。

其主要使用方式如下:

transform: rotate(30deg);

通过指定的角度参数对元素指定一个旋转,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。

3)CSS3动画

借助CSS3的animation来实现圆环的转动效果,配合关键帧keyframe,让圆环在不同的旋转时期发生不一样的变化。其主要使用方式如下:

animation: fadeOut 1s linear 0.2s infinite;

上述代码中,属性从左往右依次代表的是:动画的名称(由keyframe定义)、动画的时间、动画的速度曲线、动画的延迟时间、动画的播放次数(infinite表示无限循环)。

3、基本实现思路

利用两个div来实现左右各半的位置大小制作,然后借助圆角边框实现圆环样式的控制,让原来是方形的块变成圆形;之后控制不同方向上的边框颜色,调整最佳的视觉效果;最后利用CSS3的动画,实现圆环的转动,以及颜色的变化效果。

4、案例实现

基本的HTML结构如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>H5course</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">


    </style>
</head>
<body>
<div class="progress">
    <div class="wrapper right">
        <div class="circleProgress rightcircle"></div>
    </div>
    <div class="wrapper left">
        <div class="circleProgress leftcircle"></div>
    </div>
    <div class="loading">
        loading
        <em>.</em>
        <em>.</em>
        <em>.</em>
    </div>
</div>
</body>
</html>

相应的样式书写如下:

.progress {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 150px auto;
    line-height: 200px;
    text-align: center;
    font-size: 25px;
}
.wrapper {
    position: absolute;
    top: 0;
    overflow: hidden;
    width: 100px;
    height: 200px;
}
.right {
    right: 0;
}
.left {
    left: 0;
}
.circleProgress {
    position: absolute;
    top: 0;
    width: 160px;
    height: 160px;
    border: 20px solid rgb(232, 232, 12);
    border-radius: 50%;
    transform: rotate(45deg);
}
.rightcircle {
    right: 0;
    border-top: 20px solid green;
    border-right: 20px solid green;
    animation: right 5s linear infinite;
}
.leftcircle {
    left: 0;
    border-bottom: 20px solid green;
    border-left: 20px solid green;
    animation: left 5s linear infinite;
}
@keyframes right {   
    0% {
        border-top: 20px solid #ed1a1a;
        border-right: 20px solid #ed1a1a;
        -webkit-transform: rotate(45deg);
    }
    50% {
        border-top: 20px solid rgb(232, 232, 12);
        border-right: 20px solid rgb(232, 232, 12);
        border-left: 20px solid rgb(81, 197, 81);
        border-bottom: 20px solid rgb(81, 197, 81);
        transform: rotate(225deg);
    }
    100% {
        border-left: 20px solid green;
        transform: rotate(225deg);
    }
}
@keyframes left {
    0% {
        border-bottom: 20px solid #ed1a1a;
        border-left: 20px solid #ed1a1a;
        transform: rotate(45deg);
    }
    50% {
        border-top: 20px solid rgb(81, 197, 81);
        border-right: 20px solid rgb(81, 197, 81);
        border-bottom: 20px solid rgb(232, 232, 12);
        border-left: 20px solid rgb(232, 232, 12);
        transform: rotate(45deg);
    }
    100% {   
        border-top: 20px solid green;
        border-right: 20px solid green;
        border-bottom: 20px solid green;
        border-left: 20px solid green;
        transform: rotate(225deg);
    }
}
.loading em:nth-child(1) { 
    animation: fadeOut 1s linear 0.2s infinite; 
}
.loading em:nth-child(2) {
    animation: fadeOut 1s linear 0.6s infinite; 
}
.loading em:nth-child(3) {
    animation: fadeOut 1s linear 1s infinite;
}
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

如上,CSS3效果就已经搞定了~很简单的解决了loading的效果,同时适合在移动端中应用。

显示的效果:

5、总结

此效果采用的是两个div各占父级一半大小的布局方式,然后借助定位实现两个半圆的完美拼接,最后针对边框的不同方向,给予不同的颜色变化,配合上动画的效果,实现最终的圆环转动与相应的颜色变换。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-12-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

Flutte部件目录-布局

一个部件,将其子部件的体积缩小到可用空间的一部分。有关布局算法的更多详细信息,请参阅RenderFractionallySizedOverflowBox。

481
来自专栏Android常用基础

自定义View(一)-动画- XML生成View动画

感觉好久没有写博客了。首先因为最近比较忙,有在学习即时通讯相关的开源项目,好不容易忙完了。有点时间就抓紧写博客。之前学习的开源项目百篮应用已经获得360+sta...

671
来自专栏Coco的专栏

【Web动画】SVG 线条动画入门

1192
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线

1183
来自专栏HansBug's Lab

算法模板——左偏树(可并堆)

实现的功能——输入1 x,将x加入小根堆中;输入2,输出最小值并去在堆中除掉 实现原理——左偏树,这里面维护的是一个小根堆,个人认为其还是没有发挥出左偏树的真正...

3069
来自专栏HTML5学堂

CSS3圆角边框“完全解读”

HTML5学堂小编:圆形,一个很奇妙的形状,在各种地方都可以看得到,特别是现在各类网站,都会有各种的圆形。圆角的制作曾经困扰了开发者很久,以至于以前开发者只能使...

3185
来自专栏偏前端工程师的驿站

CSS魔法堂:你真的懂text-align吗?

前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗?...

1817
来自专栏程序员互动联盟

【答疑释惑第十六讲】屏幕上的图片是如何显示出来的?

疑惑一 什么是点阵字库? 点阵字库主要用于简单的嵌入式设备,字体大小一旦选定,就不能变化。比如以前老式手机上的字,一旦选定点阵字库就不能再变化。点阵字库是一个二...

2896
来自专栏web前端教室

20170108_先行者周日群视频课程——文字版

各位同学们大家好,又到周日了。因为1月1号是新年放假,所以今天也可以算是2017年的第一个周日,不知各位都对2017年有什么安排,而2016年又有哪些收获。我只...

1836
来自专栏练小习的专栏

如何让一个层位于iframe之上.flash之上

蓝色理想 goos 摘录一段CSS参考手册的话: z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释:元素...

1909

扫描关注云+社区