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

相关文章

来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2517
来自专栏魂祭心

原 canvas绘制clock

4024
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2112
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5267
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6618
来自专栏码匠的流水账

聊聊NettyConnector的start及shutdown

reactor-netty-0.7.6.RELEASE-sources.jar!/reactor/ipc/netty/NettyConnector.java

841
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

30810
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2667
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5286
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2000

扫码关注云+社区