玩味鼠标，享受视觉盛宴：HTML和CSS打造交互式动画小方块

2023-12-09 23:43:26

探索互动网页设计的迷人世界：鼠标微动，点亮视觉盛宴

释放代码的优雅：纯样式互动

踏入网页设计的广阔天地，我们无时无刻不在追寻更具创造力、更具交互性的视觉体验。本次旅程，我们将深入探索一种仅需纯洁 HTML、CSS 和 Sass 预处理器的纯样式交互技术。借助 Sass 的简洁性和可扩展性，我们将携手创造一个令人惊叹的视觉盛宴。

HTML 的舞台：构建交互框架

HTML 为我们的交互勾勒出框架。一个简单的方块，静待鼠标的轻抚。现在，让我们为它披上交互的外衣。

<div class="container">
  <div class="square"></div>
</div>

CSS 的灵魂：赋予灵动之姿

CSS 是舞台的灵魂，赋予方块生命与律动。通过精心编排的代码，方块将随着鼠标的移动改变尺寸和位置，周围方块也随之响应，背景颜色更是随心所欲。

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #fff;
}

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

.container:hover .square {
  transform: scale(2) translate(-50%, -50%);
}

.container:hover .square:hover {
  transform: scale(3) translate(-50%, -50%);
  background-color: #ff0000;
}

.container:hover .square:not(:hover) {
  transform: scale(0.5);
}

Sass 的韵律：简化代码之美

作为 CSS 的延伸，Sass 为我们提供了更优雅的书写方式。通过变量、嵌套、运算等特性，代码变得更加简洁明了。

$square-size: 100px;
$square-color: #000;
$container-background: #fff;

.container {
  @include center-square($square-size);
  background-color: $container-background;
}

.square {
  width: $square-size;
  height: $square-size;
  background-color: $square-color;

  &:hover {
    @include scale(2);
    background-color: #ff0000;
  }

  &:not(:hover) {
    @include scale(0.5);
  }
}

@mixin center-square($size) {
  position: relative;
  width: $size;
  height: $size;
  margin: auto;
}

@mixin scale($scale-factor) {
  transform: scale($scale-factor);
}