论坛 › 马黑黑教程专版 › 杯子装不下海（定稿）

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

杯子装不下海（定稿）

用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接管。

马黑黑 发表于 2022-5-25 19:57

加林森 发表于 2022-5-25 18:19
真漂亮，这个制作真的太完美了。

完美谈不上的

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

<style>

/* 杯子主体 */
.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::before, .glass::after {
        position: absolute;
        content: '';
        width: inherit;
        height: 20px;
        left: -1px;
        border: 1px solid snow;
        border-radius: 50%;
        filter: blur(1px);
}
/* 杯顶 底色与主体一致*/
.glass::before {
        top: -10px;
        background: inherit;/* #ccc linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.45));*/
}
/* 杯底 底色与水体一致 */
.glass::after {
        bottom: -10px;
        background: lightseagreen;
}
/* 水体 */
.water {
        position: absolute;
        width: 100%;
        height: 30px;
        border-radius: 50px / 5px;
        background: lightseagreen;
        bottom: 0;
        animation: up 20s 2s linear infinite;
}
/* 伪元素：水纹和水滴 */
.water::before, .water::after { position: absolute; content: ''; }
/* 水纹 */
.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;
}
/* 水滴 */
.water::after {
        width:16px;
        height: 16px;
        left: calc(50% - 8px);
        top: -200px;
        border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
        background: lightseagreen;
        transform: rotate(-45deg);
        animation: drop .8s linear infinite;
}
/* 水纹动画 */
@keyframes wave { to { opacity: .5; transform: scale(2.5); } }
/* 水滴动画 */
@keyframes drop { to { top: 0px; } }
/* 水体动画 */
@keyframes up { to { height: 90%; } }
</style>

<div class="glass">
        <div class="water"></div>
</div>

红影 发表于 2022-5-24 12:49

非常漂亮，现在更完美了。黑黑创意无限{:4_199:}

马黑黑 发表于 2022-5-24 13:22

红影 发表于 2022-5-24 12:49
非常漂亮，现在更完美了。黑黑创意无限

感觉好一点了

红影 发表于 2022-5-24 20:31

马黑黑 发表于 2022-5-24 13:22
感觉好一点了

完美{:4_205:}

马黑黑 发表于 2022-5-24 20:55

红影 发表于 2022-5-24 20:31
完美

离完美那是差远了

红影 发表于 2022-5-25 10:42

马黑黑 发表于 2022-5-24 20:55
离完美那是差远了

至少黑黑一直在探索中{:4_199:}

马黑黑 发表于 2022-5-25 13:26

红影 发表于 2022-5-25 10:42
至少黑黑一直在探索中

要看时间与精力，我太忙，忙于生计

红影 发表于 2022-5-25 16:17

马黑黑 发表于 2022-5-25 13:26
要看时间与精力，我太忙，忙于生计

很不容易，辛苦了{:4_187:}

加林森 发表于 2022-5-25 18:19

真漂亮，这个制作真的太完美了。{:4_199:}

马黑黑 发表于 2022-5-25 19:59

红影 发表于 2022-5-25 16:17
很不容易，辛苦了

看了看微信钱包，下个月的烟酒钱还有

加林森 发表于 2022-5-25 20:02

马黑黑 发表于 2022-5-25 19:57
完美谈不上的

我喜欢的

红影 发表于 2022-5-26 09:28

马黑黑 发表于 2022-5-25 19:59
看了看微信钱包，下个月的烟酒钱还有

袋袋里有米心不慌{:4_173:}

马黑黑 发表于 2022-5-26 21:49

红影 发表于 2022-5-26 09:28
袋袋里有米心不慌

没米也没关系，拿个破碗出去，一两个钟就有米下锅了

红影 发表于 2022-5-26 22:40

马黑黑 发表于 2022-5-26 21:49
没米也没关系，拿个破碗出去，一两个钟就有米下锅了

乞讨啊{:4_170:}

马黑黑 发表于 2022-5-26 22:44

红影 发表于 2022-5-26 22:40
乞讨啊

乞讨也不是什么丢人的职业

红影 发表于 2022-5-28 21:13

马黑黑 发表于 2022-5-26 22:44
乞讨也不是什么丢人的职业

还有人靠它发财呢{:4_173:}

马黑黑 发表于 2022-5-28 21:15

红影 发表于 2022-5-28 21:13
还有人靠它发财呢

就是呀，我正在考虑是否把它当成第一百个职业

查看完整版本: 杯子装不下海（定稿）