Html 无论发生什么情况，转换属性似乎都不起作用_Html_Css

Html 无论发生什么情况，转换属性似乎都不起作用

html css

Html 无论发生什么情况，转换属性似乎都不起作用,html,css,Html,Css,因此，我正在为大学做一个项目，而过渡期不是在下拉导航栏上工作。我试着改变css代码，但不管怎样，它似乎都不起作用。我创建了一个网页，只是想看看我是否能在这里做到，但我错了。也许是订购或其他方面的问题，我似乎无法理解。这么做了好几天，对那个简单的下拉导航栏仍然并没有任何影响，这让我发疯当我点击复选框时，它应该会产生一种非常简约的效果，但什么都没有。这是新网页的链接，任何帮助都将不胜感激但如果您不介意下载，以下是代码： HTML 问题是您切换了display:none/display:

因此，我正在为大学做一个项目，而过渡期不是在下拉导航栏上工作。我试着改变css代码，但不管怎样，它似乎都不起作用。我创建了一个网页，只是想看看我是否能在这里做到，但我错了。也许是订购或其他方面的问题，我似乎无法理解。这么做了好几天，对那个简单的下拉导航栏仍然并没有任何影响，这让我发疯

当我点击复选框时，它应该会产生一种非常简约的效果，但什么都没有。这是新网页的链接，任何帮助都将不胜感激

但如果您不介意下载，以下是代码：

HTML

问题是您切换了

display:none

display:block

。但这不能被动画化

因此，您首先必须制作动画，在制作动画之后，您可以设置

display:none

，我应该按什么顺序制作？因为如果我移除

显示：无那么它当然不会切换div的出现和消失。您希望达到什么效果？只是淡入淡出，然后您可以将“不透明度：0”转换为“不透明度：1”？如果你真的需要它是“display:none”，那么你可以在动画完成后添加一个额外的类。有点像是一个放松和放松的效果，但是我用position:absolute将div定位在监视器的可见区域之外来修复它；左-100%
然后将left属性添加回left:0px现在很明显，您无法将动画添加到显示：无，但几小时前它不是。谢谢你的帮助！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="1.css">
    <title>Document</title>
</head>
<body>
    <div class="div2">
    </div>
    <nav>
        <input type="checkbox" id="navtoggle" class="navtoggle">
        <label for="navtoggle"><img src="hamburger2.png" alt="ham" class="pic1" width="20"></label>
        <div class="div1">
            <ul>
                <li><a href="2.html">First page</a></li>
                <li><a href="2.html">Second page</a></li>
                <li><a href="2.html">Third page</a></li>
            </ul>
        </div>
    </nav>
</body>
</html>

body
{
    background-color: brown;
    margin: 0;
    padding: 0;
    position: relative;
    height: 300px;
}

.pic1 
{
    position: absolute;
    z-index: 10;
    top: 18px;
    left: 10px;
}

.div2
{
    top:0;
    position: absolute;
    height: 50px;
    width: 100%;
    background-color: green;
}

.navtoggle
{
    position: absolute;
    top: 20px;
    z-index: 4;
    display: none;
}

.navtoggle:checked ~ .div1
{
    height: max-content;
    display: none;
    transition: 1s;
}




.div1, ul
{
    position: relative;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    top: 50px;
    background-color: yellowgreen;
}

ul
{
    top: 0px;
    display: block;
    margin:0;
    padding:0;
    width: max-content;
}

li
{
    list-style-type: none;
    padding:10px 0 10px 0 ;
}

li a
{
    color: brown;
    text-decoration: none;
}


.div1 ul li a
{
    position: relative;
    text-decoration: none;
}
.div1 ul li a:hover
{
    color:grey;
    transition: 0.4s;
}