css3实现水流动

CSS3 可以实现各种炫酷的动态效果，今天我们就来学习一下如何用 CSS3 制作一个让水流动的效果。

/* 先定义一个容器，用于承载水流动的效果 */.container {
    width: 300px;
    height: 300px;
    position: relative;
    overflow: hidden;
}
/* 定义流水的样式 */.water {
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -50%;
    z-index: 1;
    background: linear-gradient(135deg, #71B280 10%, #134E5E 100%);
    animation: wave 10s linear infinite;
}
/* 定义水波动画 */@keyframes wave {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-50%);
}
}
    

我们首先定义了一个容器，其宽高都设置为 300px，并设置其 position 属性为 relative，以便让其内部绝对定位的子元素不会脱离文档流。

我们接着定义了一个流水的样式，其宽度设置为 200%，以便在动画过程中可以让水流动起来。其 position 属性设置为 absolute，并设置其 top 和 left 属性使其定位到容器的左上角。漂亮的水色可以通过渐变来实现。

最后我们使用 @keyframes 定义了一个水波动画，让流水在 x 轴上循环移动，从而实现水流动的效果。动画的总时长为 10s，速度线性无缝循环。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！