记录自定义实现加载效果CSS的步骤

最新推荐文章于 2024-07-16 15:32:05 发布

东小记

最新推荐文章于 2024-07-16 15:32:05 发布

阅读量715

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36436407/article/details/118713772

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS3创建一个炫酷的加载动画，并结合遮罩层实现在加载过程中阻止页面交互。通过添加JavaScript函数showDialog()和hideDialog()来控制加载对话框的显示和隐藏。加载效果包括旋转的圆点动画，确保代码在页面最前面加载以避免位置问题。

摘要由CSDN通过智能技术生成

1.编写加载效果的CSS

2.增加遮罩层，用以加载时无法点击页面其他内容

3.实现的demo。

使用：通过js形式把代码加载到html中、layout方式将代码段包含进html中。调用showDialog()、hideDialog()控制显示隐藏。

此外，文章中代码段需要在页面内容的最前边加载，如果是放在其他位置，自行处理加载效果的位置问题。

<style>
    .diy-dialog {
        display: none;
    }
    .diy-dialog .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10000;
    }
    .diy-dialog .spinner {
        z-index: 1;
        width: 5.5rem;
        left: 45%;
        top: 35%;
        height: 5.5rem;
        position: fixed;
        text-align: center;

        -webkit-animation: rotate 2.0s infinite linear;
        animation: rotate 2.0s infinite linear;

    }

    .dot1, .dot2 {
        width: 60%;
        height: 60%;
        display: inline-block;
        position: absolute;
        top: 0;
        background-color: #67CF22;
        border-radius: 100%;

        -webkit-animation: bounce 2.0s infinite ease-in-out;
        animation: bounce 2.0s infinite ease-in-out;
    }

    .dot2 {
        top: auto;
        bottom: 0px;
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

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

    @-webkit-keyframes bounce {
        0%, 100% { -webkit-transform: scale(0.0) }
        50% { -webkit-transform: scale(1.0) }
    }

    @keyframes bounce {
        0%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        } 50% {
              transform: scale(1.0);
              -webkit-transform: scale(1.0);
          }
    }
</style>
<div class="diy-dialog">
    <div class="mask"></div>
    <div class="spinner">
        <div class="dot1"></div>
        <div class="dot2"></div>
    </div>
</div>
<script>
    function showDialog()
    {
      $('.diy-dialog').css('display','block');
    }
    function hideDialog()
    {
      $('.diy-dialog').css('display','none');
    }
</script>