文章最后更新时间：2024年09月26日

充电加载动画源码

一款非常简约的CSS电池充电动画效果加载源码，可用于美化网站加载、外链跳转。

CSS 部分定义了动画效果，通过.loader类实现电池充电动画，包括边框、背景颜色、动画等设置。

演示：

充电加载动画.gif

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>充电加载动画源码</title>
    <link rel="stylesheet" href="./保存的.css">
</head>

<body>
    <div></div>
</body>

</html>

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e8e8e8;
}

.loader {
    width: 80px;
    height: 40px;
    color: #000;
    border: 2px solid currentColor;
    border-right-color: transparent;
    padding: 3px;
    background: repeating-linear-gradient(90deg, currentColor 0 10px, #0000 0 15px) 0/0% no-repeat content-box content-box;
    position: relative;
    animation: l5 2s infinite steps(6);
}

.loader::before {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 100%;
    width: 10px;
    background: linear-gradient(#0000 calc(50% - 7px), currentColor 0 calc(50% - 5px),
            #0000 0 calc(50% + 5px), currentColor 0 calc(50% + 7px), #0000 0) left /100% 100%,
        linear-gradient(currentColor calc(50% - 5px), #0000 0 calc(50% + 5px), currentColor 0) left /2px 100%,
        linear-gradient(#0000 calc(50% - 5px), currentColor 0 calc(50% + 5px), #0000 0) right/2px 100%;
    background-repeat: no-repeat;
}

@keyframes l5 {
    100% {
        background-size: 120%
    }
}