前端小练习之(肝累了?喝杯茶缓缓)

        好久不见,在这个内卷的时代,此时此刻,想来屏幕前的你也是内卷大军中的一员猛将,哈哈,想想就肝疼.还是喝杯茶缓缓吧.

        今天给大家带来的前端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);
  }
}