css实现一个页面loading的动画

程序员文章站 2022-03-18 20:09:39

...

css实现一个页面loading的动画

有点笨，不会生成gif图，效果就是那两张图片中的黑点点，会按顺序从无到有，形成一种loading的感觉。
完整代码如下，可直接复制看效果~

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    #choiceness-loading {
        height: 400px;
        width: 400px;
        margin: 100px auto;
        position: relative;
    }
    .content1,
    .content2 {
        width: 15%;
        height: 15%;
        position: absolute;
        left: 35%;
        top: 100px;
    }
    .content1 div,
    .content2 div {
        width: 25%;
        height: 25%;
        background: #000;
        border-radius: 50%;
        position: absolute;
        animation: move 2s infinite linear
    }
    .content2 {
        transform: rotate(45deg)
    }
    .circle1 {
        left: 0;
        top: 0;
    }
    .circle2 {
        right: 0;
        top: 0
    }
    .circle3 {
        right: 0;
        bottom: 0
    }
    .circle4 {
        left: 0;
        bottom: 0
    }
    .content1 .circle1 {
        animation-delay: -0.1s
    }

    .content2 .circle1 {
        animation-delay: -0.3s
    }
    .content1 .circle2 {
        animation-delay: -0.5s
    }
    .content2 .circle2 {
        animation-delay: -0.7s
    }
    .content1 .circle3 {
        animation-delay: -0.9s
    }
    .content2 .circle3 {
        animation-delay: -1.1s
    }
    .content1 .circle4 {
        animation-delay: -1.3s
    }
    .content2 .circle4 {
        animation-delay: -1.5s
    }
    @keyframes move {
        0% {
            transform: scale(1)
        }
        50% {
            transform: scale(0)
        }
        100% {
            transform: scale(1)
        }
    }
</style>
<body>
    <div id="choiceness-loading">
        <div class="content1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="content2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</body>
</html>

css实现一个页面loading的动画

求一个社团管理系统的全部html页面！本人不会html，css！谢谢_html/css_WEB-ITnose

css动画效果——初学者的看法：实现鼠标移入菜单栏文字下出现下划线

同一个表单，根据单击的按钮跳转到不同的页面_html/css_WEB-ITnose

CSS3 实现的一个简单的"动态主菜单" 示例[转]_html/css_WEB-ITnose

求教，有这么一个效果，当把鼠标放上去二维码慢慢的出来，鼠标离开二维码慢慢的下去，怎么去实现。_html/css_WEB-ITnose

一看就喜欢的loading动画效果Android分析实现

Winform圆形环绕的Loading动画实现代码

css3如何实现过渡动画的效果？css3过渡效果的实现方法

css3图片旋转如何实现？css3实现图片旋转动画效果的方法

如何使用纯CSS实现太阳和地球和月亮的运转模型动画