likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 28

前言

大家好,我是爱吃鱼的桶哥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-leftborder-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-gradientradial-gradient 属性,这两个属性主要是用于设置渐变,并且通过 beforeafter 伪类,给整个杯托绘制了一层阴影,看起来更加真实,实现的效果如下所示:

纯 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);
    }
}

我们给每个 span 标签都添加了一个 animate 动画,让它的透明度和 Y轴 的偏移发生改变,这样就能实现热气腾腾的效果了。最终的完整代码及完整效果可以在这里进行查看:

总结

之前从未想过,用纯 CSS 也能实现这么真实的效果。通过这杯秋天的下午茶,让我对 CSS 的学习和理解有了更深的感悟,CSS 真的博大精深。

最后,如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,谢谢大家

往期回顾

使用纯 CSS 实现一个动态技能进度条

『 纯 CSS 实现』使用 CSS 开发一个伪 3D 旋转圆柱

使用 CSS 编写一个丰富多彩的九宫格菜单

『 纯 CSS 实现』使用 CSS 开发一个炫酷旋转小球

哇哦,icon 还能这么玩?

『 实战』从0到1,带你开发开发一款令人惊叹的时钟特效

CSS 复刻 iPhone14,并接到了优弧的电话😏,还不快接电话?

今年中秋的月亮真漂亮~

『 纯 CSS 实现』哇塞,彩虹🌈还能这么玩?

『 禁止吸烟🚭』纯 CSS 实现 | 禁烟也能做的这么酷炫

送你一个可爱的大圆脸😁,速来~

这么炫酷的 3D Menu 效果,真的不来看看?

产品经理:你这个效果不行,我想要一个五彩斑斓的黑!我:。。。

转载自:https://juejin.cn/post/7160455183191769124
评论
请登录