首页 前端知识 css实现波浪纹

css实现波浪纹

2024-06-09 09:06:40 前端知识 前端哥 817 336 我要收藏
<template>
    <div class="flex">
        <div>
            <div>扩散原理</div>
            <div class="diffusion">
                <div class="diffusion-child"></div>
            </div>
        </div>

        <div>
            <div>多重扩散</div>
            <div class="diffusion">
                <div class="diffusion-child inset "></div>
                <div class="diffusion-child inset delay-1s"></div>
                <div class="diffusion-child inset delay-2s"></div>
            </div>
        </div>
        <div>
            <div>换个角度</div>
            <div class="diffusion">
                <div class="layout">
                    <div class="diffusion-child inset "></div>
                    <div class="diffusion-child inset delay-1s"></div>
                    <div class="diffusion-child inset delay-2s"></div>
                </div>
            </div>
        </div>
        <div>
            <div>透视效果</div>
            <div class="diffusion d3d">
                <div class="layout">
                    <div class="diffusion-child inset "></div>
                    <div class="diffusion-child inset delay-1s"></div>
                    <div class="diffusion-child inset delay-2s"></div>
                </div>
            </div>
        </div>
    </div>

</template>
<script setup>

</script>
<style lang="less" scoped>
.diffusion {
    width: 100px;
    height: 100px;
    position: relative;

    &-child {
        width: 100%;
        height: 100%;
        /* 用 transform: scale 不改变元素位置的特性,来固定动画所在位置,也就不用去更改元素宽高来形成扩散效果*/
        transform: scale(0);
        border-radius: 50%;
        background-color: rgba(127, 255, 212, 0.5);
        animation: diffusion linear infinite 3s;
        position: absolute;
        top: 0;
        left: 0;

        &.inset {
            background-color: transparent;
            box-shadow: inset 0px 0px 20px rgba(127, 255, 212, 0.5);
        }

        &.delay-1s {
            /* 给第二个圆 一个延时动画,错开动画的时间轴,实现多重扩散效果 */
            animation-delay: 1s;
        }

        &.delay-2s {
            /* 给第二个圆 一个延时动画,错开动画的时间轴,实现多重扩散效果 */
            animation-delay: 2s;
        }
    }

    .layout {
        /* 
        // 由于 perspective 只能对其子集的3D变换属性起效果,对于 其自身的 3D变换 不起效果,
        // 所以需要额外嵌套一层进行 3D 变换
        */
        width: 100%;
        height: 100%;
        transform: rotateX(70deg);
    }

    &.d3d {
        /* 开启3D透视, 视距 里目标点 150 像素(距离越小,透视效果越明显, 距离越大,越接近俯视) */
        perspective: 150px;
    }

}

.flex {
    display: flex;
    text-align: center;
    justify-content: space-between;
}

@keyframes diffusion {

    /* 扩散其实就是从透明,中心点缩放为0,到不透明,缩放为100% 的过程 */
    0% {
        opacity: 0;
        transform: scale(0);
    }

    /* 
    // 中间插入两个关键帧,用于更改动画的视觉效果,
    // 原理跟动画曲线类似,但是由于关键帧可以单独控制每个属性的过程,
    // 相对比较简单一些。
     */
    30% {
        opacity: 1;
        transform: scale(0.3);
    }

    90% {
        opacity: 1;
        transform: scale(0.9);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}
</style>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11614.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!