快看！CSS 绘制的三只小鸟 Button，炒鸡可爱！

前端

2023-12-18 22:59:34

CSS：前端工程师的创意源泉

身处前端开发的领域，CSS无疑是我最喜悦的源泉。这份快乐如同孩童时代搭建积木城堡或挥洒画笔的创作，充斥着创造力和成就感。

回忆起前不久亲手勾勒的一个Button，一只灵动的三只小鸟，仿佛唤醒了儿时艺人的情怀，以CSS为笔，在屏幕上描绘着想象的画卷。

CSS绘制三只小鸟Button：简单且乐趣无穷

如果你也想领略这份喜悦，不妨跟随我的步骤，一起绘制一个三只小鸟Button吧！

步骤1：构建HTML结构

首先，需要创建一个HTML结构来承载我们的Button：

<button class="btn">
  <span class="bird-1"></span>
  <span class="bird-2"></span>
  <span class="bird-3"></span>
</button>

在这个HTML结构中，<button>标签代表我们的Button，而<span>标签则用于展示Button中的三只小鸟。

步骤2：添加CSS样式

接下来，使用CSS样式为Button和三只小鸟赋予视觉效果：

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  cursor: pointer;
}

.bird-1 {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 20px;
  height: 20px;
  background-color: #f00;
  border-radius: 50%;
}

.bird-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #0f0;
  border-radius: 50%;
}

.bird-3 {
  position: absolute;
  top: 80%;
  left: 80%;
  width: 20px;
  height: 20px;
  background-color: #00f;
  border-radius: 50%;
}