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 条评论
登录 后参与评论

相关文章

来自专栏Modeng的专栏

Canvas学习系列二:Canvas的坐标系统

版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_321352...

1181
来自专栏yang0range

CSS常见属性

现在的互联网前端三层: HTML 超文本标记语言 从语义的角度描述页面结构。 CSS 层叠式样式表 从审美的角度负责页面样式。 JS ...

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

CSS魔法堂:重拾Border之——不仅仅是圆角

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

2125
来自专栏前端知识分享

第93天:CSS3 中边框详解

其中边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握。

914
来自专栏河湾欢儿的专栏

响应式布局rem布局

第一步:从UI设计师拿到设计稿(psd) 640*1136 第二部:在样式中给HTML一个fontSize值,我们一般都给一个比较好算的值,比如:10px 1...

1871
来自专栏小芭乐的专栏

markdown编辑器书写格式说明

GFM 是 Github 拓展的基于 Markdown 的一种纯文本的书写格式。

3390
来自专栏郭耀华‘s Blog

Android——界面特效 相关知识总结贴

帮助android UI实现动画特效 http://www.apkbus.com/android-79595-1-1.html 帮助android应用程序实现动...

3139
来自专栏程序员阿凯

为 DP 设计布局

1215
来自专栏IMWeb前端团队

animation动画实践

由于业务关系,有幸参与腾讯课堂app下载页面制作,原则上ie8、9可表现为静态版本,而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下,以供知...

2140
来自专栏一“技”之长

iOS9新特性——堆叠视图UIStackView

        随着autolayout的推广开来,更多的app开始使用自动布局的方式来构建自己的UI系统,autolayout配合storyBoard和一些第...

591

扫码关注云+社区