CSS实现loading小动画(附源码)

最新推荐文章于 2024-06-18 14:13:27 发布

Johnny_Pig

最新推荐文章于 2024-06-18 14:13:27 发布

阅读量801

点赞数

分类专栏： css html 文章标签： html css

本文链接：https://blog.csdn.net/Johnny_Pig/article/details/51231862

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

今天无意看到一篇大神对css+html实现简单loading小动画的资源整合文章,https://www.qianduan.net/free-html5-css3-loaders-preloaders/

无聊便想自己实现一个简单的,于是挑了一个最简单的,名字里面还带pure,看到这个就高兴.

03. Pure CSS3 loader （原Demo地址: http://cssdeck.com/labs/loader）

在看完源代码之后一直对源码中旋转旋转再旋转感到头疼,拆分后发现原码是靠着半圆旋转,另一个变换的形状来填充或者覆盖其他面积,以达到loading的效果.但是好麻烦,于是发现另一个好方法.

原理如下: 依旧靠半圆形状的蓝色来旋转，初始位置在左边,即图1,这个蓝色半圆会一直旋转,旋转到25%时时图二,50%时是图三,100%又回到图1，这样构成一个循环.

如果我们在50%前再加一个半圆来覆盖住左半边,岂不是蓝色半圆转多少,右半部份就显示多少,左半边剩余的被覆盖住了,类似图4的效果(为了说明覆盖,我用红色显示,实际应该是与底色相同),等超过50%时左半边不再覆盖,右半边换成蓝色填充，就形成有一种假象,右半边全部都有蓝色,实际是两个半圆错位叠加,如图5.

有了理论基础,剩下的就是如何实现的了, 由于没有半圆这个形状，全部采用

div {   border-radius:50%;

	background: -webkit-linear-gradient(left, red 50%, rgba(255,255,255,0) 50%);}

通过设置渐变色来实现覆盖及透明,以形成半圆图形.

图一:图二：图三

图四:图五:

更改后源码:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="loading1.css">
</head>
<body>
    <div id="shadow">
        <div id="loader">

        </div>
    </div>
    <div id="mask"></div>
</body>
</html>

CSS:

#shadow {
    position:absolute;
    top:50%;
    left:50%;
    width:100px;
    height:100px;
    margin-top:-50px;
    margin-left: -50px;
    border-radius: 50%;
    box-shadow: -2px 2px 10px 0 rgba(0,0,0,0.5),
    2px -2px 10px 0 rgba(255,255,255,0.5);
    //background-color: red;
}

#loader{
    background: -webkit-linear-gradient(left, skyblue 50%, white 50%); /* Foreground color, Background colour */
    background: -ms-linear-gradient(left, skyblue 50%, white 50%);
    border-radius: 50%;
    height: 100px; /* Height and width */
    width: 100px; /* Height and width */
    animation: time 8s steps(500, start) infinite;
}
@keyframes time {
    100% {
        transform: rotate(360deg);
    }
}
#mask {
    position:absolute;
    top:50%;
    left:50%;
    width:100px;
    height:100px;
    margin-top:-50px;
    margin-left: -50px;
    border-radius: 50%;
    background: -ms-linear-gradient(left, white 50%, rgba(255,255,255,0) 50%);
    animation: mask 8s steps(1, end) infinite;
}


@keyframes mask {
    0% {
        background: -webkit-linear-gradient(left, white 50%, rgba(255,255,255,0) 50%);
        background: -ms-linear-gradient(left, white 50%, rgba(255,255,255,0) 50%);
    }
    50% {
        background: -webkit-linear-gradient(right, skyblue 50%, rgba(255,255,255,0) 50%);
        background: -ms-linear-gradient(right, skyblue 50%, rgba(255,255,255,0) 50%);
    }
}

Johnny_Pig

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实现loading小动画(附源码)

今天无意看到一篇大神对css+html实现简单loading小动画的资源整合文章,https://www.qianduan.net/free-html5-css3-loaders-preloaders/无聊便想自己实现一个简单的,于是挑了一个最简单的,名字里面还带pure,看到这个就高兴.03. Pure CSS3 loader （原Demo地址: http://cssdeck.c
复制链接

扫一扫