CSS中调皮逃跑的小方块：让你的网页动起来

2023-11-09 21:17:08

CSS中的调皮逃跑小方块

你想让你的网站更具吸引力、更具互动性吗？CSS动画是实现这一目标的利器。本文将指导你使用CSS创建一种调皮的逃跑方块效果，让你的网页栩栩如生。

HTML结构

首先，我们需要一个HTML结构来容纳我们的动画方块。创建一个div元素作为容器，并为其分配一个类名，例如"cube"。

<div class="cube"></div>

CSS样式

接下来，我们使用CSS来定义方块的样式和动画。首先，设置方块的基本属性，包括尺寸、颜色和位置：

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

动画效果

现在是让方块动起来的时候了！使用CSS的@keyframes规则定义一个关键帧动画，其中包含方块移动、旋转和消失的序列。

@keyframes escape {
  0% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }

  25% {
    transform: translate(200px, 200px) rotate(45deg);
  }

  50% {
    transform: translate(400px, 0) rotate(90deg);
  }

  75% {
    transform: translate(600px, -200px) rotate(135deg);
  }

  100% {
    transform: translate(800px, 0) rotate(180deg);
    opacity: 0;
  }
}

将动画应用到方块

最后，我们使用animation属性将定义的动画应用到方块元素。设置动画的持续时间、延迟和次数，以控制动画的行为。

.cube {
  animation: escape 5s infinite;
  animation-delay: 2s;
}

添加阴影（可选）

为了增强动画效果，我们可以在方块后面添加一个阴影，给人一种深度和运动感。使用box-shadow属性创建阴影：

.cube:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px #000;
  transform: translate(10px, 10px);
}