HTML5学堂-码匠 HTML5学堂

您当前位于:CSS3 ——> CSS3特效开发,animation动画实现loading图

CSS3特效开发,animation动画实现loading图

2015/07/29 09:23:18 | 作者:HTML5学堂(码匠) | 分类:CSS3 | 关键词:CSS3,特效,loading,效果,实战

CSS3实现loading图

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

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

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

基本效果图

CSS3 loading 效果图

基本html结构搭建

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - CSS3 - loading图</title>
  6.     <link rel="stylesheet" href="../common/reset.css">
  7.     <style>
  8.         body,html {
  9.             height: 100%;
  10.         }
  11.         .wrap{
  12.             position: absolute;
  13.             top: 0%;
  14.             right: 0%;
  15.             bottom: 0%;
  16.             left: 0%;
  17.             width: 0px;
  18.             height: 0px;
  19.             padding: 15%;
  20.             margin: auto;
  21.             border: 1px solid #06f;
  22.             border-left-width: 4px;
  23.             border-bottom-width: 3px;
  24.             border-right-width: 2px;
  25.             border-radius: 50%;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="wrap"></div>
  31. </body>
  32. </html>

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

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

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

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

显示效果

CSS3 loading图

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

CSS3动画设置

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

  1. .wrap{
  2.  
  3.     -webkit-animation: loading 2s linear infinite;
  4. }
  5.  
  6. @-webkit-keyframes loading {
  7.     from {-webkit-transform: rotate(0deg);}
  8.     to {-webkit-transform: rotate(360deg);}
  9. }

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

  1. body {
  2.     overflow: hidden;
  3. }

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

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS