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各占父级一半大小的布局方式,然后借助定位实现两个半圆的完美拼接,最后针对边框的不同方向,给予不同的颜色变化,配合上动画的效果,实现最终的圆环转动与相应的颜色变换。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 高并发系统三大利器之缓存
- 前端测试题:(解析)js中关于类(class)的继承的说法,下面错误的是?
- 程序员深夜惨遭老婆鄙视,原因竟是CAS原理太简单?| 每一张图都力求精美
- MySQL数据延迟跳动的问题分析
- Python GUI项目实战(八)修改密码功能的实现
- Prometheus监控神器-Alertmanager篇(3)
- Prometheus监控神器-Alertmanager篇(4)
- 71-STM32+ESP8266+AIR202基本控制篇-移植使用-移植微信小程序MQTT底层包到自己的工程项目
- 目标检测 | Anchor free之CornerNet网络深度解析
- 手把手教你 3 分钟搞定个人网站 http 免费升级到 https
- 设计模式(四):通过做蛋糕理解构建模式及Android中的变种
- 如何入门使用腾讯云物联网开发平台 IoT Explorer,开发一盏智慧城市的智能灯?
- 知道吗?容器镜像也可以延迟拉取!
- ansible超详细讲解,值得收藏
- 实战渗透 - 一个怎么够?我全都要!