css3 下拉菜单动画 |xml怎么添加css

.dropdown {
position: relative;
display: inline-block;
}
ul {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
opacity: 0;
transition: opacity .3s;
}
.dropdown:hover ul {
opacity: 1;
}
li {
padding: 8px 12px;
user-select: none;
cursor: pointer;
}
li:hover {
background-color: #eee;
}
.bottom-up {
transform-origin: top;
transform: scaleY(0);
transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dropdown:hover .bottom-up {
transform: scaleY(1);
}
.left-to-right {
transform-origin: left;
transform: scaleX(0);
transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dropdown:hover .left-to-right {
transform: scaleX(1);
}

以上代码，大家定义了一个基础的下拉菜单结构，以及两种常见的动画效果——bottom-up和left-to-right。其中bottom-up是垂直方向从下向上展开的动画效果，left-to-right是水平方向从左向右展开的动画效果。当鼠标悬浮在.dropdown元素上时，对应的下拉菜单就会以动画效果展开。

实际上，还有很多更复杂的下拉菜单动画效果可以实现，这里只是简单地介绍了一些基本的实现方式。掌握了这些基础知识，你就可以尝试自己实现更加丰富多彩的下拉菜单动画效果了。