Question

所以我试图做像瓷砖或netflix那样的东西。我有一个盒子，我试图在鼠标悬停时生长，并在鼠标离开时减小尺寸。到目前为止我有这个。

.nav {
  position: relative;
  top: 25%;
  width: 100%;
  color: black;
  text-align: center;
}
.nav a {
  color: white;
  text-decoration: none;
}
.link {
  font-size: 24px;
  width: 100%;
  height: 25%;
  background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
  display: inline;
  padding-right: 12.5%;
  padding-left: 12.5%;
  padding-bottom: 6.25%;
  padding-top: 6.25%;
  box-shadow: 0px 0px 10px 5px grey;
  animation-name: downsize;
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.link:hover {
  animation-name: resize;
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  font-size: 32px;
  padding-right: 14.5%;
  padding-left: 14.5%;
  padding-bottom: 8.25%;
  padding-top: 8.25%;
}

<div class="nav">
  <a href="/public/MM/EnterUp">
    <div class="link" style="margin-right: 15px;">
      Enter Up
    </div>
  </a>
  <a href="/public/MM/EnterUp">
    <div class="link" style="margin-right: 15px;">
      View Ups
    </div>
  </a>
</div>

我使用了CSS-Tricks 鼠标悬停后让它减少。我的问题是，与CSS-Tricks不同，当您加载页面时，我不希望在鼠标离开后运行downsize动画。有人有解决方案吗？谢谢你的帮助！

Answer 1

虽然CSS中没有等效的mouseleave或mouseout事件，但您可以通过将“退出”转换应用于选择器然后使用“输入”覆盖它来实现相同的行为使用:hover伪类进行转换，如下所示：

div{
    background:#000;
    color:#fff;
    font-size:16px;
    line-height:100px;
    text-align:center;
    transition:font-size .5s ease-out,line-height .5s ease-out,width .5s ease-out;
    width:100px;
}
div:hover{
    font-size:20px;
    line-height:125px;
    transition:font-size .25s ease-in,line-height .25s ease-in,width .25s ease-in;
    width:125px;
}
/* HOUSEKEEPING */
*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
body,html{height:100%;}
body{align-items:center;display:flex;justify-content:center;}

<div>Text</div>

或者，如果您希望应用的transition在两种情况下都相同，则只有相反，然后才需要在:hover选择器中覆盖它。

Answer 2

您只需使用transition进行填充

您的情况下应该这样做：

.nav {
        position: relative;
        top: 25%;
        width: 100%;
        color: black;
        text-align: center;
    }
    .nav a {
        color: white;
        text-decoration: none;
    }
    .link {
        font-size: 24px;
        width: 100%;
        height: 25%;
        background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
        display: inline;
        padding-right: 12.5%;
        padding-left: 12.5%;
        padding-bottom: 6.25%;
        padding-top: 6.25%;
        box-shadow: 0px 0px 10px 5px grey;
        transition: padding 0.4s ease-out;
    }
    .link:hover {
        font-size: 32px;
        padding-right: 14.5%;
        padding-left: 14.5%;
        padding-bottom: 8.25%;
        padding-top: 8.25%;
}

这里的关键是使用：

transition: padding 0.4s ease-out;

鼠标离开的CSS动画

2 个答案: