天气太热请大家吃雪糕

“我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！”

早上看澎湃新闻说南方多地体感或超60℃，为兄弟们身体考虑给大家送上纯css手动打造的雪糕

雪糕主体代码如下：

为了凸显雪糕的诱人好吃,想要一个流口水的效果

口水样式的代码

.mouth__saliva {
    width: 1.5rem;
    height: 2.5rem;
    background: #ffffff;
    border-radius: 1rem;
    position: absolute;
    transform-origin: 0 0;
    z-index: 0;
}

口水的效果是但是它只是一个静态样式,需要把它变成流动效果

这边采用css animation 中的贝塞尔曲线(cubic-bezier)

什么是贝塞尔曲线呢？

是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

贝塞尔曲线是由4个点构成的一条线，可能是任意形状的线。

animation: saliva 0.75s cubic-bezier(0.4, 0, 1, 1) infinite alternate;

然后如果鼠标移动到雪糕本体上，需要能够添加一个左右晃动的效果

这边使用的 CSS中 @keyframes 关键帧

两个关键帧

动画开始50%时 沿着x轴旋转角度为-5deg

动画开始100%时 沿着x轴旋转角度为 1deg

@keyframes move {
    50% {
        transform: translateX(-0.5rem) rotate(-5deg);
    }

    100% {
        transform: translateX(0.25rem) rotate(1deg);
    }
}

整体雪糕代码

<div class="container">
  <div class="icecream">
    <div class="icecream-body">
      <div class="icecream-body__slice"></div>
      <div class="icecream-body__slice"></div>
      <div class="icecream-body__slice"><span class="eye"><span class="eye__retina"></span></span>
          <div class="mouth"><span class="mouth__lip"></span><span class="mouth__saliva"></span></div><span
              class="eye"><span class="eye__retina"></span></span>
      </div>
      <div class="icecream-body__slice"></div>
    </div>
  <div class="icecream-stick"></div>
  </div>
</div>

@keyframes move {
    50% {
        transform: translateX(-0.5rem) rotate(-5deg);
    }

    100% {
        transform: translateX(0.25rem) rotate(1deg);
    }
}

@keyframes eyes {
    0% {
        transform: scaleY(1) translate(0, 0);
    }

    10% {
        transform: scaleY(-1) translate(0, -0.5rem);
    }

    100% {
        transform: scaleY(-1) translate(0, -0.5rem);
    }
}

@keyframes lip {
    to {
        transform: scaleY(0.7);
    }
}

@keyframes saliva {
    0% {
        transform: scaleY(1.5);
    }

    50% {
        transform: scaleY(1.75);
    }

    75% {
        transform: scaleY(1.6);
    }

    100% {
        transform: scaleY(2);
    }
}

*,
*:after,
*:before {
    box-sizing: border-box;
}

html {
    font-size: 50%;
    overflow: hidden;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #f5f4ed;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container .icecream {
    width: 27rem;
    height: 58rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container .icecream:hover {
    animation: move 1s ease-in-out infinite alternate;
}

.container .icecream:hover .icecream-body__slice:nth-child(3) .eye {
    animation: eyes 1s ease-in infinite alternate;
}

.container .icecream:hover .icecream-body__slice:nth-child(3) .mouth__lip {
    animation: lip 0.5s ease-in infinite alternate;
}

.container .icecream:hover .icecream-body__slice:nth-child(3) .mouth__saliva {
    opacity: 0;
}

.container .icecream .icecream-body {
    display: flex;
    flex-direction: column;
    height: 75%;
    width: 100%;
    border-radius: 27rem 27rem 6rem 6rem;
    border: 1.4rem solid #461b19;
    position: relative;
    overflow: hidden;
    box-shadow: 2.5rem 2.5rem 0 #d3cec4;
}

.container .icecream .icecream-body:before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 20rem 27rem 0 0;
    position: absolute;
    box-shadow: inset 1.8rem 0 0 rgba(255, 255, 255, 0.2);
}

.container .icecream .icecream-body:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 27rem 18rem 0 0;
    position: absolute;
    box-shadow: inset -2.4rem 0 0 rgba(0, 0, 0, 0.2);
}

.container .icecream .icecream-body__slice {
    display: flex;
    border-bottom: 1rem solid #461b19;
}

.container .icecream .icecream-body__slice:nth-child(2n-1) {
    height: 30%;
}

.container .icecream .icecream-body__slice:nth-child(2n) {
    height: 20%;
}

.container .icecream .icecream-body__slice:nth-child(1) {
    background: #a9d8ea;
}

.container .icecream .icecream-body__slice:nth-child(2) {
    background: #ab96db;
}

.container .icecream .icecream-body__slice:nth-child(3) {
    align-items: center;
    justify-content: center;
    background: #fcbad2;
}

.container .icecream .icecream-body__slice:nth-child(3) .eye {
    width: 2.8rem;
    height: 1.5rem;
    background: #461b19;
    border-radius: 2.8rem 2.8rem 0 0;
    position: relative;
    margin-bottom: 3.5rem;
    transform-origin: 0 50%;
}

.container .icecream .icecream-body__slice:nth-child(3) .eye:before {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    background: #461b19;
    border-radius: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(0, 0.4rem);
    position: absolute;
    z-index: 1;
}

.container .icecream .icecream-body__slice:nth-child(3) .eye:after {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    background: #461b19;
    border-radius: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(0, 0.4rem);
    position: absolute;
    z-index: 1;
}

.container .icecream .icecream-body__slice:nth-child(3) .eye__retina {
    width: 1rem;
    height: 1rem;
    background: #fcbad2;
    border-radius: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-0.5rem, 0.5rem);
    z-index: 1;
}

.container .icecream .icecream-body__slice:nth-child(3) .mouth {
    position: relative;
    width: 3rem;
    height: 2.8rem;
    margin: 0 1rem;
}

.container .icecream .icecream-body__slice:nth-child(3) .mouth__lip {
    width: 100%;
    height: 100%;
    background: #461b19;
    border-radius: 30% 30% 50% 50% / 29% 29% 65% 65%;
    position: absolute;
    z-index: 1;
}

.container .icecream .icecream-body__slice:nth-child(3) .mouth__saliva {
    width: 1.5rem;
    height: 2.5rem;
    background: #ffffff;
    border-radius: 1rem;
    position: absolute;
    transform-origin: 0 0;
    z-index: 0;
    animation: saliva 0.75s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}

.container .icecream .icecream-body__slice:nth-child(4) {
    background: #ffffd2;
    border-bottom: 0;
}

.container .icecream .icecream-stick {
    display: flex;
    height: 25%;
    width: 10rem;
    border-radius: 0 0 10rem 10rem;
    border: 1.7rem solid #461b19;
    border-top: 0;
    background: #ffd379;
    position: relative;
    box-shadow: 2.5rem 2.4rem 0 #d3cec4;
}

.container .icecream .icecream-stick:before {
    content: "";
    width: 100%;
    height: 3.5rem;
    background: #d9ae58;
    position: absolute;
}