页面的loading效果一直都是个比较重要的制作,往往一个好的加载效果可以有效的提升用户体验。而实际开发中,loading效果具体该如何制作?前端工程师又会有哪些特殊的技能呢?
CSS3效果的制作不在于那些语句、命令,而是在于如何把语句组合到一起来实现实际效果。换句话说,CSS3效果只有想不到的,但是没有做不到的。下图就是一个开发中常用到的loading效果展示。
此效果的实现并不是很难,只需要借助之前CSS3文章系列中讲解过的圆角、变形、动画,在配合上相应的位置定位即可实现,具体我们来分析下需要用到的知识点。
主要功能是为标签添加圆角样式,有如下的属性:
border-radius : none | percent;
none代表的是不设置圆角,percent表示可以使用百分数实现圆角的设置,如下:
border-radius: 50%;
CSS3的变形主要是transform提供的几种方式,包含旋转、平移、扭曲、缩放等等。在本例中主要使用到的是旋转,用于实现圆环的变化效果。
其主要使用方式如下:
transform: rotate(30deg);
通过指定的角度参数对元素指定一个旋转,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。
借助CSS3的animation来实现圆环的转动效果,配合关键帧keyframe,让圆环在不同的旋转时期发生不一样的变化。其主要使用方式如下:
animation: fadeOut 1s linear 0.2s infinite;
上述代码中,属性从左往右依次代表的是:动画的名称(由keyframe定义)、动画的时间、动画的速度曲线、动画的延迟时间、动画的播放次数(infinite表示无限循环)。
利用两个div来实现左右各半的位置大小制作,然后借助圆角边框实现圆环样式的控制,让原来是方形的块变成圆形;之后控制不同方向上的边框颜色,调整最佳的视觉效果;最后利用CSS3的动画,实现圆环的转动,以及颜色的变化效果。
基本的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的效果,同时适合在移动端中应用。
显示的效果:
此效果采用的是两个div各占父级一半大小的布局方式,然后借助定位实现两个半圆的完美拼接,最后针对边框的不同方向,给予不同的颜色变化,配合上动画的效果,实现最终的圆环转动与相应的颜色变换。