CSS3实现loading图

HTML5学堂:学习CSS3,重要的并不是那几个命令,而是如何应用CSS3的知识实现网站中的效果,换句话说,“只有想不到,没有做不到”。在这个效果当中,主要用到了圆角边框和动画。

HTML5学堂-刘国利在此郑重声明:本篇文章的灵感来源于2014年的自己一个学生的技术演讲,他运用CSS3实现了loading图效果,在此书写出来与大家分享。效果创造的原作者——黄仕辉

实现的基本思路:利用圆角边框对loading图的样式控制,让其从方形变化为圆形;之后控制不同的边框粗细,调整更佳的视觉效果;最后利用CSS3中的动画,实现运动;在进行布局的时候,要考虑移动端水平垂直居中的要求以及不同分辨率状态下的效果。

基本效果图

基本html结构搭建

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HTML5学堂 - CSS3 - loading图</title>
 <link rel="stylesheet" href="../common/reset.css">
 <style>
     body,html {
         height: 100%;
     }
     .wrap{
         position: absolute;
         top: 0%;
         right: 0%;
         bottom: 0%;
         left: 0%;
         width: 0px;
         height: 0px;
         padding: 15%;
         margin: auto;
         border: 1px solid #06f;
         border-left-width: 4px;
         border-bottom-width: 3px;
         border-right-width: 2px;
         border-radius: 50%;
     }
 </style>
</head>
<body>
 <div class="wrap"></div>
</body>
</html>

此处采用了一种很特殊的居中方法,将盒模型进行定位处理之后,上下左右均采用了0%的值,然后运用margin:auto的控制,让上下左右自动处理外边距值,从而达到居中的状态。关于元素的水平垂直居中,可点击查看:《网易NEC水平垂直居中》

另一个处理,是宽度高度自适应的设置,在为width和height设置百分比之后,会分别根据父级元素的宽度和高度进行计算,此时一旦设备宽度高度不同,我们的loading图就不再是正圆形,由于padding设置百分比值时,均是按照文字方向计算的(默认都是参照父级的宽度计算),因此此处我们将宽高均设为0,而用padding进行内容区大小的设置。

关于边框的设置已经提到了,四个方向采用不同的边框粗细。

顺便一提,由于使用的是CSS3进行控制,因此,即便是在PC端调整窗口大小,loading图的大小也会随之发生变化。

显示效果

PS:从自己博客(独行冰海)取的图片,所以自然底部就有水印了~~~

CSS3动画设置

之后进行CSS3动画的设置即可,在CSS中代码中增加如下内容:

.wrap{

 -webkit-animation: loading 2s linear infinite;
}

@-webkit-keyframes loading {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(360deg);}
}

当前就已经实现出来了,不过,在测试的时候会发现,出现了滚动条,因此,我们可以给body再增加这样一句代码:

body {
 overflow: hidden;
}

CSS3就已经搞定了~很简单的解决了loading的效果,很适合在移动端应用。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

药不能停之--CSS怎么学怎么记效果好?

image.png CSS这个东西,唉,我也是不知道什么时候就学会了的。想当年根本没有前端,做网页就是table套table的时代,CSS基本上只能一种用法...

1846
来自专栏前端说吧

CSS3-实现单选框radio的小动画

2563
来自专栏前端小叙

css绝对定位如何在不同分辨率下的电脑正常显示定位位置?

有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用。 首先要明白如下几...

3727
来自专栏HTML5学堂

移动端H5知识[系列] - “百变”盒模型

HTML5学堂:移动端从2012年走到今日,已经占领了互联网的半壁江山。网站开发也从PC平台向移动端平台开发发展。作为一个优秀的前端开发者,除了能够处理传统平台...

3326
来自专栏LIN_ZONE

7款让人惊叹的HTML5粒子动画特效(转载)

这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就...

632
来自专栏九彩拼盘的叨叨叨

图片不变形,宽高不超出父元素的情况下旋转图片

如题,具体的效果见这里 。做这样的效果的难点在于,计算没旋转前图片的宽,高和旋转后的宽高。

563
来自专栏Small Code

《Python基础教程》第二版代码清单2-3更正

今天在看《Python基础教程》第二版的时候看到代码清单2-3,自己试了试结果不对(输入的时候就感觉不太对,结果真的不对),于是自己修改了一下,主要是盒子里的空...

17010
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定...

3056
来自专栏前端杂货铺

边框的巧妙应用

边框有一些特殊的属性,可以采用边框来实现对话框的效果,而且兼容性杠杠的,不过在ie6下面可能会遇到兼容性问题,在后面分析它。 首先,我们看看边框的组成结构: ...

3738
来自专栏前端笔记

【 前端相关 网页布局 】探讨CSS3中 “垂直居中” 问题

“44 年前我们就把人类送上月球了,但现在我们仍然无法在 CSS 中实现垂直居中。” —— James Anderson 难题 在 CSS 中对元素进行水平居...

2647

扫描关注云+社区