gpt4 book ai didi

html - CSS - 删除开始动画

转载 作者:太空宇宙 更新时间:2023-11-04 11:30:41 25 4
gpt4 key购买 nike

在我问这个问题之前,让我把这个关掉。我不想使用 jQuery。

我希望这个菜单在悬停时像这样扩大和缩小:

@keyframes menugrow {
0% {
width:25px;
height:25px;
}
25% {
width:20%;
height:25px;
}
100% {
height:100vh;
width:20%;
}
}

为了缩小我确实喜欢这样:

@keyframes menushrink {
0% {
width:20%;
height:100vh;
}
75% {
width:20%;
height:25px;
}
100% {
height:25px;
width:25px;
}
}

下面是我必须激活这两个:

.menu {
background:#1a1a1a;
width:25px;
height:25px;
animation: menushrink 0.3s linear;

}
.menu:hover {
animation: menugrow 0.3s linear;
height:100vh;
width:20%;
}

我想要的只是在加载页面时没有动画。这是 JSBin project .

最佳答案

我知道我回答自己的问题很奇怪。

感谢@Daemedeor,我找到了答案。 Here's the final result .我所做的是将指向我的 Javascript 函数 menuout()onmouseout(显然你可以更改它,我只是选择了那个名称)。我的 javascript 代码最终是:

function menuout() {
document.getElementById("menu").className += " menuanimate";
}

我的 HTML 代码是:

<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
</head>
<body>
<div class="menu" onmouseout="menuout()" id="menu">
</div>
</body>
</html>

最后但同样重要的是我的 CSS:

@keyframes menugrow {
0% {
width:50px;
height:50px;
}
25% {
width:30%;
height:50px;
}
100% {
height:100vh;
width:30%;
}
}
@keyframes menushrink {
0% {
width:30%;
height:100vh;
}
75% {
width:30%;
height:50px;
}
100% {
height:50px;
width:50px;
}
}
.menu {
background:#1a1a1a;
width:50px;
height:50px;
}
.menu:hover {
animation: menugrow 0.3s linear;
height:100vh;
width:30%;
}
body {
margin:0px;
}
.menuanimate {
animation:menushrink 0.3s linear;
}

关于html - CSS - 删除开始动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32037056/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com