波纹loading加载动画

最新推荐文章于 2024-09-09 10:37:31 发布

Jimxx

最新推荐文章于 2024-09-09 10:37:31 发布

阅读量111

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/Jimxx/article/details/128022582

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

旋转＋波纹的加载动画，很润~

html

<div><div/>

css

body {
    background: #000;
}

div {
    position: relative;
    width: 35vmin;
    height: 35vmin;
    background: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);
    opacity: .8;
    margin: 25vh auto;
    border-radius: 35%;
    animation: rotateMain 8s linear infinite;
}

div::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #35a0f0 0%, #b233f0 100%);
    opacity: .8;
    box-shadow: 5px 5px 90px rgba(10, 102, 255, 0.5);
    border-radius: 35%;
    animation: rotateMain 8s linear 2s infinite;
}

div::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(60deg, #33580f 0%, #b7ee6d 100%);
    opacity: .8;
    box-shadow: 5px 5px 60px rgba(20, 102, 255, 0.3);
    border-radius: 35%;
    animation: rotateMain 8s linear 4s infinite;
    z-index: -1;
}

@keyframes rotateMain {
    50% {
        transform: rotateZ(180deg);
        border-radius: 50%;
    }
    100% {
        transform: rotateZ(360deg);
        border-radius: 35%;
    }
}