HTML5学堂:学习CSS3,重要的并不是那几个命令,而是如何应用CSS3的知识实现网站中的效果,换句话说,“只有想不到,没有做不到”。在这个效果当中,主要用到了圆角边框和动画。
HTML5学堂-刘国利在此郑重声明:本篇文章的灵感来源于2014年的自己一个学生的技术演讲,他运用CSS3实现了loading图效果,在此书写出来与大家分享。效果创造的原作者——黄仕辉
实现的基本思路:利用圆角边框对loading图的样式控制,让其从方形变化为圆形;之后控制不同的边框粗细,调整更佳的视觉效果;最后利用CSS3中的动画,实现运动;在进行布局的时候,要考虑移动端水平垂直居中的要求以及不同分辨率状态下的效果。
基本效果图
<!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动画的设置即可,在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的效果,很适合在移动端应用。