CSS3实现loading效果转圈圈

javascript.shop

发布于 2019-09-05 18:44:58

6.4K0

发布于 2019-09-05 18:44:58

文章被收录于专栏：杰的记事本杰的记事本

CSS3实现之box-shadow绘制

8个点，有3个大小有规律变大，这样旋转的时候就有方向感和真实性。

8个点实际对应于box-shadow的8个投影，图片大小标准32px*32px，考虑到点的八卦布局以及大小限制，因此，我们的容器本身只有3px*3px，于是，有如下的实现代码：

.loading {
    width: 3px; height:3px;
    border-radius: 100%;                      /* 圆角 */
    box-shadow: 0 -10px 0 1px #333,           /* 上, 1px 扩展 */
                10px 0px #333,                /* 右 */    
                0 10px #333,                  /* 下 */
                -10px 0 #333,                 /* 左 */
                              
                -7px -7px 0 .5px #333,        /* 左上, 0.5px扩展 */
                7px -7px 0 1.5px #333,        /* 右上, 1.5px扩展 */                    
                7px 7px #333,                 /* 右下 */
                -7px 7px #333;                /* 左下 */
}

如果您的浏览器IE9+或Chrome一伙，同时不是在RSS中阅读本文，就会看到上面代码的效果，就是下面这个静止状态的loading圈圈效果：

CSS3 box-shadow有四个值，分别表示“右偏移、下偏移、模糊大小、扩展大小”。因此，那3个稍大的圈圈就是利用了第4个参数——“扩展”来实现的。分别扩展0.5px, 1px以及1.5px.

以上就是CSS3 box-shadow的绘制，相比一开始的炫炫的彩色效果，这个要通俗易懂的多，大家都能轻松把玩实现的效果，只要定好位置，一切都很简单。

一般开源的移动框架中，无限旋转的CSS都是使用spin作为类名以及动画关键字的，大家可以约定俗成的使用，无形中有利于前端大环境的建设。

CSS代码如下，目前在PC上，FireFox/IE10/Opera浏览器中animation动画都已经不需要私有前缀了（如果您不放心，可以自己加上），于是，如下CSS3代码：

.spin {
    animation: spin 1s steps(8) infinite;
}
@keyframes spin {
    from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
}

HTML代码为：

<div class="loading spin"></div>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2013年7月22日2，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度