好久不见,在这个内卷的时代,此时此刻,想来屏幕前的你也是内卷大军中的一员猛将,哈哈,想想就肝疼.还是喝杯茶缓缓吧.
今天给大家带来的前端CSS3小练习是你的熬夜搭档,各位熬夜内卷的必备饮品,没错,他就是——一杯热乎乎的茶。
效果图如下:
有没有瞬间觉得暖暖的,很贴心。
下面是制作过程:
第一步,我们得准备一个杯子放到屏幕中央,大小和颜色嘛,看大家喜好选择,我这里是一个280*300的杯子。
<!-- 外部容器 -->
<div class="container">
<!-- 杯身 -->
<div class="cup"></div>
</div>
杯体就是一个简单的矩形加底部圆角,然后通过CSS绘制出大致雏形,效果如下:
CSS代码。
*{
/* 初始化 */
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
/* flex布局让杯子居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #606d8b;
/*设置屏幕高度*/
min-height: 100vh;
}
.container{
position: relative;
top: 50px;
}
.cup{
position: relative;
width: 280px;
height: 300px;
/*杯子颜色*/
background: linear-gradient(to right,#f9f9f9,#dcdcdc);
/*杯子底部圆角*/
border-bottom-left-radius: 45%;
border-bottom-right-radius: 45%;
}
接着,我们来给杯体添加杯口,杯子没有口怎么能装茶对吧。
<div class="container">
<div class="cup">
<!-- 杯口 -->
<div class="top">
<!-- 杯口内壁 -->
<div class="circle"></div>
</div>
</div>
杯口就是绘制一个椭圆,即下图中红色边框部分。
CSS代码
.top{
/*绝对定位调整位置*/
position: absolute;
top: -30px;
left: 0;
width: 100%;
height: 60px;
/*杯口颜色*/
background: linear-gradient(to right,#f9f9f9,#dcdcdc);
/*圆角*/
border-radius: 50%;
}
/*杯口内壁部分*/
.circle{
position: absolute;
top: 5px;
left: 10px;
/*左右距离外壁各10px宽度,所以减去20px*/
width: calc(100% - 20px);
height: 50px;
background: linear-gradient(to left,#f9f9f9,rgb(235, 236, 236));
/*圆角*/
border-radius: 50%;
box-sizing: border-box;
}
目前杯子已经有了大致雏形,效果如下。
接下来,我们往杯子里倒点茶,茶不用倒得太满,所以我们给杯口留一点空间。效果如下:
<div class="container">
<div class="cup">
<div class="top">
<div class="circle">
<!-- 茶 -->
<div class="tea">
</div>
</div>
</div>
</div>
</div>
.tea{
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(#c57e65,#d88063);
border-radius: 50%;
/*让茶距离杯口20px*/
top: 20px;
left: 0;
}
茶有了,为了杯子不烫手,我们再给杯子添个把,也就是往外壁上添个半圆环。
<div class="container">
<div class="cup">
<div class="top">
<div class="circle">
<div class="tea">
</div>
</div>
</div>
</div>
<!-- 握把 -->
<div class="handle"></div>
</div>
.handle{
position: absolute;
width: 160px;
height: 180px;
border-radius: 50%;
border:25px solid #dcdcdc;
/*我们只需要半边,所以将左边和下边调为透明*/
border-left: 25px solid transparent;
border-bottom: 25px solid transparent;
/*调整合适的角度和位置*/
transform: rotate(42deg);
right: -70px;
top: 40px;
}
如图,这下我们杯子握把就有了,就不会烫手了,哈哈。
握把有了,这个杯茶就差不多完成了,为了效果更加好看点儿,我们再在杯子下面添个小托盘和阴影。
<div class="container">
<!-- 杯子底下的小托盘 -->
<div class="plate"></div>
<div class="cup">
<div class="top">
<div class="circle">
<div class="tea">
</div>
</div>
</div>
</div>
<div class="handle"></div>
</div>
/*托盘样式*/
.plate{
position: absolute;
width: 500px;
height: 200px;
background: linear-gradient(to right,#f9f9f9,#dcdcdc);
border-radius: 50%;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 35px 35px rgba(0, 0, 0, 0.2);
}
/*通过伪元素给托盘添加点内壁样式,这样显得立体点*/
.plate::before{
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: radial-gradient(#f9f9f9,#fff);
border-radius: 50%;
}
/*在中间给杯底添点儿阴影*/
.plate::after{
content: '';
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
background: radial-gradient(rgba(0, 0, 0, 0.2) 20%,#fff 50%);
border-radius: 50%;
}
这样基本就算完成了,不过天慢慢转凉了不是,茶还是喝热点比较好,我们最后再加点飘动的热气修饰,顺便简单调下味,让你的“秋天里的第一杯茶”变得更加暖暖的,哈哈。
热气部分我们可以通过使一些虚化的块元素,添加不断往上飘的动画就行了。
<!-- 茶上方飘动的热气 -->
<div class="vapour">
<!-- 定义 --i 属性 ,方便后面调整气体的延时飘动 -->
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
<span style="--i:4"></span>
<span style="--i:5"></span>
<span style="--i:6"></span>
<span style="--i:7"></span>
<span style="--i:8"></span>
<span style="--i:9"></span>
<span style="--i:10"></span>
<span style="--i:11"></span>
<span style="--i:12"></span>
<span style="--i:13"></span>
<span style="--i:14"></span>
<span style="--i:15"></span>
<span style="--i:16"></span>
<span style="--i:17"></span>
<span style="--i:18"></span>
<span style="--i:19"></span>
<span style="--i:20"></span>
</div>
在我们绘制完动画后,我们会发现,气体的状态有点不对,如下图:
因为每个气体块元素会按照我们定义的 --i 属性添加延时,这样就会使其依次逐个向上移动,最后形成上调效果, 此时我们只需随意打乱每个气体的块元素排放位置就行了。
<div class="vapour">
<span style="--i:10"></span>
<span style="--i:6"></span>
<span style="--i:11"></span>
<span style="--i:7"></span>
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
<span style="--i:9"></span>
<span style="--i:12"></span>
<span style="--i:15"></span>
<span style="--i:16"></span>
<span style="--i:4"></span>
<span style="--i:5"></span>
<span style="--i:19"></span>
<span style="--i:13"></span>
<span style="--i:17"></span>
<span style="--i:14"></span>
<span style="--i:8"></span>
<span style="--i:18"></span>
<span style="--i:20"></span>
</div>
这样如初始效果图一样的暖呼呼的热茶我们就完成了。来一杯吗,少年?
好了,这次的内容就到此为止了,拜拜。
源码附上:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/tea.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="plate"></div>
<div class="cup">
<div class="top">
<div class="vapour">
<span style="--i:10"></span>
<span style="--i:6"></span>
<span style="--i:11"></span>
<span style="--i:7"></span>
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
<span style="--i:9"></span>
<span style="--i:12"></span>
<span style="--i:15"></span>
<span style="--i:16"></span>
<span style="--i:4"></span>
<span style="--i:5"></span>
<span style="--i:19"></span>
<span style="--i:13"></span>
<span style="--i:17"></span>
<span style="--i:14"></span>
<span style="--i:8"></span>
<span style="--i:18"></span>
<span style="--i:20"></span>
</div>
<div class="circle">
<div class="tea">
<div class="sugar">
<div class="chocolate"></div>
</div>
</div>
</div>
</div>
</div>
<div class="handle"></div>
</div>
</body>
</html>
*{
/* 初始化 */
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
/* flex布局让杯子居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #606d8b;
min-height: 100vh;
}
.container{
position: relative;
top: 50px;
}
.cup{
position: relative;
width: 280px;
height: 300px;
background: linear-gradient(to right,#f9f9f9,#dcdcdc);
border-bottom-left-radius: 45%;
border-bottom-right-radius: 45%;
}
.top{
position: absolute;
top: -30px;
left: 0;
width: 100%;
height: 60px;
background: linear-gradient(to right,#f9f9f9,#dcdcdc);
border-radius: 50%;
}
.circle{
position: absolute;
top: 5px;
left: 10px;
width: calc(100% - 20px);
height: 50px;
background: linear-gradient(to left,#f9f9f9,rgb(235, 236, 236));
border-radius: 50%;
box-sizing: border-box;
overflow: hidden;
}
.tea{
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(#c57e65,#d88063);
border-radius: 50%;
top: 20px;
left: 0;
}
.tea::before{
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
border: 5px solid #c57e65;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
top: -2px;
filter: blur(2px);
}
.handle{
position: absolute;
width: 160px;
height: 180px;
border-radius: 50%;
border:25px solid #dcdcdc;
border-left: 25px solid transparent;
border-bottom: 25px solid transparent;
transform: rotate(42deg);
right: -70px;
top: 40px;
}
.plate{
position: absolute;
width: 500px;
height: 200px;
background: linear-gradient(to right,#f9f9f9,#dcdcdc);
border-radius: 50%;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 35px 35px rgba(0, 0, 0, 0.2);
}
.plate::before{
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: radial-gradient(#f9f9f9,#fff);
border-radius: 50%;
}
.plate::after{
content: '';
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
background: radial-gradient(rgba(0, 0, 0, 0.2) 20%,#fff 50%);
border-radius: 50%;
}
.vapour{
position: relative;
display: flex;
z-index: 1;
padding: 0 20px;
}
.vapour span{
position: relative;
min-width: 8px;
height: 120px;
background: #fff;
display: block;
margin: 0 2px 50px;
bottom: 50px;
border-radius: 50%;
opacity: 0;
animation: animate 5s linear infinite;
filter: blur(8px);
animation-delay: calc(var(--i) * 0.2s);
}
.sugar{
width: 100%;
height: 80px;
position: absolute;
border: 5px solid #FFF;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
top: 10px;
filter: blur(3px);
}
.chocolate{
width: 100%;
height: 80px;
position: absolute;
background-color: rgb(210, 154, 114);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
top: 4px;
filter: blur(4px);
}
.chocolate::before{
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
background-color: rgb(131, 45, 16);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
top: 8px;
}
@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(1);
}
}