Question

我想更改此“电子邮件”文本，以将鼠标悬停在具有水平滚动动画的特定电子邮件（例如“ JOHN.SNOW@GMAIL.COM”）上。这就是HTML

<div class="wrapper">
  <a class="contact" href="#">INSTAGRAM</a>
  <a class="contact" href="#">EMAIL</a>
  <a class="contact" href="#">CREDITS</a>
</div>

Answer 1

好的，运行下面的代码片段，我使用叠加层来使效果像滚动

尝试一下，可能会对您有所帮助

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 50%;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  color: black;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

</style>
</head>
<body>


<div class="container">
  <div class="">Email</div>
  <div class="overlay">
    <div class="text">JOHN.SNOW@GMAIL.COM</div>
  </div>
</div>

</body>
</html>

Answer 2

* {
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
    font-family: Arial;
}
.contact:hover {
    font-size: 0;
}
.contact:hover::after {
    content: attr(data-hover);
    font-size: 15px;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page</title>
        <meta http-equiv="refresh" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
    </head>
    <body>
        <div class="wrapper">
            <a class="contact" href="#">INSTAGRAM</a>
            <a class="contact" href="#" data-hover="john.snow@gmail.com">EMAIL</a>
            <a class="contact" href="#">CREDITS</a>
          </div>
    </body>
</html>

Answer 3

这是有关如何实现它的最新代码段。

首先，

您需要隐藏多余的字符，可以通过为.contact容器提供固定宽度并制作overflow:hidden;

在下面的代码段中，更改宽度max-width: 200px;以控制要显示的电子邮件的字符数。

第二，

使用transition: transform 2s ease-in-out;控制滚动的动画，同时在悬停时使用transform通过transform: translateX(-200px);提供滚动位置

这是工作示例

a.contact {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
}

a.contact>span::after {
  transition: transform 0.8s ease;
  transform-origin: right;
  display: inline-block;
  content: attr(data-text);
  transform: translateX(0px);
}

a.contact>span:hover::after {
  content: attr(data-hover);
  transition-duration:4s;
  transform: translateX(-200px);
}

<div class="wrapper">
  <a class="contact" href="#">INSTAGRAM</a>
  <a class="contact" href="#"><span data-text="EMAIL" data-hover="LONGGGGGGGGGGGGGGEMAIL@mail.com"></span></a>
  <a class="contact" href="#">CREDITS</a>
</div>

将鼠标悬停在文本上以使用CSS滚动动画来更改文本

3 个答案: