用CSS写一只修勾，也不要抢，大家都有！

2024-01-30 17:02:22

现在大家都在讨论所谓“毛孩子”，说真的我就比较俗气，还是喜欢修勾勾和修毛毛。修勾勾：ruǎn ruǎn de；修毛毛：wāng wāng de。生活中的确需要一点可爱的元素，抚慰灵魂。但是修勾勾、修毛毛的质量参差不齐，想要体验好的，那几乎是不可避免要跟金钱、钞票挂钩，平民消费水平基本不太够。那我们怎么办呢？没事，今天我就用纯CSS搞一只修勾给大家分享，大家白嫖，但不要抢。

对，你没听错，这只修勾是用CSS写的，让大家见识一下CSS的强大之处。没有繁琐的步骤，也没有晦涩难懂的代码。准备好你的代码编辑器，让我们开始吧！

HTML结构

<div class="dog">
  <div class="head">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
  </div>
  <div class="body">
    <div class="leg left"></div>
    <div class="leg right"></div>
    <div class="tail"></div>
  </div>
</div>

CSS样式

.dog {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
}

.head {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  background-color: #000;
  border: 1px solid #fff;
  border-radius: 50%;
}

.eye {
  position: absolute;
  top: 20%;
  width: 10%;
  height: 10%;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
}

.eye.left {
  left: 20%;
}

.eye.right {
  right: 20%;
}

.nose {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  height: 20%;
  background-color: #000;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.mouth {
  position: absolute;
  top: 70%;
  left: 50%;
  width: 40%;
  height: 20%;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.body {
  position: absolute;
  bottom: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
}

.leg {
  position: absolute;
  top: 70%;
  width: 10%;
  height: 30%;
  background-color: #000;
  border: 1px solid #fff;
  border-radius: 50%;
}

.leg.left {
  left: 20%;
}

.leg.right {
  right: 20%;
}

.tail {
  position: absolute;
  top: 50%;
  right: 10%;
  width: 20%;
  height: 20%;
  background-color: #000;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: rotate(45deg);
}