189 8069 5689
这篇“如何利用transform实现一个纯CSS弹出菜单”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“如何利用transform实现一个纯CSS弹出菜单”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。
创新互联主营聊城网站建设的网络公司,主营网站建设方案,APP应用开发,聊城h5小程序定制开发搭建,聊城网站营销推广欢迎聊城等地区企业咨询
先上效果
制作方法
核心就是利用了transform的区域位移方法，在配合上li标签的hover伪类和动画延时，从而简单实现了子菜单的显示
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
nav{
margin: 10px;
}
nav ul {
list-style-type: none;
height: 32px;
display: flex;
}
nav ul li{
margin-right: 10px;
}
nav ul li strong{
text-transform: uppercase;
background-color: #9b59b6;
color: white;
padding: 5px 30px;
line-height: 30px;
cursor: pointer;
}
nav ul li strong+div{
display: flex;
flex-direction: column;
background-color: #3498db;
padding: 10px;
transform: translateY(-110%);
opacity: 0;
transition: .3s;
transform-origin: top;
}
nav ul li:hover div{
transform: translateY(0);
opacity: 1;
}
nav ul li strong+div a{
color: white;
text-decoration: none;
text-transform: uppercase;
padding: 5px 0;
}感谢你的阅读，希望你对“如何利用transform实现一个纯CSS弹出菜单”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注创新互联行业资讯频道！