animation 实现 loading 效果 (2)

神膘护体小月半

已于 2023-07-10 16:59:11 修改

阅读量254

点赞数

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

于 2022-07-12 12:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_42154189/article/details/125720723

版权

css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

实例4

父元素嵌套子元素双层动画

<div class="animation4">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

/* 外层父元素旋转 */
.animation4 {
    width: 200px;
    height: 200px;
    position: absolute;
    animation: loading4_1 5s linear infinite;
}
/* 内部元素做位移动画 */
.animation4 div {
    width: 30px;
    height: 30px;
    position: absolute;
    background: #bea9d9;
    animation: loading4_2 2s ease-out infinite;
}
/* 四个子元素定位在四个角 */
/* 当父元素自转时四个子元素也会发生旋转 */
.animation4 div:nth-child(1) {
    left: 0;
    top: 0;
}
.animation4 div:nth-child(2) {
    left: 200px;
    top: 0;
}
.animation4 div:nth-child(3) {
    left: 0;
    top: 200px;
}
.animation4 div:nth-child(4) {
    left: 200px;
    top: 200px;
}
/* 外层父元素旋转 */
@keyframes loading4_1 {
    100% {
        transform: rotate(360deg);
    }
}
/* 内部元素做位移动画 */
@keyframes loading4_2 {
    50% {
        width: 10px;
        height: 10px;
        background: #4ee9d3;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

实例5

利用为元素实现动画

<div class="animation5"></div>

.animation5 {
    position: relative;
    width: 100px;
    height: 40px;
    background: rgba(190, 169, 217, 0.5);
    /* 设置溢出隐藏，当伪元素超出盒子隐藏 */
    overflow: hidden;
}
/* 设置伪元素 */
.animation5::before {
    /* ontent是伪元素展示的内容，可以为空字符串，但必须存在 */
    content: "LOADING";
    color: #fff;
    line-height: 40px;
    text-align: center;
    position: absolute;
    width: 100px;
    height: 40px;
    left: -100px;
    top: 0;
    background: #bea9d9;
    /* 设置动画反向回弹效果  */
    animation: loading5 3s linear infinite alternate;
}
/* 位移发生改变 */
@keyframes loading5 {
    100% {
        left: 0;
    }
}

实例6

进度条动画效果

<div class="animation6">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.animation6 {
    position: relative;
    width: 150px;
    height: 40px;
    background: rgba(190, 169, 217, 1);
    /* 设置溢出隐藏，当伪元素超出盒子隐藏 */
    overflow: hidden;
}
/* 设置伪元素 */
.animation6::before {
    /* ontent是伪元素展示的内容，可以为空字符串，但必须存在 */
    content: "";
    color: #fff;
    line-height: 40px;
    text-align: center;
    position: absolute;
    width: 150px;
    height: 40px;
    left: -150px;
    top: 0;
    background: #bea9d9;
    /* 设置动画反向回弹效果  */
    animation: loading6 6s linear infinite alternate;
}
/* 子元素条纹效果 */
.animation6 div {
    float: left;
    margin-right: 10px;
    height: 40px;
    width: 10px;
    background: rgba(255, 255, 255, 0.5);
}
.animation6 div:last-child {
    margin-right: 0;
}
/* 位移发生改变 */
@keyframes loading6 {
    100% {
        left: 150px;
    }
}