用纯 CSS 制作一个充满节日气氛的圣诞礼物动画

2023-09-23 23:11:02

每到圣诞节，人们都会被那种温馨喜庆的气氛所感染。而一个生动逼真的圣诞礼物动画，则可以将这种氛围推向高潮。CSS 动画凭借其强大的表现力，可以轻松实现各种生动效果，打造令人印象深刻的圣诞礼物动画。

CSS 关键帧

CSS 关键帧是动画不同阶段的样式规则集合。每个关键帧都指定了动画特定时刻的元素样式。通过将关键帧连接起来，就可以创建流畅的动画效果。

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在这个例子中，@keyframes spin 规则了一个元素从 0 度旋转到 360 度的动画。from 和 to 指定了动画的开始和结束状态。

动画属性

animation 属性将关键帧动画应用于元素。它指定动画的名称、持续时间、延迟、迭代次数和方向。

animation: spin 5s infinite alternate;

在这个例子中，animation 属性告诉浏览器应用名为 spin 的动画，持续时间为 5 秒，无限次重复，并交替播放。

创建圣诞礼物动画

HTML 结构

<div class="gift-box">
  <div class="ribbon"></div>
  <div class="bow"></div>
  <div class="lights"></div>
  <div class="snow"></div>
</div>

CSS 样式

.gift-box {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
  animation: spin 5s infinite alternate;
}

.ribbon {
  width: 100px;
  height: 20px;
  background-color: gold;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.bow {
  width: 50px;
  height: 50px;
  background-color: gold;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translate(-50%, 0);
}

.lights {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.light {
  width: 10px;
  height: 10px;
  background-color: yellow;
  position: absolute;
  animation: blink 1s infinite alternate;
}

.snow {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.snowflake {
  width: 10px;
  height: 10px;
  background-color: white;
  position: absolute;
  animation: fall 2s infinite linear;
}

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fall {
  from {
    top: -10px;
  }
  to {
    top: 200px;
  }
}