纯CSS代码实现等待动画效果

最新推荐文章于 2024-01-15 00:00:00 发布

原创最新推荐文章于 2024-01-15 00:00:00 发布 · 1.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Web

本文展示了如何仅使用CSS代码创建吸引人的等待动画效果。通过提供详细的代码示例，帮助读者理解并应用到自己的项目中，提升用户体验。

动画效果

动画效果图如上。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @keyframes color {
            100%, 0% {
                stroke: #9c27b0;
            }
            50% {
                stroke: #ff9800;
            }
            100% {
                stroke: #9c27b0;
            }
        }
        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
                stroke-dashoffset: 0;
            }
            50% {
                stroke-dasharray: 89, 200;
                stroke-dashoffset: -35px;
            }
            100% {
                stroke-dasharray: 89, 200;
                stroke-dashoffset: -124px;
            }

        }
        .loader:before {
            content: '';
            display: block;
            padding-top: 100%;
        }
        .loader {
            margin: 0 auto;
            width: 180px;
            position: absolute;
            display: block;
            left: 0;
            right: 0;
            z-index: 1;
            -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
            text-align: center;
            top: 50%;
        }
        .circular {
            -webkit-animation: rotate 2s linear infinite;
            animation: rotate 2s linear infinite;
            height: 100%;
            -webkit-transform-origin: center center;
            transform-origin: center center;
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .path {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
            -webkit-animation: dash 1.5s ease-in-out infinite, color 2s ease-in-out infinite;
            animation: dash 1.5s ease-in-out infinite, color 2s ease-in-out infinite;
            stroke-linecap: round;
        }
    </style>
</head>
<body>
<div class="loader">
    <svg class="circular" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="3" stroke-miterlimit="10">
        </circle>
    </svg>
    <div style="margin-top: 30px">正在检查更新...</div>
</div>

</body>
</html>

标签

#css #等待动画