1

我对 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>

4

3 回答 3

2

你应该添加这个规则：

nav .logobg {
  left: 50%;
  transform: translateX(0);
  transition-duration: 1000ms;
  transition-timing-function: ease-in-out;
}

因此，当鼠标离开元素时，它应该应用您定义的覆盖 :hover 规则的转换。

于 2021-09-03T16:09:14.403 回答
1

Lety 有一个可靠的答案，但我想我会在早些时候详细说明我的评论。所以我有正确的想法只是错误的位置。我.logobg向上移动nav:hover .logobg并将您的持续时间和时间添加到.logobg。它现在来回平稳过渡。

body {
  background: #121212;
  color: #FFFFFF;
  font-family: Helvetica, Arial, sans-serif;
}

nav {
  background: #212121;
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
}

.logobg {
  width: 150px;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition-duration: 1000ms;
  transition-timing-function: ease-in-out;
}

nav:hover .logobg {
  left: 0;
  transform: translateX(0);
}

.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;
}



.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>

于 2021-09-03T16:19:42.093 回答
0

一旦“悬停”事件停止，CSS 转换就会反转。这是一种使用javascript的方法。

我正在添加一个带有您需要的样式的“id”。id 的 css 将始终覆盖类的 css，这就是它起作用的原因。

的JavaScript：

const nav = document.querySelector("nav");
const logobg = document.querySelector(".logobg");

nav.addEventListener("mouseover", () => {
  logobg.setAttribute("id", "move");
})

的CSS：

body{
  background: #121212;
  color: #FFFFFF;
  font-family: Helvetica, Arial, sans-serif;
}

nav{
  background: #212121;
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
}

#move {
  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;
}
于 2021-09-03T15:35:44.410 回答