摄氏40度，巧用 repeating-linear-gradient 实现夏日冰淇淋

“这是我参与更文挑战的第21天，活动详情查看：更文挑战”

热到冒烟的天气，温度已经变得毫无道理。

思聪童鞋按耐不住夏日的炎热，『芳心』蠢蠢欲动。

但结局成为街头小巷的谈资，终于马失前蹄，喜闻乐道的被反杀了。

假若思聪童鞋会说冰淇淋情话：

思聪：你吃冰淇淋的时候不能笑哦
一宁：为啥？
思聪：你一笑它就融化了。

结局还会一样吗？

whatever，虽然没有思聪的少爷命，但不妨碍我们自己用 css 做一个冰淇淋，~~关键时刻说不定真能取悦对象~~

冰淇淋主体结构

基础 html 结构：

<div class="container">
  <div class="icecream">
    <div class="cream">
      <div class="texture"></div>
    </div>
    <div class="stick"></div>
  </div>
</div>

基础 css 样式：

body, html { height: 100%; }

/* 背景容器 */
.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #33485F;
}

/* 奶油 */
.cream {
  position: relative;
  width: 190px;
  height: 260px;
  border-radius: 80px 80px 10px 10px;
  overflow: hidden;  
  background-color: #efc531;  
}

/* 奶油左侧点缀 */
.cream:after {
    content: '';
    position: absolute;
    left: 21px;
    bottom: 20px;
    width: 20px;
    height: 170px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.5); 
}

/* 木棍 */
.stick {
  width: 57px;
  height: 86px;
  background: #E09C5F;
  border-radius: 0 0 25px 25px;
  display: block;
  margin: 0 auto;
}

/* 木棍点缀 */
.stick:before {
  display: block;
  content: '';
  width: 100%;
  height: 24px;
  background: #8D613B;
}

实现效果如下：

冰淇淋纹路

新增 css 纹路效果，主要是利用 repeating-linear-gradient。

/* 纹路 */
.texture {
  position: relative;
  top: 0%;
  left: -40%;
  width: 180%;
  height: 120%;
  
  background-image: 
    repeating-linear-gradient(
      #30dcf6 0%,
      #30dcf6 25%,
      #f2d200 25%,
      #f2d200 50%
    );
}

CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的 <image>，这是一个类似 linear-gradient 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个 <gradient> 数据类型的对象, 这是一个特殊的<image>类型。

repeating-linear-gradient 可以通过 repeating-linear-gradient 这个链接在线尝试效果。

本例子当中，默认沿着竖直方向重复渐变，一个 <image> 渐变图像占竖直高度的50%（意味着可以重复2次），内部每个色块（#30dcf6，#f2d200）各占 25%。所以如果没有 .cream 这个父元素 over-flow: hidden 这行 css 的话，预览效果是这样的。

冰淇淋动画

/* 纹路 */
.texture {
  /* 略 */
  animation: flavours 100s linear infinite;
  transform: rotate(155deg);
}

@keyframes flavours {
  to {
    background-position: 0 -1000vh;
  }
}

可以看到，主要原理是将纹路旋转，再通过改变背景位置，开启无限循环。效果如下：

附 codepen 源码， css icecream, css 冰淇淋

最后

写文不易，欢迎点赞、收藏、关注。其他可能你有兴趣的文章。

欢迎关注同名公众号【对马弹琴】。