CSS3水瓶加水动画

最新推荐文章于 2025-06-01 20:26:38 发布

原创

最新推荐文章于 2025-06-01 20:26:38 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3简单动画

本文介绍了一个使用CSS3实现的水瓶加水动画，包括水注入时上升和水纹波动两个动作。该动画优点是无需JavaScript，但存在动画次数限制、动作僵硬及应用范围窄等缺点。通过代码分享，作者表达了对创意和代码浪漫的期待，并欢迎交流讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两个动作，1水注入瓶子时上升，2水纹波动

优点：不用加载JS

缺点：1.需要设置动画次数，不会永动。2.动作相对僵硬，不知道是不是美工不好的原因，应该有提升空间。3.后期不与脚本结合的话应用范围窄。

html部分

<div class="box">
    <div class="v1"><div class="v2"></div></div>
</div>

css部分

<style type="text/css">
        body{
            background-color: #252525;
        }
        .box{
            width:190px;
            height:430px;
            overflow: hidden;
            position: fixed;
            margin-left: 500px;
            /* 背景渐变 */
            background: -webkit-linear-gradient(#00a7cf, #0080a7); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(#00a7cf, #0080a7); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(#00a7cf, #0080a7); /* Firefox 3.6 - 15 */
            background: linear-gradient(#00a7cf, #0080a7);
            /* 边框及阴影 */