CSS 三角函数：打造简洁时钟和图像库的利器

前端

2023-11-23 07:50:56

CSS三角函数：开启设计领域的无限可能

导言

曾经，CSS仅限于基本的样式操作，如颜色、字体和边框。但随着技术的不断发展，CSS三角函数的出现为设计界带来了一场革命，开辟了利用数学创造令人惊叹视觉效果的无限可能。

三角函数的魅力

三角函数，包括sin()和cos()，是数学中的基本函数，用于三角形的边长和角之间的关系。通过将这些函数应用于CSS样式，我们可以操纵元素的位置、旋转和大小，从而实现复杂的视觉效果。

打造优雅时钟

让我们从一个优雅的时钟开始，利用sin()函数来绘制指针的轨迹。代码如下：

.clock {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

.clock-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom;
  transform: rotate(0deg);
  background-color: black;
  width: 2px;
  height: 100px;
}

利用JavaScript，我们可以根据实际时间动态更新指针的角度：

const clock = document.querySelector('.clock');
const hand = clock.querySelector('.clock-hand');

function updateTime() {
  const now = new Date();
  const seconds = now.getSeconds();
  const minutes = now.getMinutes() + seconds / 60;
  const hours = now.getHours() + minutes / 60;

  const secondsAngle = seconds * 6;
  const minutesAngle = minutes * 6 + seconds / 10;
  const hoursAngle = hours * 30 + minutes / 2;

  hand.style.transform = `rotate(${secondsAngle}deg)`;
}

setInterval(updateTime, 1000);

创建动态图片库

接下来，我们将使用cos()函数创建一个动态图片库，让图片随着鼠标移动而优雅地排列。代码如下：

.image-gallery {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.image-gallery-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.image-gallery-image {
  width: 200px;
  height: 200px;
  background-color: gray;
  margin: 10px;
  border-radius: 10px;
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
}

通过JavaScript，我们可以将鼠标位置与图片的平移量相关联：

const gallery = document.querySelector('.image-gallery');
const galleryContainer = gallery.querySelector('.image-gallery-container');
const images = galleryContainer.querySelectorAll('.image-gallery-image');

gallery.addEventListener('mousemove', (e) => {
  const mouseX = e.clientX;
  const galleryWidth = gallery.clientWidth;
  const galleryHalfWidth = galleryWidth / 2;

  const offset = (mouseX - galleryHalfWidth) / galleryHalfWidth;
  galleryContainer.style.transform = `translateX(${offset * 100}px)`;
});