前端面试CSS相关（二）

用户7572539

发布于 2022-11-21 21:45:35

1830

发布于 2022-11-21 21:45:35

如何实现一个loading动画；要求：用css或svg实现一个loading动画；本文完整源代码地址：https://gitee.com/duanweidong/interview-question-code.git

html结构（css）

<div class="loading-block">
    <div class="loading-part"></div>
    <div class="loading-part"></div>
    <div class="loading-part"></div>
    <div class="loading-part"></div>
    <div class="loading-part"></div>
    <div class="loading-part"></div>
    <div class="loading-part"></div>
    <div class="loading-part"></div>
    <div class="loading-part"></div>
    <div class="loading-part"></div>
    <div class="loading-part"></div>
    <div class="loading-part"></div>
    <div class="loading-part"></div>
</div>

css样式

<style>
        body {
            margin: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loading-block {
            width: 50px;
            height: 50px;
            position: relative;
            top: 0;
            left: 0;
        }

        .loading-part {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .loading-part::after {
            content: '';
            display: block;
            border-radius: 50%;
            width: 10px;
            height: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            transform-origin: center;
        }

        .loading-part:nth-child(1) {
            transform: rotate(0deg);
        }

        .loading-part:nth-child(2) {
            transform: rotate(30deg);
        }

        .loading-part:nth-child(3) {
            transform: rotate(60deg);
        }

        .loading-part:nth-child(4) {
            transform: rotate(90deg);
        }

        .loading-part:nth-child(5) {
            transform: rotate(120deg);
        }

        .loading-part:nth-child(6) {
            transform: rotate(150deg);
        }

        .loading-part:nth-child(7) {
            transform: rotate(180deg);
        }

        .loading-part:nth-child(8) {
            transform: rotate(210deg);
        }

        .loading-part:nth-child(9) {
            transform: rotate(240deg);
        }

        .loading-part:nth-child(10) {
            transform: rotate(270deg);
        }

        .loading-part:nth-child(11) {
            transform: rotate(300deg);
        }

        .loading-part:nth-child(12) {
            transform: rotate(330deg);
        }

        .loading-part:nth-child(13) {
            transform: rotate(330deg);
            animation: rotating 1s infinite steps(12);
        }

        .loading-part:nth-child(13)::after {
            background-color: rgba(0, 0, 0, 0.9);
        }

        @keyframes rotating {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
</style>

html结构（svg

 <svg class="loading" viewbox="25 25 50 50">
      <circle cx="50" cy="50" r="20" class="path" fill="none" />
 </svg>

css样式

<style>
        .loading {
            width: 55px;
            height: 55px;
            animation: rotate 2s linear 0s infinite;
            padding: 5px;
        }

        .path {
            animation: dash 2s ease-in-out infinite;
            stroke: #00b390;
            stroke-width: 2;
            stroke-dasharray: 90 150;
            stroke-dashoffset: 0;
            stroke-linecap: round;
        }

        @keyframes rotate {
            from {
                tranform: rotate(0deg);
            }

            to {
                tranform: rotate(360deg);
            }
        }

        @keyframes dash {
            0% {
                stroke-dasharray: 1 150;
                stroke-dashoffset: 0;
            }

            50% {
                stroke-dasharray: 90 150;
                stroke-dashoffset: -40px;
            }

            100% {
                stroke-dasharray: 90 150;
                stroke-dashoffset: -120px;
            }
        }
</style>

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2022-08-01，如有侵权请联系 cloudcommunity@tencent.com 删除

css