萌新小白入门切图入门指引，趣味性十足，让你爱不释手！

前端

2023-08-25 00:43:24

切图入门：趣味十足的编程之旅

初学者切图入门

切图已成为前端开发人员必备技能，它能快速实现设计稿，提高代码质量和可维护性。本文将通过一个趣味十足的切图小 demo，带领大家轻松入门。

趣味切图小 demo

效果图：

当鼠标悬停在笑脸上时，小嘴巴会变大，表示开心。

分析：

结构： 页面包含容器、笑脸、眼睛和嘴巴元素。
样式： 笑脸为圆形，眼睛为黑色圆点，嘴巴为红色小横条。
交互： 鼠标悬停在笑脸上时，嘴巴宽度变大。

实现：

HTML 结构： 创建 HTML 元素表示不同部分。
CSS 样式： 设置元素尺寸、颜色、位置和圆角。
交互效果： 使用 JavaScript 监听鼠标悬停事件，动态改变嘴巴宽度。

代码示例：

<div class="container">
  <div class="face">
    <div class="eyes">
      <div class="eye left"></div>
      <div class="eye right"></div>
    </div>
    <div class="mouth"></div>
  </div>
</div>

.container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}

.face {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.eyes {
  width: 50px;
  height: 20px;
  margin: 0 auto;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.eye {
  width: 10px;
  height: 10px;
  background-color: #000000;
  border-radius: 50%;
  position: absolute;
}

.eye.left {
  left: 25%;
}

.eye.right {
  left: 75%;
}

.mouth {
  width: 10px;
  height: 10px;
  background-color: #ff0000;
  border-radius: 5px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 获取 face 元素
const face = document.querySelector('.face');

// 获取 mouth 元素
const mouth = document.querySelector('.mouth');

// 监听 face 元素的鼠标移入事件
face.addEventListener('mouseover', () => {
  // 将 mouth 元素的宽度设置为 30px
  mouth.style.width = '30px';
});

// 监听 face 元素的鼠标移出事件
face.addEventListener('mouseout', () => {
  // 将 mouth 元素的宽度设置为 10px
  mouth.style.width = '10px';
});