css3做下拉动画效果 下拉菜单css3样式

CSS3可以通过使用transition和transform属性来实现下拉动画效果。transition属性可以定义元素在不同状态之间的过渡效果，而transform属性可以对元素进行旋转、缩放、倾斜或平移等变换操作。

下面是一个实现下拉菜单动画效果的示例代码：

HTML代码：

<div class="bf97-50ee-036e-20ae menu">
  <button class="50ee-036e-20ae-8a8a menu-btn">菜单</button>
  <ul class="036e-20ae-8a8a-a554 menu-list">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

CSS代码：

.menu-btn {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
.menu-list {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-list li {
  background-color: #f4f4f4;
  padding: 10px;
}
.menu-list li a {
  color: #333;
  text-decoration: none;
}
.menu.open .menu-list {
  display: block;
  transition: transform 0.3s ease-in-out;
  transform-origin: top;
  transform: scaleY(0);
}
.menu.open .menu-list li {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.menu.open .menu-list li:nth-child(1) {
  transition-delay: 0.1s;
}
.menu.open .menu-list li:nth-child(2) {
  transition-delay: 0.2s;
}
.menu.open .menu-list li:nth-child(3) {
  transition-delay: 0.3s;
}

在上面的代码中，通过给菜单按钮添加一个点击事件，可以切换菜单的打开和关闭状态。当菜单处于打开状态时，给菜单列表添加open类名，通过CSS选择器来控制菜单列表的显示和隐藏。

在菜单列表的CSS样式中，通过设置transform属性的scaleY值为0，可以将菜单列表在垂直方向上压缩隐藏起来。当菜单列表的display属性从none变为block时，通过transition属性来实现菜单列表的下拉动画效果。通过设置菜单列表中每个选项的opacity和transform属性，可以实现选项的淡入和从上方滑动的动画效果。

需要注意的是，通过给每个选项设置不同的transition-delay值，可以实现选项依次显示的效果。

除了上述示例代码中的下拉动画效果，CSS3还提供了许多其他的动画效果，如旋转、缩放、渐变等，可以根据具体需求进行使用。可以结合JavaScript来实现更复杂的交互效果，如通过点击按钮实现菜单的展开和收起等。