css3实现loading加载动画

最新推荐文章于 2024-05-30 10:50:01 发布

忧容骑士

最新推荐文章于 2024-05-30 10:50:01 发布

阅读量695

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_42364543/article/details/99087236

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

css3实现loading加载动画

一、基本的css原理

1.box-shadow: h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必需，水平阴影的位置，允许负值。
v-shadow	必需，垂直阴影的位置，允许负值。
blur	可选，模糊距离。
spread	可选，阴影的尺寸。
color	可选，阴影的颜色。
inset	可选，将外部阴影 (outset) 改为内部阴影。

2.左上、右上、左下、右下的水平偏移(垂直偏移)量：上、下、左、右的水平偏移(垂直偏移)量=1：√2≈1:1.4

二、HTML代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    
</head>

<body>
    <div></div>
</body>

</html>

三、css代码

        div {
            margin: 100px auto;
            width: 2px;
            height: 2px;
            border-radius: 1px;/*50% 因为宽高为2px */            
            box-shadow: 0 -8px 0 2px #000, /*上*/
            0 8px 0 1px #000, /*下*/
            -8px 0 0 1px #000, /*左*/
            8px 0 0 1px #000, /*右*/
            -6px -6px 0 1px #000, /*左上*/
            6px -6px 0 1px #000, /*右上*/
            -6px 6px 0 1px #000, /*左下*/
            6px 6px 0 1px #000;/*右下*/
            animation: loading 2s linear 0s infinite;
            /* 兼容性 */
            -webkit-animation: loading 2s linear 0s infinite;
            -o-animation: loading 2s linear 0s infinite;
            -moz-animation: loading 2s linear 0s infinite;
        }
        
        @keyframes loading {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        /* 兼容性 */
        @-webkit-keyframes loading {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }
        
        @-o-keyframes loading {
            from {
                -o-transform: rotate(0deg);
            }
            to {
                -o-transform: rotate(360deg);
            }
        }
        
        @-moz-keyframes loading {
            from {
                -moz-transform: rotate(0deg);
            }
            to {
                -moz-transform: rotate(360deg);
            }
        }

四、实现效果

忧容骑士

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3实现loading加载动画

css3实现loading加载动画一、基本的css原理二、HTML代码三、css代码四、实现效果![在这里插入图片描述](https://img-blog.csdnimg.cn/20190810164553653.gif)一、基本的css原理1.box-shadow: h-shadow v-shadow blur spread color inset值描述h-shadow...
复制链接

扫一扫