给页面添加loading动画

﹏ヽ暗。殇╰゛Y 2022-03-01 15:40 330阅读 0赞

html内的代码：

<div class="loading"></div>

css代码：

.loading{
        width: 300px;
        height: 300px;
        border:1px solid black;
        position: relative;
    }
    
    .loading::before,.loading::after{
        content: '';
        position: absolute;
        width: 0px;
        height: 0px;
        background: black;
        border-radius: 50%;
        top:0;      
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;   /*上下左右都为0，再加上margin:auto; 就是自动居中*/
        animation: s 1.5s linear infinite;  /*加上s状态，状态开始到结束为1.5s*/
    }
    
    .loading::after{
        animation-delay: 0.75s;     /*第二个圆出现的时间*/
    }
    
    @keyframes s{
        0%{             /*初始状态*/
            width: 0px;
            height: 0px;
            opacity: 1; /*透明度*/
        }
        100%{           /*结束状态*/
            width: 100px;
            height: 100px;
            opacity: 0;
        }
    }

最终效果预览：

[点击预览效果链接（https://70kg111.github.io/loading-animation/index.html）][https_70kg111.github.io_loading-animation_index.html]

[https_70kg111.github.io_loading-animation_index.html]: https://70kg111.github.io/loading-animation/index.html

发表评论取消回复

表情：

评论列表（有 0 条评论，330人围观）

还没有评论，来说两句吧...

相关阅读

相关 html页面通过js的class给页面添加元素

html页面通过js的class给页面追加元素，图片等

逃离我推掉我的手/ 2024年05月24日 13:01/ 0 赞/ 101 阅读

相关使用JS给页面添加水印效果

原文：[https://www.cnblogs.com/Miracle-ZLZ/p/9340249.html][https_www.cnblogs.com_Miracle-ZL

灰太狼/ 2023年06月25日 06:18/ 0 赞/ 10 阅读

相关 Java 给PPT添加动画效果（预设动画/自定义动画）

PPT幻灯片中对形状可设置动画效果，常见的动画效果为内置的固定类型，即动画效果和路径是预先设定好的固定模板，但在设计动画效果时，用户也可以按照自己的喜好自定义动画动作路径。下面

我不是女神ヾ/ 2022年11月14日 15:59/ 0 赞/ 270 阅读

相关 loading动画

等待loading动画 <ul class="blinking "> <li></li> <li></li>

一时失言乱红尘/ 2022年10月13日 15:52/ 0 赞/ 192 阅读

相关给JSP页面添加验证码

前段时间学习Struts2做了个验证码的小例子，今天在火狐下查看遇到点问题，在这里记录一下。制作图形验证码关键在于编写生成图形的Servlet \[java\] [

妖狐艹你老母/ 2022年09月30日 13:50/ 0 赞/ 225 阅读

相关 jQquery :animated 给没有动画效果的元素添加动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

￡神魔★判官ぃ/ 2022年07月13日 10:40/ 0 赞/ 262 阅读

相关给页面添加loading动画

html内的代码： <div class="loading"></div> css代码： .loading{ width: 300px;

﹏ヽ暗。殇╰゛Y/ 2022年03月01日 15:40/ 0 赞/ 331 阅读

相关 JAVAF给页面添加背景音乐

非常简单的一个例子我的业务场景是点击页面中的菜单栏中某个菜单时，播放背景音乐，切换其他菜单时关闭音乐 FXML页面的button绑定后台controller代码就不写

亦凉/ 2022年02月25日 19:46/ 0 赞/ 354 阅读

相关【loading...页面动画效果】

\\效果如下，动态旋转的加载中动画 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

客官°小女子只卖身不卖艺/ 2021年11月16日 07:24/ 0 赞/ 729 阅读

相关给html页面添加水印

看到别人的页面有水印，感觉很有趣尝试了下给html加水印的效果，如图 ![format_png][] 实现原理：　　根据页面大小，动态添加若干个div，将传递过来的

秒速五厘米/ 2021年07月26日 12:18/ 0 赞/ 990 阅读