Simpleの纯CSS页面加载条特效

最新推荐文章于 2024-03-29 09:41:03 发布

G018_star sky♬

最新推荐文章于 2024-03-29 09:41:03 发布

阅读量324

点赞数 1

分类专栏： CSS 页面设计前端文章标签： css html5

本文链接：https://blog.csdn.net/qq_42526440/article/details/103546604

版权

CSS 同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

前端

46 篇文章 0 订阅

订阅专栏

页面设计

12 篇文章 0 订阅

订阅专栏

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background: #298069;
        }
        .loading{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            height: 40px;
            display: flex;
            align-items: center;
        }
        .obj{
            width:6px;
            height:40px;
            background: white;
            margin: 0 3px;
            border-radius: 10px;
            animation: loading 0.8s infinite;
        }
        .obj:nth-child(2){
            animation-delay: 0.1s;
        }
        .obj:nth-child(3){
            animation-delay: 0.2s;
        }
        .obj:nth-child(4){
            animation-delay: 0.3s;
        }
        .obj:nth-child(5){
            animation-delay: 0.4s;
        }
        .obj:nth-child(6){
            animation-delay: 0.5s;
        }
        .obj:nth-child(7){
            animation-delay: 0.6s;
        }
        .obj:nth-child(8){
            animation-delay: 0.7s;
        }
        @keyframes loading {
            0%{
                height: 0;
            }
            50%{
                height: 40px;
            }
            100%{
                height:0;
            }
        }

    </style>
</head>
<body>
<div class="loading">
    <div class="obj"></div>
    <div class="obj"></div>
    <div class="obj"></div>
    <div class="obj"></div>
    <div class="obj"></div>
    <div class="obj"></div>
    <div class="obj"></div>
    <div class="obj"></div>
    <p>love u<p>
</div>
</body>
</html>

效果图如下：在这里插入图片描述

G018_star sky♬

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Simpleの纯CSS页面加载条特效

源代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; ...
复制链接

扫一扫

专栏目录