css3预加载对勾效果(css3加载loading)

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

CSS3预加载对勾效果是一种常见的Loading效果，它可以在网页加载过程中展示一个旋转的圆圈，然后在加载完成后，圆圈逐渐变成一个对勾的形状，以提示用户加载已完成。

要实现这个效果，我们可以使用CSS3的动画和过渡属性。我们需要定义一个包含圆圈和对勾的元素，然后通过设置动画和过渡属性来实现预加载对勾的效果。

下面是一个示例代码，演示了如何使用CSS3预加载对勾效果：


<!DOCTYPE html>
<html>
<head>
    <style>
        .loading {
            width: 100px;
            height: 100px;
            border: 2px solid #ccc;
            border-radius: 50%;
            position: relative;
            animation: rotate 2s linear infinite;
        }
        .loading::before,
        .loading::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 40px;
            border: 2px solid #ccc;
            border-top: none;
            border-right: none;
            opacity: 0;
        }
        .loading::before {
            transform-origin: bottom left;
            animation: checkmark 0.5s ease-in-out 2s forwards;
        }
        .loading::after {
            transform-origin: bottom right;
            animation: checkmark 0.5s ease-in-out 2.5s forwards;
        }
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        @keyframes checkmark {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div class="0658-1b1c-0840-dd5f loading"></div>
</body>
</html>

在上面的代码中，我们首先定义了一个名为`.loading`的样式，它设置了圆圈的基本样式，包括宽度、高度、边框和圆角等。通过`animation`属性，我们将一个名为`rotate`的动画应用到了`.loading`元素上，使其以线性无限循环的方式旋转。

接下来，我们使用`::before`和`::after`伪元素来创建圆圈转变为对勾的效果。这两个伪元素的样式设置了宽度、高度、边框和透明度等属性，使其形成一个竖直的线段。通过`transform-origin`属性，我们将其旋转的原点设置为底部的左侧和右侧。

然后，我们使用`@keyframes`关键字定义了名为`checkmark`的关键帧动画，它的关键帧包括了透明度和缩放属性的变化。通过`animation`属性，我们将这个动画分别应用到了`::before`和`::after`伪元素上，使其在一定的延迟后逐渐显示出来，并且以渐变的方式放大。

通过以上的CSS代码，我们可以实现一个简单的CSS3预加载对勾效果。这个效果不仅使页面加载过程更加生动有趣，还提供了一种视觉上的反馈，告诉用户加载已经完成。在实际应用中，我们可以根据需要调整动画的持续时间、延迟时间和样式等属性，以适应不同的场景和需求。

css3预加载对勾效果(css3加载loading)

相关阅读