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

相关文章

来自专栏练小习的专栏

比例字体&等宽字体

我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional ...

3486
来自专栏IMWeb前端团队

网格系统 CSS Grid Layout

听闻w3cplus大漠在第三届CSS Conf上的演讲主题是CSS Grid Layout,吓得我赶紧抛下红尘俗事闭门谢客苦心钻研,唯恐脚步太慢,遥望大漠一骑绝...

1908
来自专栏知识分享

3-关于"小五物联"的功能介绍(添加波形图,Achartengine)

1623
来自专栏前端学习心得

如何实现CSS布局

1439
来自专栏彭湖湾的编程世界

【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: ? 也可能是多行的: ? ...

2038
来自专栏前端儿

细说移动端 经典的REM布局 与 新秀VW布局

说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等...

1012
来自专栏coding for love

CSS进阶12-网格布局 Grid Layout

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

682
来自专栏守候书阁

CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三...

864
来自专栏互联网杂技

深入理解视觉格式化模型

“理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免...

3419
来自专栏不会写文章的程序员不是好厨师

全栈第一步-CSS基础前言CSS基础总结

作为一名后端狗,也有一个全栈梦。前端工程师第一步,CSS的基础得打好。本文仅用于记录上周学习CSS的过程,文中对于CSS知识点可能存在理解错误之处。

732

扫码关注云+社区