CSS3技术为菜单设计提供了更加强大的工具和灵活性。
在CSS3中,可以通过使用伪元素和过渡效果,创建具有动态变化效果的菜单。
代码示例: <ul class="menu"> <li><a href="#">首页</a></li> <li><a href="#">产品中心</a></li> <li><a href="#">新闻动态</a></li> <li><a href="#">联系我们</a></li> </ul> .menu li a:before { content: ''; position: absolute; width: 0%; height: 2px; bottom: -5px; left: 50%; background-color: #f00; transition: width 0.3s ease 0s,left 0.3s ease 0s; } .menu li a:hover:before { width: 100%; left: 0%; }
上面的代码演示了如何在CSS3中创建一个简单的菜单,并为菜单中的链接添加一个动态变化的效果。
菜单链接的伪元素:before会在链接的下方创建一个小横线,一开始的宽度为0%,当鼠标悬停在链接上时会变为100%。同时,横线的左侧也会从链接文字的中央跳跃到左侧边的位置,使得效果更加醒目。