我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

打糍耙

引言

正想着这周六日去哪里过中秋！

突然回想起来上周五晚上去吃的酸菜鱼，那个时候点的一份 红糖糍耙

很软很好吃，但是这周六日肯定不去。所以画出来一个糍耙，纪念下得了！

项目截图

打糍耙实现

1.首先画出一个桶

打糍耙，肯定需要一个桶，我们这里先整出来一个

<div id="Cylinder"></div>

#Cylinder {
    position: relative;
    width: 200px;
    height: 150px;
    margin: 20px 0;
    background: #a9a8ab;
    border-radius: 50% / 10%;
    color: white;
    text-align: center;
    text-indent: 0.1em;
}

可以看到这个桶目前没有腰（比较瘦），我们将它的腰给露出来，能够更像一个桶

我们可以给这个桶，添加 伪元素

  #Cylinder:before {
    content: '';
    position: absolute;
    z-index: 99;
    top: 10%;
    bottom: 10%;
    right: -5%;
    left: -5%;
    background: inherit;
    border-radius: 11% / 50%;
  }

2.填充糍耙

都知道打糍耙的时候，桶里面装的都是白白的

所以我们在 绝对定位 来调整下位置，可以实现填充效果，并且 立体感 就拉满了

  <div id="Cylinder">
    <div class="oval"> </div>
  </div>
  
  .oval {
    position: absolute;
    z-index: 0;
    width: 200px;
    height: 100px;
    background: #fff;
    border-radius: 100px / 50px;
  }

3.外观样式

上面填充完毕后，可以看到还是很不错的

但是总觉得缺少了些什么！

为了不那么单调，我添加了两个眼睛，一个邪魅一笑！

  <div class="eyes">
    <div class="eye1"></div>
    <div class="eye2"></div>
  </div>
  <div class="smile"> </div>
  
  
  .eyes {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
  }
  .eye1 {
    width: 30px;
    height: 30px;
    background: #000;
    border-radius: 50%;
    margin-right: 10px;
  }
  .eye2 {
    width: 30px;
    height: 30px;
    background: #000;
    border-radius: 50%;
    margin-left: 10px;
  }
  .smile {
    position: absolute;
    z-index: 999;
    left: 61px;
    top: 24px;
    width: 80px;
    height: 104px;
    border-radius: 50%;
    box-shadow: 15px 15px 0 0 #000;
    transform: rotate(42deg);
  }

嗯，这效果就看起来舒服多了

剩下就是生成，打糍耙的工具

4.工具

工具肯定都是木头的颜色🥖，这里填充下相关的颜色

  <div class="club1"> </div>
  
  .club1 {
    position: absolute;
    z-index: 999;
    left: 68px;
    top: -195px;
    width: 27px;
    height: 200px;
    background: #edc781;
    transform-origin: -80px;
    transform: rotate(-90deg);
    transform-style: preserve-3d;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
  }

添加 伪元素，再来一个棒子

.club1:before {
    background: #e0be95;
    content: '';
    height: 20px;
    left: -175px;
    position: absolute;
    top: 23px;
    width: 213px;
    transform: translateZ(-1px);
}

我这里实现两个棒子，右边一个对称即可

并且通过 transform-style 来处理层级问题

transform-style: preserve-3d;
transform: translateZ(-1px);

5.动画

最后将我们的工具，进行捶打的效果即可。

这里通过添加 animation 动画

animation: move1 1s ease -0.5s infinite;

@keyframes move1 {
    0% {
      transform: rotate(-90deg);
    }

    50% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-90deg);
    }
  }

最终效果放到 码上掘金 上面了，小东西，开心一下！

code.juejin.cn/pen/7139819…

总结

这里用到了很多 css 的样式知识点

定位、伪元素、border-radius、transform 以及动画的使用

纯 css 实现 "打糍耙"

打糍耙

引言