61.纯 CSS 创作一只咖啡壶(这个不好看）

原文地址：https://segmentfault.com/a/1190000015376202

感想： 好像不像呀，啊啊啊。伪元素、定位、动画、width和height包括内边距|边框|内容区。

HTML code：

<!-- 定义 dom，容器中包含 1 个元素表示壶体，其中再包含 1 个元素表示壶把手 -->
<div class="container">
    <div class="pot">
        <div class="handle"></div>
    </div>
</div>

CSS code：

html, body {
    margin: 0;
    padding: 0;
}
*,
*::before,
*::after{
    /* 设置元素的width、height包括内边距、边框、内容区 */
    box-sizing: border-box;
}
/* 设置body的子元素水平垂直居中 */
body{
    height: 100vh;
    display: flex;
    /* 排不下就换行 */
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(to right bottom, silver, dimgray);
}
/* 设置容器样式 */
.container {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: snow;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: pouring 3s linear infinite alternate;
}
/* 再用伪元素给壶加上光影 */
.container::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    border: 3px solid transparent;
    border-left-color: white;
    border-radius: 50%;
    left: 40px;
    top: 40px;
    transform: rotate(-10deg);
}
@keyframes pouring {
    0%, 25% {
        transform: rotate(0deg);
    }

    75%, 100% {
        transform: rotate(-45deg);
    }
}
.pot {
    position: relative;
    width: 85px;
    height: 85px;
    /* 阴影 */
    border-right: 5px solid steelblue;
    border-radius: 50%;
    background-color: deepskyblue;
}
/* 用伪元素画出壶的上半部分 */
.pot::before {
    content: '';
    position: absolute;
    width: 85px;
    height: 43px;
    border-right: 5px solid palevioletred;
    border-radius: 43px 43px 0 0;
    background-color: hotpink;
}
/* 用伪元素画出壶嘴 */
.pot::after {
    content: '';
    width: 43px;
    height: 10px;
    position: absolute;
    left: 21px;
    top: -3px;
    background-color: hotpink;
}
/* 画出把手横向的部分 */
.pot .handle {
    width: 83px;
    height: 7px;
    border-radius: 7px;
    background-color: black;
    position: absolute;
    left: 13px;
    top: 12px;
}
/* 用伪元素画出把手竖向的部分： */
.pot .handle::before {
    content: '';
    width: 7px;
    height: 50px;
    border-radius: 7px;
    background-color: black;
    position: absolute;
    left: calc(85px - 7px);
}