儿时的记忆——绿色冰棒

前端

2023-09-04 03:10:55

当秋风吹过，阳光洒下，夏天就渐渐地走远了。寒冷的冬天，我们总是少了些许消暑的好伙伴。不过，兒时的記憶中，有一种绿色的小冰棒，卻是無論在哪個季節，都能喚起我的美好回憶。

记得小时候，每到夏天，我总是会央求妈妈带我去买一根冰棒。那时的冰棒很便宜，只要几毛钱一根。我最喜欢吃的就是绿色冰棒，它有一种清凉爽口的味道，讓人回味无穷。

如今，虽然市面上有各种各样的冰激凌和雪糕，但我还是最喜欢儿时記憶中的绿色冰棒。它虽然很簡單，但卻是那個時代最美好的回忆。

CSS3的绿色冰棒

為了讓更多的人和我一起体验兒时的記憶，我决定用CSS3制作一个绿色冰棒。CSS3是一种很强大的样式语言，它可以让我们制作出各种各样的动画效果。

下面，我将为大家介绍一下如何使用CSS3制作一个绿色冰棒。

创建HTML结构

<div class="ice-cream">
  <div class="stick"></div>
  <div class="ice"></div>
</div>

添加CSS样式

.ice-cream {
  width: 100px;
  height: 150px;
  position: relative;
}

.stick {
  width: 20px;
  height: 50px;
  background-color: brown;
  position: absolute;
  top: 50px;
  left: 40px;
}

.ice {
  width: 80px;
  height: 100px;
  background-color: green;
  position: absolute;
  top: 0;
  left: 10px;
}

添加CSS3动画效果

.ice-cream {
  animation: melt 5s infinite alternate;
}

@keyframes melt {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }

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

预览效果

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="ice-cream">
    <div class="stick"></div>
    <div class="ice"></div>
  </div>
</body>
</html>