1.-Loader by satyamchaudharydev（下）一、前言四、代码修改需求一：鼠标悬时停止动画并显

一、前言

由于总是粗略接触了一些但是学了又忘，因此对前端知之甚少，秉承着在实践中学习的原则，笔者将对代码涉及的前端知识进行梳理。

很常见的一个通用加载加载框，在重写的过程中想到能否将其转化为具有一定操作逻辑和美观性的元素，于是在复现的基础上重写成了一个可交互的加载样式如下。

加载框在鼠标悬停时会出现文字点按后停止加载，更换文字显示，再次点按继续加载。

同时发现源代码存在bug导致伪元素动画开始和结时超出指定范围导致动画不流畅的问题，并进行了修复。

为了确保.loader::before伪元素在动画执行过程中始终保持与其父元素.loader相同的圆角度，并且不超出其背景范围，我们将.loader的overflow属性设置为hidden，这样任何超出其边界的子元素都会被裁剪掉，包括动画中的.loader::before伪元素。

四、代码修改

需求一：鼠标悬时停止动画并显示字符：

可使用:hover伪类和animation-play-state属性。animation-play-state属性允许控制动画的播放状态，设置为running或paused。

由于CSS不允许直接在伪元素（如.loader::before）上使用:hover伪类，伪元素不是DOM树的一部分，因此不能直接与用户交互。所以伪元素的父元素上使用:hover伪类，并通过它来控制伪元素的animation-play-state。停止动画：

/* 默认状态下，动画持续运行 */
.loader::before {
  animation: moving 3s ease-in-out infinite running;
}

/* 鼠标悬停时，动画暂停 */
.loader:hover::before {
  animation-play-state: paused;
}

显示字符：

.loader:hover::after{
        content:"学习停止😟";
        position: absolute;
        top: 25%;
        left: 25%;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        opacity: 0;
        animation: fadeIn 0.2s forwards;
        animation-delay: 0.2s;
    }
    
   @keyframes fadeIn{
    form{
        opacity:0;
    }
    to{
        opacity:1;
    }
  }

.loader:hover::after用于在.loader元素被鼠标悬停时添加文本。content属性用于指定要显示的文本内容，同时通过fadeIn动画实现了淡入淡出效果。position: absolute;和其他定位样式用于确保文本能够正确地在.loader元素的中央显示。

需求二：点击后隐藏伪元素并更换文字：

使用JavaScript监听：

给.loader元素添加一个点击事件监听器。

在点击事件发生时，通过修改.loader元素的一个类或样式来控制伪元素的显示。

document.querySelector('.loader').addEventListener('click', function() {
  this.classList.toggle('clicked');
});

最后，修改CSS以使用这个新类.clicked来控制伪元素的显示。当.loader元素拥有clicked类时，我们将.loader::after的display属性设置为none，从而隐藏伪元素。

    .loader.clicked::after {
        content: "学习继续😊"; /* 点击后显示的文本 */
        position: absolute;
        top: 25%;
        left: 25%;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        opacity: 0;
        animation: fadeIn 0.2s forwards;
        animation-delay: 0.2s;
}

.loader.clicked::before{
        animation-play-state: paused; /* 点击后暂停动画 */
    }

    /* 当.loader没有.clicked类时，动画继续 */
    .loader:not(.clicked)::before{
        animation-play-state: running;
    }
    
   @keyframes fadeIn{
    form{
        opacity:0;
    }
    to{
        opacity:1;
    }
  }

设置css，每当.loader元素被点击时，它就会切换clicked类，从而根据.loader.clicked::after的CSS规则来控制伪元素的显示，使用CSS根据.loader的类名（clicked）来改变伪元素::after的content属性值，根据.loader的类名来控制伪元素::before的animation-play-state属性，实现动画的暂停和继续。同时通过动画fadeIn实现文字的淡入淡出效果。

需求三：元素在网页正中央展示：

使用CSS的Flexbox或Grid布局。

将元素包裹在一个容器元素内。

对容器元素应用Flexbox布局，使其子元素垂直居中并且在容器的中心对齐。

<div class="center-container">
    <div class="loader"></div>
</div>

.center-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 使用视口高度，使容器填满整个屏幕高度 */
}

.loader {
    /* 根据需要为.loader添加样式 */
}