纯 CSS 实现 | 送你一杯热气腾腾的下午茶☕️，温暖你整个午后

站长

2022年12月05日 01:16 · 阅读数 31

前言

大家好，我是爱吃鱼的桶哥Z。秋天到了，你是否喝到了秋天的第一杯奶茶呢？刚好最近学到了一个纯 CSS 实现的热茶效果，今天就送给大家秋天的第一杯下午茶。首先我们先来看一下这杯茶的效果，如下所示：

纯 CSS 实现 | 送你一杯热气腾腾的下午茶☕️，温暖你整个午后

第一次看到这个效果的时候，着实被惊艳到了，之前从未想过用 CSS 能够实现这么逼真的效果。那么该如何实现这杯热气腾腾的下午茶呢？让我们一起来看看吧！

杯子 + 杯托

首先我们将杯子和杯托在页面中绘制出来，让我们先来看一下相关的 html，代码如下：

<div class="container">
    <div class="cup">
        <div class="top">
            <div class="circle">
		<div class="tea"></div>
            </div>
        </div>
    </div>
</div>

上述的 html 中，我们添加了一个 cup 元素，接下来我们就需要通过 css 来将它绘制出来，css 代码如下：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #607d8b;
}
.container {
    position: relative;
    top: 50px;
}
.container .cup {
    position: relative;
    width: 280px;
    height: 300px;
    background: linear-gradient(to right, #f9f9f9, #d9d9d9);
    border-bottom-left-radius: 45%;
    border-bottom-right-radius: 45%;
}
.container .cup .top {
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to right, #f9f9f9, #d9d9d9);
    border-radius: 50%;
}
.container .cup .top .circle {
    position: absolute;
    top: 5px;
    left: 10px;
    width: calc(100% - 20px);
    height: 50px;
    background: linear-gradient(to left, #f9f9f9, #d9d9d9);
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;
}
.container .cup .top .circle .tea {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#c57e65, #e58462);
    border-radius: 50%;
}

给 cup 元素添加相关的样式后，我们就绘制出一个椭圆的杯子以及里面的茶了，让我们一起来看一下效果：

纯 CSS 实现 | 送你一杯热气腾腾的下午茶☕️，温暖你整个午后

可以看到我们已经将茶杯的大致形状绘制出来了，接下来我们就需要将茶杯的把手和杯托也一起绘制出来。我们依旧还是先来修改 html，代码如下：

<div class="container">
    <div class="cup">
        <div class="top">
            <div class="circle">
		<div class="tea"></div>
            </div>
        </div>
        <div class="handle"></div>
    </div>
</div>

先来看一下修改后的 html，我们添加了一个 handle 元素，它就是茶杯的把手，接下来我们继续完善一下 css，代码如下：

.container .cup .handle {
    position: absolute;
    right: -70px;
    top: 40px;
    width: 160px;
    height: 180px;
    border: 25px solid #dcdcdc;
    border-left: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-radius: 50%;
    transform: rotate(42deg);
}

在 handle 元素上，我们通过 border-left 和 border-right 绘制了一个25像素的边框，并通过 border-radius 将这个边框设置为了一个圆，最后的效果如下所示：

纯 CSS 实现 | 送你一杯热气腾腾的下午茶☕️，温暖你整个午后

到这里茶杯的已经绘制完成了，接下来就需要绘制杯托了，依旧需要修改 html 代码，我们一起来看一下：

<div class="container">
    <div class="plate"></div>
    <div class="cup">
        <div class="top">
            <div class="circle">
		<div class="tea"></div>
            </div>
        </div>
        <div class="handle"></div>
    </div>
</div>

在 container 中，添加了一个 plate 元素，它就是我们的杯托，接下来看一下相关的 css 代码，如下：

.container .plate {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 200px;
    background: linear-gradient(to right, #f9f9f9, #e7e7e7);
    border-radius: 50%;
    box-shadow: 0 35px 35px rgba(0, 0, 0, 0.2);
}
.container .plate::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    border-radius: 50%;
    background: linear-gradient(to left, #f9f9f9, #e7e7e7);
}
.container .plate::after {
    content: '';
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    background: radial-gradient(rgba(0, 0, 0, 0.2) 25%, transparent, transparent);
    border-radius: 50%;
}

在杯托的绘制中，我们大量用到了 linear-gradient 和 radial-gradient 属性，这两个属性主要是用于设置渐变，并且通过 before 和 after 伪类，给整个杯托绘制了一层阴影，看起来更加真实，实现的效果如下所示：

纯 CSS 实现 | 送你一杯热气腾腾的下午茶☕️，温暖你整个午后

这杯茶的整体效果已经实现了，但是光看这个图，还是很生硬，因为我们没有加热气腾腾的效果，那么该如何实现呢？让我们继续往下学！

热气腾腾的下午茶

在上面我们已经将杯茶都绘制出来了，但是没有热气腾腾的效果，看起来就比较生硬，因此我们需要添加一些热气效果。首先依旧需要修改 html 代码，如下所示：

<div class="container">
    <div class="plate"></div>
    <div class="cup">
        <div class="top">
            <div class="vapour">
                <span style="--i:1;"></span>
                <span style="--i:3;"></span>
                <span style="--i:16;"></span>
                <span style="--i:5;"></span>
                <span style="--i:13;"></span>
                <span style="--i:20;"></span>
                <span style="--i:6;"></span>
                <span style="--i:18;"></span>
                <span style="--i:7;"></span>
                <span style="--i:10;"></span>
                <span style="--i:8;"></span>
                <span style="--i:17;"></span>
                <span style="--i:11;"></span>
                <span style="--i:12;"></span>
                <span style="--i:14;"></span>
                <span style="--i:2;"></span>
                <span style="--i:9;"></span>
                <span style="--i:15;"></span>
                <span style="--i:4;"></span>
                <span style="--i:19;"></span>
            </div>
            <div class="circle">
		<div class="tea"></div>
            </div>
        </div>
        <div class="handle"></div>
    </div>
</div>

在 top 元素中，添加一个 vapour 元素，然后添加了20个 span 标签，其中给每个 span 标签的 style 添加了 --i 的属性，大家仔细看可以发现，每个 --i 的值并不是连续的，这是为了后面实现热气腾腾的效果时，让它们的运动时间看起来更加真实一些。接下来就需要添加最后的 css 了，让整杯茶看起来更加的真实，css 代码如下：

.container .cup .top .vapour {
    position: relative;
    display: flex;
    z-index: 1;
    padding: 0 20px;
}
.container .cup .top .vapour span {
    position: relative;
    bottom: 50px;
    display: block;
    margin: 0 2px 50px;
    min-width: 8px;
    height: 120px;
    background: #fff;
    border-radius: 50%;
    animation: animate 5s linear infinite;
    opacity: 0;
    filter: blur(8px);
    animation-delay: calc(var(--i) * -0.5s);
}
@keyframes animate {
    0% {
        transform: translateY(0) scaleX(1);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: translateY(-150px) scaleX(5);
    }
    95% {
        opacity: 0;
    }
    100% {
        transform: translateY(-300px) scaleX(10);
    }
}