我对 html 和 css 很陌生，并且已经开始使用过渡。我在上面观看了 Kevin Powell 的视频，他的所有演示都在过渡时应用了过渡（例如，当他停止悬停在元素上时）。但是，在我的示例中，当徽标向左移动时，过渡会起作用，但会立即传送回来。为什么会这样，我做错了什么？
body {
background: #121212;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
}
nav {
background: #212121;
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0;
}
nav:hover .logobg {
left: 0;
transform: translateX(0);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
.navtext {
left: 50%;
transform: translateX(-50%);
position: absolute;
font-size: 30px;
}
.logo {
top: 0%;
font-size: 65px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
text-decoration: none;
color: #FFF;
}
.logobg {
width: 150px;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.navelements {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: red;
height: 100%;
}
.navelements:hover {
background: #303030;
transition-duration: 300ms;
}
.navbarline {
background: linear-gradient(90deg, rgba(221, 16, 247, 1) 0%, rgba(0, 212, 255, 1) 100%);
width: 100%;
height: 4px;
position: absolute;
top: 80px;
left: 0;
}<nav>
<a href="index.html">
<div class="logobg">
<div class="logo">
AI
</div>
</div>
</a>
<a href="blank.html">
<div class="">
</div>
</a>
</nav>
<div class="navbarline"></div>你应该添加这个规则：
nav .logobg {
left: 50%;
transform: translateX(0);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
因此，当鼠标离开元素时，它应该应用您定义的覆盖 :hover 规则的过渡。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句