坤坤“铁山靠”重现江湖，用CSS展现舞蹈的魅力

2023-11-24 08:51:03

用 CSS 实现蔡徐坤的铁山靠，让你的网页“动”起来

简介

蔡徐坤的铁山靠动作早已火遍网络，成为他标志性的舞台表演之一。今天，我们就来用 CSS 帮你轻松复刻这一经典动作，让你的网页也动感十足！

步骤 1：构建基础框架

首先，我们需要创建放置动画的基本 HTML 结构：

<div id="iron-shoulder"></div>

这个 div 元素将作为我们动画的容器。

步骤 2：添加 CSS 样式

接下来，为这个 div 元素添加 CSS 样式，定义动画的属性，包括持续时间、方向和速度：

#iron-shoulder {
  width: 200px;
  height: 200px;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: iron-shoulder 1s infinite alternate;
}

@keyframes iron-shoulder {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(200px);
  }

  100% {
    transform: translateX(0);
  }
}

这段代码定义了一个持续时间为 1 秒，无限循环的动画。动画方向为左右移动，速度恒定。

步骤 3：添加交互

为了让动画更生动，我们可以添加一些交互，例如：

鼠标悬停时暂停动画
鼠标移出时恢复动画
点击时改变动画方向

document.getElementById("iron-shoulder").addEventListener("mouseover", function() {
  this.style.animationPlayState = "paused";
});

document.getElementById("iron-shoulder").addEventListener("mouseout", function() {
  this.style.animationPlayState = "running";
});

document.getElementById("iron-shoulder").addEventListener("click", function() {
  this.style.animationDirection = this.style.animationDirection === "normal" ? "reverse" : "normal";
});