html-仅使用css聚焦于子按钮时，无法动画显示div

sadness安全宇航员 lv.1

发布时间：2022-04-27 05:31:55 222

相关标签： # css# html

我一直有一个问题，当我点击一个按钮时，它在聚焦时动画效果非常好，但是当父div应该动画时，它只是简单地跳跃，而不是平滑地动画，尽管我给它增加了2秒的轻松度。无论我尝试什么，无论我是否更改了的代码。横幅。菜单按钮：焦点>。横幅或其他任何东西，它仍然不起作用。。。任何帮助都将不胜感激！。

css如下所示：

/* CSS Document */
div {
    font-family: muli, "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

body {
    margin: 0px;
    padding: 0px;
}

#title {
    color: white;
    margin-left: 50px;
    margin-top: 25px;
    margin-bottom: 10px;
    display: inline-block;
}

.MenuButton {
    float: right;
    height: 60px;
    width: 60px;
    left: calc(100% - 85px);
    top: 10px;
    background: #7eefd8;
    border-color: #43b9bd;
    border-width: 5px;
    border-radius: 50px;
    transition: all 2s ease;
    display: inline-block;
    position: absolute;
}

.MenuButton:focus {
    border-width: 0px;
    border-radius: 50px;
    height: calc(100vh - 100px);
    width: calc(100vw - 50px);
    left: 25px;
    top: 75px;
    
    transition: all 2s ease;
}

.TopBackground {
    background-color: #ffffff;
    width: 100%;
    height: 85vh;
    position: fixed;
}

.Banner {
    background-color: #000000;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    padding-bottom: 10px;
    width: 100%;
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    transition: all 2s ease;
}

.Banner:focus-within {
    height: 100vh;
    transition: all 2s ease;
}

下面是html：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="Theme.css">
<script src="MainPage.js"></script>
</head>
    <div class="TopBackground">
        <div class="Banner">
            <h1 id="title">BannerTest</h1>
            <button id="menu" class="MenuButton"></button>
        </div>
        <div class="Test"></div>
    </div>
<body></body>

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。