Question

我不是编码，所以这可能是一个愚蠢的问题。

我的网站遇到了麻烦。我想在加载页面时有一个菜单动画，所以div的高度从0％开始，结束时为100％。在这个动画之后，我希望能够用鼠标悬停在它上面稍微改变它的高度。

这是css：

.videos_bottom {
  height: 8vw;
  width: 17%;
  background: #1C1C1C;
  align-self: flex-end;
  font-size: 1.5vw;
  transition: 0.2s ease;
  -webkit-animation: slide 0.5s forwards;
}

@keyframes slide {
  from {
    height: 0%;
  }
  to {
    height: 90%;
  }
}

.videos_bottom:hover {
  height: 100%;
  transition: 0.2s ease;
}

我的想法是将关键帧结束高度设置为90％，以便90％和100％之间的差距适用于悬停适当性。

如果您想访问该网站：marcotronconi.com（其中还没有关键帧幻灯片）

由于

Answer 1

对于高度工作，标签需要一个锚，所以我添加了display: block类，并删除了动画调用的前向形式

＆＃13;

.videos_bottom{
            height: 80vh;
            width: 17%;
            display: block;
            background: #1C1C1C;
            align-self: flex-end;
            font-size:1.5vw;
            transition: 0.2s ease;
            -webkit-animation: slide 0.5s;
        }

        @keyframes slide {
            from {height: 0vh;}
            to {height: 80vh;}
        }

        .videos_bottom:hover {
            height: 90vh;
            transition: 0.2s ease;
        }

＆＃13;

<div class="down_container">
  <div class="menu"> 
    <a class="videos_bottom" href="videos.html"> Videos </a> 
  <div> 
</div>

＆＃13;

加载一起工作时悬停和关键帧动画

1 个答案: