css3下拉菜单3d动画 |css百分比加上数字

/*下拉菜单的CSS代码*/
ul li ul {
position: absolute;
top: 40px;
left: 0;
width: 200px;
opacity: 0;
visibility: hidden;
transform: perspective(800px) rotateX(-90deg);
transform-origin: top;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
/*鼠标移入时菜单的动画效果*/
ul li:hover >ul {
opacity: 1;
visibility: visible;
transform: perspective(800px) rotateX(0deg);
}
/*动画的代码*/
@keyframes slide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/*下拉菜单里的选项*/
ul li ul li {
animation: slide 0.5s ease-in-out;
animation-delay: 0.15s;
}

通过这段CSS代码，下拉菜单将“隐藏”在导航栏下面，当用户悬停时，弹出并使用3D旋转效果从菜单顶部展开。同时，菜单选项也具有滑动动画，使页面更加生动。

CSS3下拉菜单3D动画通过几行简单的代码便可以实现，有效地增强了网页的交互性。对于那些想要为自己的网站增添独特效果的门户网站和博客来说，这种效果无疑是一个很好的选择。