纯css加载动画效果

青衫折扇

已于 2023-04-12 09:37:00 修改

阅读量597

点赞数

分类专栏： uni-app css 文章标签： css 动画 css3 Powered by 金山文档

于 2023-01-04 11:09:32 首次发布

本文链接：https://blog.csdn.net/qq_42543264/article/details/128544853

版权

uni-app 同时被 2 个专栏收录

60 篇文章 17 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

效果一

html

<view class="container">
            <view class="dot dot-1"></view>
            <view class="dot dot-2"></view>
            <view class="dot dot-3"></view>
        </view>

css

.container {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .dot {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #000;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .dot-3 {
        background-color: #f74d75;
    }

    .dot-2 {
        background-color: #10beae;
    }

    .dot-1 {
        background-color: #ffe386;
    }

    .dot-3 {
        background-color: #f74d75;
        animation: dot-3-move 2s ease infinite;
    }

    @keyframes dot-3-move {
        20% {
            transform: scale(1)
        }

        45% {
            transform: translateY(-18px) scale(.45)
        }

        60% {
            transform: translateY(-25px) scale(.45)
        }

        80% {
            transform: translateY(-25px) scale(.45)
        }

        100% {
            transform: translateY(0px) scale(1)
        }
    }

    .dot-2 {
        background-color: #10beae;
        animation: dot-2-move 2s ease infinite;
    }

    .dot-1 {
        background-color: #ffe386;
        animation: dot-1-move 2s ease infinite;
    }

    @keyframes dot-2-move {
        20% {
            transform: scale(1)
        }

        45% {
            transform: translate(-16px, 12px) scale(.45)
        }

        60% {
            transform: translate(-20px, 15px) scale(.45)
        }

        80% {
            transform: translate(-20px, 15px) scale(.45)
        }

        100% {
            transform: translateY(0px) scale(1)
        }
    }

    @keyframes dot-1-move {
        20% {
            transform: scale(1)
        }

        45% {
            transform: translate(16px, 12px) scale(.45)
        }

        60% {
            transform: translate(20px, 15px) scale(.45)
        }

        80% {
            transform: translate(20px, 15px) scale(.45)
        }

        100% {
            transform: translateY(0px) scale(1)
        }
    }

    .container {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: rotate-move 2s ease-in-out infinite;
    }

    @keyframes rotate-move {
        55% {
            transform: translate(-50%, -50%) rotate(0deg)
        }

        80% {
            transform: translate(-50%, -50%) rotate(360deg)
        }

        100% {
            transform: translate(-50%, -50%) rotate(360deg)
        }
    }

效果二

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

.loader-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50vh;
    }
    
    .loader {
      width: 70px;
      height: 70px;
      border: 2px solid #999;
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 1s infinite linear;
    }
    
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

想要源码或有问题可扫下方二维码下载或联系客服