CSS制作首页loading 动画

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>loading 动画</title>
    <style type="text/css">
        .loading {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-align-items: center;
            -webkit-justify-content: center;
        }

        .loading img {
            width: 50px;
            height: 50px;
            display: block;
            margin: 0;
            position: relative;
             /*
                animation 属性是一个简写属性，用于设置六个动画属性：
                1、animation-name 需要绑定到选择器的 keyframe 名称
                2、animation-duration 完成动画所花费的时间，以秒或毫秒计
                3、animation-timing-function 动画的速度曲线。
                    linear 动画从头到尾的速度是相同的、
                    ease 默认。动画以低速开始，然后加快，在结束前变慢、
                    ease-in 动画以低速开始、
                    ease-out 动画以低速结束、
                    ease-in-out 动画以低速开始和结束、
                4、animation-delay 动画开始之前的延迟 
                5、animation-iteration-count 动画应该播放的次数
                    n 播放次数
                    infinite无限次播放
                6、animation-direction 是否应该轮流反向播放动画
                    normal  默认值。动画应该正常播放
                    alternate 动画应该轮流反向播放
             */
            -webkit-animation: spin 1s linear 1s 5 alternate;
            animation: spin 1s linear infinite;
        }

         /*
            transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
         */

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="load" class="loading">
        <img src="./img/Loading.png">
    </div>
</body>

</html>

效果：

这里写图片描述

再Angular中添加首页loading动画：
index.html 文件的app-root 之间添加style 和html代码， angular会在页面加载完成后将app-root之间的代码都移除掉

CSS制作首页loading 动画

猜你喜欢