杯子装不下海（定稿）

马黑黑 · 发表于 2022-5-24 12:20

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

用CSS渲染玻璃杯那种透明澄澈的材质外观感觉力不从心，这种效果应该是PS的强项。那就将就一把，用灰色系做底色，加上一定程度透明的白色渐变，营造简单粗糙的毛玻璃效果：

/* 杯子主体 */
.glass {
margin: 50px auto 0;
width: 100px;
height: 200px;
background: #ccc linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.35));
box-shadow: 0 0 10px gray;
position: relative;
}

这样得出的是一个矩形的形状，当然不符合要求。杯口、杯底应是椭圆的，所以需要增加“附件”，用 .glass 的双胞胎伪元素来模拟。伪元素的共同特征比较多，放在一块写：

/* 伪元素：杯顶和杯底 */
.glass::before, .glass::after {
position: absolute;
content: '';
width: inherit;
height: 20px;
left: -1px;
border: 1px solid snow;
border-radius: 50%;
filter: blur(1px);
}

它们的宽度继承宿主元素，高度设为20px，这样50%的border-radius能使它们的外观逼近椭圆形状。它们有border值，1像素，所以左移1px令其水平居中。加入模糊滤镜，高斯模糊那么一丢丢，让椭圆的边框少点毛刺，这样的杯子用来喝水对嘴唇可以增加一点点安全系数。

杯顶杯底分别在上下方，要分别定位，二者的底色也不同，杯顶跟着杯体背景色，杯底则和马上装的水的颜色一致（花潮制造太空杯但坚决不生产空杯）：

/* 杯顶底色与主体一致*/
.glass::before { top: -10px; background: inherit; }
/* 杯底底色与水体一致 */

.glass::after { bottom: -10px; background: lightseagreen; }

lightseagreen是浅海水绿，美丽而宁静的一种自然颜色。我们杯子里装的水就是它：

/* 水体 */
.water {
position: absolute;
width: 100%;
height: 30px;
border-radius: 50px / 5px;
background: lightseagreen;
bottom: 0;
animation: up 20s 2s linear infinite;
}

杯里的水自然在底部，直接设置 bottom 为 0 即可。水体的高度是为了适应杯底，比杯底占用的高度略高一些。杯中水不能是矩形的，所以设置一下 border-radius 令其略微有些弧形状。animation 动画后面再结合关键帧动画做分析。下面看水滴和水纹，用 .water 的伪元素做。两者的共同属性不多，仅伪元素的基本属性是一样的：

/* 伪元素：水纹和水滴 */
.water::before, .water::after { position: absolute; content: ''; }

水纹用 ::before 伪元素，代码如下：

/* 水纹 */
.water::before {
width: 30px;
height: 10px;
left: calc(50% - 15px);
top: 10px;
border-radius: 50%;
border: 1px solid #ddd;
box-shadow: inset 0 0 10px gray;
opacity: 0;
animation: scale 1s linear infinite;
animation: wave .8s .6s linear infinite;
}

水纹的大小、位置、定位、边框等好理解，不多说，先重点说说阴影。阴影用往里（inset）的方式，灰色，这样能渲染水滴落下时在水面上营造的深度效果。再说一下不透明度，设为0，这是不可见的，需由关键帧动画去改变其不透明度的数值时它的效果才会出来。至于动画，也稍后再谈。

水滴用 ::after 伪元素，代码长酱紫：

/* 水滴 */
.water::after {
width:16px;
height: 16px;
left: calc(50% - 8px);
top: -100px;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
background: lightseagreen;
transform: rotate(-45deg);
animation: drop .8s linear infinite;
}

这是用 border-radius 做出的水滴，它自然倾斜45deg，所以用rotate方法把它转回来，成为垂直下落的样子。

最后分别给水纹、水滴和水体设计关键帧动画。水纹是从小变大的，可以用 scale 方法把它往大里缩放：

/* 水纹动画 */
@keyframes wave { to { opacity: .5; transform: scale(2.5); } }

水滴自上往下做落体运动，它原先定位在一个负数的top值，我们只需让它回落到 0 处便好：

/* 水滴动画 */
@keyframes drop { to { top: 0px; } }

水体则处于上升状态，改变高度可以实现。原先高度是多少不用管，我们需要让它差不多满、不能让水溢出造成水漫花潮就行：

/* 水体动画 */
@keyframes up { to { height: 90%; } }

最后说说各元素和伪元素调用关键帧动画的设计。

水滴和水纹的配套程度要求较高，水滴落到水面后水纹立马泛起涟漪是最佳的效果，为此运行的周期时长需要同步，但水纹要引入一个延时的时间。不过由于水纹从不可见到一定程度的可见，加之水位也会上升，水纹要完美和水滴合拍不是很容易能做到，还是两个字，将就，无可奈何的、差不多就行的态度（never settle只是嘴上说说而已）。水位上升也不能一开始就发起动作，所以也延时一些时间执行。

水位的上升在此只是做示范，当我们用于检测audio的播放进度时，它的动画将由JS接管。