HTML5 CSS3在<；ul>；标签淡入

我通常不会对转换产生任何问题。
但是，我正在实现一个汉堡包菜单，希望

ul

淡入

代码如下：

nav#切换{
显示：无；
}
导航#导航元素{
显示：无；
过渡：.7s；
}
nav#Navul li{
线高：2rem；
文本对齐：左对齐；
宽度：100%；
}
导航#切换：选中+#导航元素{
显示：块；
过渡：.7s；
}

文件
标志
☰

转换

不适用于

显示

和

可见性

值，因此必须使用

不透明度

：

nav#切换{
显示：无；
}
导航#导航元素{
不透明度：0；
过渡：不透明度。5s线性；
}
nav#Navul li{
线高：2rem；
文本对齐：左对齐；
宽度：100%；
}
导航#切换：选中+#导航元素{
不透明度：1；
}

标志
☰

您可以只使用css3和HTML5来尝试这个有效的汉堡包菜单

正文
{
保证金：0；
填充：0；
背景#0077CC；
颜色：#cdcdcd；
字体系列：“Avenir Next”，“Avenir”，无衬线；
}
a{
文字装饰：无；
颜色：#232323；
过渡：颜色0.3s；
}
a:悬停{
颜色：#0077CC；
}
#梦游{
显示：块；
位置：相对位置；
顶部：10px；
左：10px；
z指数：1；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
#菜单切换输入
{
显示：块；
宽度：40px；
高度：32px；
位置：绝对位置；
顶部：-7px；
左：-5px；
光标：指针；
不透明度：0；/*隐藏此项*/
z指数：2；/*并将其放在汉堡上*/
-webkit触摸标注：无；
}
#孟特洛格跨度{
显示：块；
宽度：33px；
高度：4px；
边缘底部：5px；
位置：相对位置；
背景：cdcdcd；
边界半径：3px；
z指数：1；
-webkit转换源：4px 0px；
变换原点：4px0px；
过渡：背景0.5s立方贝塞尔（0.77,0.2,0.05,1.0），
不透明度0.55秒缓解，
-webkit变换0.5s三次贝塞尔（0.77,0.2,0.05,1.0）；
变换：变换0.5s三次贝塞尔（0.77,0.2,0.05,1.0），
背景0.5s立方贝塞尔（0.77,0.2,0.05,1.0），
不透明度0.55s；
变换：变换0.5s三次贝塞尔（0.77,0.2,0.05,1.0），
背景0.5s立方贝塞尔（0.77,0.2,0.05,1.0），
不透明度0.55秒缓解，
-webkit变换0.5s三次贝塞尔（0.77,0.2,0.05,1.0）；
}
#menuToggle跨度：第一个孩子{
-webkit转换源：0%0%；
变换原点：0%0%；
}
#菜单切换范围：第n个最后一个子项（2）{
-webkit转换来源：0%100%；
变换原点：0%100%；
}
#菜单切换输入：选中~span{
不透明度：1；
-webkit变换：旋转（45度）平移（-2px，-1px）；
变换：旋转（45度）平移（-2px，-1px）；
背景:#2323；
}
#菜单切换输入：已选中~span:n最后一个子项（3）{
不透明度：0；
-webkit变换：旋转（0度）比例（0.2,0.2）；
变换：旋转（0度）比例（0.2,0.2）；
}
#菜单切换输入：选中~span:n最后一个子项（2）{
-webkit变换：旋转（-45度）平移（0，-1px）；
变换：旋转（-45度）平移（0，-1px）；
}
#菜单{
位置：绝对位置；
宽度：300px；
余量：-100px0-50px；
填充：50px；
填充顶部：125px；
高度：自动；
高度：200px；
背景：#ededed；
列表样式类型：无；
-webkit字体平滑：抗锯齿；
/*停止safari中文本闪烁的步骤*/
-webkit转换源：0%0%；
变换原点：0%0%；
-webkit转换：转换（-100%，0）；
转换：转换（-100%，0）；
过渡：-webkit变换0.5s三次贝塞尔（0.77,0.2,0.05,1.0）；
变换：变换0.5s三次贝塞尔（0.77,0.2,0.05,1.0）；
转换：变换0.5s立方贝塞尔（0.77,0.2,0.05,1.0），-webkit变换0.5s立方贝塞尔（0.77,0.2,0.05,1.0）；
}
#菜单里{
填充：5px0；
字体大小：22px；
}
#菜单切换输入：选中~ul{
-webkit转换：无；
转化：无；
}

您的意思是显示/隐藏不透明度转换？可能。

转换

对

显示不起作用吗

？哦！我懂了。我可以在不同的时间间隔转换多个内容（但显然不是

display

）。。。谢谢，这已经走上正轨了。