CSS中如何制作数据加载波浪效果—clip-path创意动画-css教程-PHP中文网

CSS中如何制作数据加载波浪效果—clip-path创意动画

蓮花仙者

发布： 2025-07-15 14:15:02

原创

485人浏览过

使用clip-path制作数据加载波浪效果的核心在于通过polygon函数定义波浪形状并结合动画实现动态效果。1. 通过html结构创建容器和波浪元素，容器设置为圆形并隐藏超出部分；2. 波浪元素使用绝对定位并应用transform: translatey实现从底部填充的动画；3. 利用wave-animate动画改变clip-path的polygon坐标点，模拟波浪起伏；4. 设置双动画控制填充进度与波浪摆动，分别处理填充效果和动态变形；5. clip-path相比传统背景动画能更灵活控制形状边缘，带来更强创意表达。

CSS中如何制作数据加载波浪效果—clip-path创意动画

CSS中制作数据加载波浪效果，如果想玩点不一样的，clip-path确实是个非常有意思的选择。它能让你跳出传统思维，直接定义元素的可见区域，从而创造出那种仿佛液体在容器中晃动、填充的动态视觉。这不像单纯的背景图位移，clip-path赋予你对形状本身的控制力，让波浪的边缘不再是简单的直线或曲线，而是可以随心所欲地扭动、变形，带来更强的创意表达。

解决方案

要实现一个利用clip-path制作的数据加载波浪效果，我们可以用一个容器包裹一个波浪内容元素。这个波浪内容元素通过clip-path来定义其顶部的波浪形状，并通过动画来控制其垂直位置和波浪形状的微小摆动，模拟加载过程。

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

登录后复制

.loader-container {
    width: 180px; /* 容器宽度 */
    height: 180px; /* 容器高度 */
    border-radius: 50%; /* 圆形加载器 */
    overflow: hidden; /* 隐藏超出部分 */
    position: relative;
    background-color: #e0e0e0; /* 加载前背景色 */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

.wave-fill {
    position: absolute;
    bottom: 0; /* 从底部开始填充 */
    left: 0;
    width: 100%;
    height: 100%; /* 初始高度为100%，通过transform控制可见性 */
    background: linear-gradient(to top, #4CAF50, #8BC34A); /* 波浪填充颜色 */
    transform: translateY(100%); /* 初始隐藏在底部 */
    animation: 
        fill-progress 4s ease-out forwards, /* 填充动画 */
        wave-animate 2s linear infinite alternate; /* 波浪摆动动画 */
    transform-origin: bottom center; /* 确保波浪从底部向上升起 */
}

@keyframes fill-progress {
    0% { transform: translateY(100%); } /* 完全隐藏 */
    100% { transform: translateY(0%); } /* 完全显示 */
}

@keyframes wave-animate {
    0% {
        /* 定义波浪的初始形状，通过多边形点来模拟曲线 */
        clip-path: polygon(
            0% 100%, 
            100% 100%, 
            100% 80%, 
            80% 85%, 
            60% 75%, 
            40% 85%, 
            20% 75%, 
            0% 80%
        );
    }
    50% {
        /* 波浪摆动到中间位置 */
        clip-path: polygon(
            0% 100%, 
            100% 100%, 
            100% 75%, 
            80% 80%, 
            60% 70%, 
            40% 80%, 
            20% 70%, 
            0% 75%
        );
    }
    100% {
        /* 波浪摆动到另一端，与0%类似但有微小错位感 */
        clip-path: polygon(
            0% 100%, 
            100% 100%, 
            100% 80%, 
            80% 85%, 
            60% 75%, 
            40% 85%, 
            20% 75%, 
            0% 80%
        );
    }
}

登录后复制

这段代码的核心在于wave-fill元素的transform: translateY动画来控制填充进度，以及wave-animate动画中clip-path属性的polygon点位变化来模拟波浪的起伏摆动。polygon函数允许你定义一个多边形，通过改变这些点的坐标，就能让波浪的顶部边缘看起来像是在动。