如何利用transform实现一个纯CSS弹出菜单-创新互联

这篇“如何利用transform实现一个纯CSS弹出菜单”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“如何利用transform实现一个纯CSS弹出菜单”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。

创新互联公司长期为上1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为安阳企业提供专业的网站建设、成都网站建设，安阳网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

先上效果

制作方法

核心就是利用了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弹出菜单”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注创新互联行业资讯频道！

分享名称：如何利用transform实现一个纯CSS弹出菜单-创新互联
URL链接：http://6mz.cn/article/cecpod.html