css实现波浪纹

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129