林语堂曾用两个字描写过夏天——“孤独”。这两个字拆开看，有小孩，有水果，有走兽，有蚊蝇。除了酷热，夏天是所有美好的代名词，好在有各种冰爽冷饮能够续命。今天我们就用代码为原料，做一杯别具一格的冷饮。

成品展示

码上掘金

烹饪前准备

烹饪工具

  1. 一个上了一天班昏昏欲睡的码农
  2. 烹饪台：码农的电脑
  3. 搅拌机：编辑器

食材

  1. CSS
  2. HTML

开始烹饪

1. 准备一个杯子

使用 grid 布局的 align-items: center; justify-content: center; 属性使被子垂直居中，当然也可以用一行代码：place-item:center。

之后就是用 :before,:after 伪元素为被底添加一些细节。如杯底的颜色，还设置 border 画了一个扇形。

看看我们的杯子吧：

image.png

html

    <div class="wrapper">
      <div class="cooltea"></div>
    </div>

css

.wrapper {
  display: grid;
  align-items: center;
  justify-content: center;
}

.cooltea {
  position: relative;
  width: 300px;
  height: 300px;
  border: 20px solid #fff;
  border-radius: 50%;
}
.cooltea:before {
  position: absolute;
  z-index: -2;
  width: 0;
  height: 0;
  content: '';
  border-top: 150px solid #cfe7f5;
  border-right: 150px solid #e2e9ed;
  border-bottom: 150px solid #cfe7f5;
  border-left: 150px solid #cfe7f5;
  border-radius: 150px;
}
.cooltea:after {
  position: absolute;
  z-index: -1;
  top: 70px;
  right: 70px;
  bottom: 70px;
  left: 70px;
  content: '';
  border-radius: 50%;
  background: #5db8b6;
}

2. 注水加冰

冰块是几个由正方形构成，水面效果是一个浮动的圆，通过 transform: translatex(10px); 来改变圆形的位置，在不同阶段使圆形处于不同的位置就可以模拟一个浮动的效果了。同理，为了使画面更有层次感冰块的动画使用旋转的方式，transform: rotate(360deg);

看看效果

image.png

html

<div class="liquid"></div>
<div class="ice-cubes">
  <div class="ice-cube ice-cube-1"></div>
  <div class="ice-cube ice-cube-2"></div>
  <div class="ice-cube ice-cube-3"></div>
</div>

css

.cooltea .liquid {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  transform: translatex(-15px);
  -webkit-animation: liquid 1.5s ease-in-out infinite;
  animation: liquid 1.5s ease-in-out infinite;
  border-radius: 50%;
  background: rgba(139, 233, 193, 0.6);
}
.cooltea .ice-cubes {
  transform-origin: 47% 65%;
  -webkit-animation: ice-cubes 8s ease-in-out infinite;
  animation: ice-cubes 8s ease-in-out infinite;
}
.cooltea .ice-cube {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: #fff;
}
.cooltea .ice-cube.ice-cube-1 {
  transform: translate(100px, 70px) rotate(10deg);
  background: #bcdbce;
}
.cooltea .ice-cube.ice-cube-2 {
  position: relative;
  z-index: 2;
  transform: translate(160px, 100px) rotate(30deg);
}
.cooltea .ice-cube.ice-cube-3 {
  transform: translate(40px, 0) rotate(-30deg);
}
@keyframes ice-cubes {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes liquid {
  from {
    transform: translatex(-15px);
  }
  50% {
    transform: translatex(15px);
  }
  to {
    transform: translatex(-15px);
  }
}

3. 柠檬与茶叶

茶叶的不规则效果主要是通过border-radius来实现的，在长方形的上左下右设置border-radius与div的宽度等宽即可。柠檬里边的籽籽同样如此。

效果

image.png

html

<div class="lemon-slice"></div>
<div class="leaves">
  <div class="leave leave-1"></div>
  <div class="leave leave-2"></div>
  <div class="leave leave-3"></div>
</div>

css

.cooltea .leave {
  width: 100px;
  height: 70px;
  border-radius: 100px 0;
  background: #19ab87;
}

.cooltea .lemon-slice:after {
  top: 30px;
  left: 30px;
  transform: rotate(90deg);
}
.cooltea .lemon-slice:before {
  top: 30px;
  right: 30px;
  transform: rotate(-40deg);
}

4.插入吸管

吸管的制作同样是利用了伪元素，之后给杯子加上阴影，一杯清爽的加冰柠檬绿茶就做好了。快动手自己尝试一下吧。

效果

image.png

html

<div class="straw"></div>
<div class="straw-surface"></div>
<div class="shadow"></div>

css

.cooltea .straw {
  position: absolute;
  z-index: 1;
  bottom: 70px;
  left: 50%;
  width: 20px;
  height: 0;
  transform: translatex(-50%);
  border-top: 300px solid #ff7647;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}