CSS3悬停文字幻灯片效果

Posted 2021-04-09 fragmentwall

我见过很多按钮有悬停文字有一个幻灯片的效果，这个效果很棒有很好的交互效果。因为我分享一下如何制作这样一个按钮。

html代码

下面是一个按钮的所有html代码

<div class="blue-btn">
  <a class="first-link" href="">
    First Text
  </a>
  <a href="">
    Second Text
  </a>
</div>

css代码

下面的几乎是所有的css代码

a{
  color: white;
  text-decoration:none;
  text-align: center;
  display:block; /* important */
}

.blue-btn, .first-link{
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;     
}

.blue-btn{
  height: 64px;
  font: normal normal 700 1em/4em Arial,sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #3b5998;
}

.blue-btn:hover{
   background-color: #003D99;
}

.blue-btn a:hover{
  text-decoration: none;
}

.first-link{
  margin-top: 0em;   
}

.blue-btn:hover .first-link{
  margin-top: -4em;
}

css解释

a{
  color: white;
  text-decoration:none;
  text-align: center;
  display:block; /* important */
}   

display:block注释中有说明，它非常重要，因为我们要垂直放置文字

.blue-btn{
  height: 64px;
  width: 200px;
  font: normal normal 700 1em/4em Arial,sans-serif;
  overflow: hidden;
  background-color: #3b5998;
}

width和height必须指定一个值，overflow必须设置为hidden不然你会看到第二个按钮。字体的行高（4em）将文本垂直放置在按钮中，但这可能会根据高度而变化。

.blue-btn, .first-link{
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;     
}

CSS3 transitions(由于opera现在支持webkit，因此请注意不使用-o-前缀)，没有这个按钮就会弹，出而不是幻灯片方式。相信你可以在js中做到这一点，但是，呃。

.blue-btn:hover{
   background-color: #003D99;
}

悬停时更改背景颜色是可选的，但会为按钮添加一个非常酷的效果，就好像新增的文字向上滑动完全是完全不同的按钮。

.blue-btn:hover .first-link{
  margin-top: -4em;
}

我们给第一个链接提供了first-link类用处就在这里，当鼠标悬停到blue-btn上时，此代码会使第一个链接向上移动。

重要的代码我已经做了详细说明，希望你也能制作一个炫酷的悬停幻灯片按钮

DEMO链接 https://codepen.io/tudou/full/eVyqGV/