加载动画效果的实现

最新推荐文章于 2023-07-11 11:07:51 发布

Gcalolin

最新推荐文章于 2023-07-11 11:07:51 发布

阅读量777

点赞数

分类专栏：网页特效文章标签：动画

本文链接：https://blog.csdn.net/gxiaoqin/article/details/75456827

版权

网页特效专栏收录该内容

4 篇文章 0 订阅

订阅专栏

动画效果图：
这里写图片描述

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .loading {
            text-align: center;
            height: 40px;
            line-height: 40px;
            position: relative;
        }
        .loading span{
            display: inline-block;
            width: 2px;
            height: 10px;
            background:#690;
            animation: loading 1.4s ease-out infinite;

        }
        .loading span:nth-child(2){
            animation-delay: -1.2s;
        }
        .loading span:nth-child(3){
            animation-delay: -1.0s;
        }
        .loading span:nth-child(4){
            animation-delay: -0.8s;
        }
        .loading span:nth-child(5){
            animation-delay: -0.6s;
        }
        @keyframes loading{
            0% {
                transform: scale(0.4);
            }
            25% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.6);
            }
            75%{
                transform: scale(1.0);
            }
            100%{
                transform: scale(0.4);
            }
        }
    </style>
</head>
<body>
    <div class="loading" v-show="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
<script type="text/javascript">

</script>
</html>

Gcalolin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
加载动画效果的实现

动画效果图： <!DOCTYPE html><html><head> <title></title> <style type="text/css"> .loading { text-align: center; height: 40px; line-height: 40px;
复制链接

扫一扫