2023年7月9日发(作者：)

css过度菜单,漂亮的纯CSS3⽔平导航菜单（有过渡动画效果）我想你已经看过了各种带有效果的动画菜单(基于 jQuery 插件)，本⽂介绍如何仅使⽤ CSS3(没有任何 javascript)重复相同的⾏为，在菜单中使⽤ CSS3 过渡(为元素设置动画)。漂亮的纯CSS3⽔平导航菜单(有过渡效果)步骤 1. HTML这是菜单的html代码。 这是基于 UL-LI 的导航菜单。HomeMenu 1Submenu 1Submenu 2Submenu 3Submenu 4Submenu 5Menu 2Submenu 2-1Submenu 2-2Submenu 2-3Submenu 2-4Submenu 2-5Submenu 2-6Submenu 2-7Submenu 2-8Menu 3Submenu 3-1Submenu 3-2Submenu 3-3Submenu 3-4Submenu 3-5Menu 4Menu 5Menu 6Back第 2 步。 CSS这是菜单的 CSS 样式。#nav,#nav ul {list-style: none outside none;margin: 0;padding: 0;}#nav {background: url('menu_') no-repeat scroll 0 0 transparent;clear: both;font-size: 12px;height: 58px;padding: 0 0 0 9px;position: relative;width: 957px;}#nav ul {background-color: #222;border:1px solid #222;border-radius: 0 5px 5px 5px;border-width: 0 1px 1px;box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);left: -9999px;overflow: hidden;position: absolute;top: -9999px;z-index: 2;-moz-transform: scaleY(0);-ms-transform: scaleY(0);-o-transform: scaleY(0);-webkit-transform: scaleY(0);transform: scaleY(0);-moz-transform-origin: 0 0;-ms-transform-origin: 0 0;-o-transform-origin: 0 0;-webkit-transform-origin: 0 0;transform-origin: 0 0;-moz-transition: -moz-transform 0.1s linear;-ms-transition: -ms-transform 0.1s linear;-o-transition: -o-transform 0.1s linear;-webkit-transition: -webkit-transform 0.1s linear;transition: transform 0.1s linear;}#nav li {background: url('menu_') no-repeat scroll right 5px transparent;float: left;position: relative;}#nav li a {color: #FFFFFF;display: block;float: left;font-weight: normal;height: 30px;padding: 23px 20px 0;position: relative;text-decoration: none;text-shadow: 1px 1px 1px #000000;}#nav li:hover > a {color: #00B4FF;}#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {background: none repeat scroll 0 0 #121212;outline: 0 none;}#nav li:hover {left: 0;top: 53px;width: 180px;-moz-transform: scaleY(1);-ms-transform: scaleY(1);-o-transform: scaleY(1);-webkit-transform: scaleY(1);transform: scaleY(1);}#nav ul li {background: none;width: 100%;}#nav ul li a {float: none;}#nav ul li:hover > a {background-color: #121212;color: #00B4FF;}#lavalamp {background: url('') no-repeat scroll 0 0 transparent;height: 16px;left: 13px;position: absolute;top: 0px;width: 64px;-moz-transition: all 300ms ease;-ms-transition: all 300ms ease;-o-transition: all 300ms ease;-webkit-transition: all 300ms ease;transition: all 300ms ease;}#lavalamp:hover {-moz-transition-duration: 3000s;-ms-transition-duration: 3000s;-o-transition-duration: 3000s;-webkit-transition-duration: 3000s;transition-duration: 3000s;}#nav li:nth-of-type(1):hover ~ #lavalamp {left: 13px;}#nav li:nth-of-type(2):hover ~ #lavalamp {left: 90px;}#nav li:nth-of-type(3):hover ~ #lavalamp {left: 170px;}#nav li:nth-of-type(4):hover ~ #lavalamp {left: 250px;}#nav li:nth-of-type(5):hover ~ #lavalamp {left: 330px;}#nav li:nth-of-type(6):hover ~ #lavalamp {left: 410px;}#nav li:nth-of-type(7):hover ~ #lavalamp {left: 490px;}#nav li:nth-of-type(8):hover ~ #lavalamp {left: 565px;}结论希望你喜欢这个新的 CSS3 菜单。关于CSS3菜单，你可可以看看下⾯这些⽂章：