Question

我希望有人可能知道如何实现以下效果，而不必将单独的行包装到任何内部元素中，例如span或a。

<div class="m-linkitem">
    <h1>Hover Below</h1>
    <a href="#">Lorem ipsum dolor </a><br/>
    <a href="#">Lorem ipsum</a><br />
    <a href="#">Lorem ipsum</a><br />
</div>


    body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        font-family: 'Open Sans', sans-serif;
        background: linear-gradient(180deg, #111, #00393c);
        background-size: 400% 400%;
        animation: backgroundGradient 30s ease infinite;
    }

    h1, h2, h3, h4 {
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
        color: #fff;
    }

    p {
        font-size: 18px;
        font-size: 1.8rem;
        line-height: 26px;
    }

    .m-linkitem {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-51%, -50%);
        -moz-transform: translate(-51%, -50%);
        -ms-transform: translate(-51%, -50%);
        -o-transform: translate(-51%, -50%);
        transform: translate(-51%, -50%);
        max-width: 500px;
        width: 100%;
        transform-origin: center;
        animation: loadBounce 0.5s ease-in-out forwards;
    }

        .m-linkitem a {
            transition: all 0.25s linear;
            display: inline;
            font-size: 22px;
            font-size: 2.2rem;
            line-height: 45px;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: 600;
            padding-bottom: 5px;
            background: linear-gradient(to right, rgba(0, 209, 177, 1) 0%, rgba(39, 143, 198, 1) 98%);
            background-size: 0px 2px;
            background-repeat: no-repeat;
            background-position: left 85%;
            text-shadow: 0;
        }

            .m-linkitem:hover a{
                background-size: 100% 1px;
                text-shadow: 0 2.5px 4px rgba(0, 0, 0, 0.5);
            }

这将针对响应式设计实现，因此每行的单词数量会随着调整大小和分数符更改而改变。任何人都可以想到CSS同时强调所有行的方式，比如在codepen示例中？

谢谢。

P.S。这是应用于整个段落时动画的样子。不是我想要的：

https://codepen.io/colinhorn/pen/YxYYMj?q=underline+animation&limit=all&type=type-pens

Answer 1

首先将class="m-linkitem"添加到html中的每一行。然后，您可以使用text-decoration为文本加下划线，而不必担心响应式设计：

.m-linkitem{
    text-decoration: underline;
}

这使用了类m-linkitem，因此它只是悬停在它的ne部分上突出显示整个段落。文本修饰并不需要您输入特定长度并自动为同时更改大小的文本加下划线。

Answer 2

就我个人而言，我认为你在这里实际想要达到的目标是非常不清楚的。

据我所知，你要在你提供的codepen中复制完全相同的视觉效果，但不必将每一行分成不同的元素。

我认为这不是“你怎么......”的问题，我认为这是一个“你能做到......”的问题。

您可能需要使用Javascript或类似的东西......

以下示例将为每行文本添加下划线，但它非常hacky，可能无法使用您正在寻找的“响应式”设计：

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(180deg, #111, #00393c);
  background-size: 400% 400%;
  animation: backgroundGradient 30s ease infinite;
}

h1,
h2,
h3,
h4 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: #fff;
}

p {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 26px;
}

.m-linkitem {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-51%, -50%);
  -moz-transform: translate(-51%, -50%);
  -ms-transform: translate(-51%, -50%);
  -o-transform: translate(-51%, -50%);
  transform: translate(-51%, -50%);
  max-width: 500px;
  width: 100%;
  transform-origin: center;
  animation: loadBounce 0.5s ease-in-out forwards;
}

.m-linkitem a {
  transition: all 0.25s linear;
  display: inline;
  font-size: 22px;
  font-size: 2.2rem;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 5px;
  background: linear-gradient(to right, rgba(0, 209, 177, 1) 0%, rgba(39, 143, 198, 1) 98%);
  background-size: 0px 2px;
  background-repeat: no-repeat;
  background-position: left 85%;
  text-shadow: 0;
}

.m-linkitem a:after {
  content: '';
  position: absolute;
  display: inline-block;
  width: 0px;
  height: 1px;
  top: 130px;
  left: 0;
  background-color: #ffffff;
  box-shadow: 0px 45px #ffffff, 0px 90px #ffffff;
  transition: width 0.5s ease;
}
.m-linkitem a:hover:after {
  width: 380px;
}

<div class="m-linkitem">
  <h1>Hover Below</h1>
  <a href="#">
    Lorem ipsum dolor <br>
    Lorem ipsum <br>
    Lorem ipsum <br>
  </a>
</div>

Answer 3

在开始之前，我只有一个基本的HTML＆amp; CSS知识，但我认为它应该在你上课时起作用。（就像他们在示例中所做的那样，然后添加想要的下划线。）效果适用于类中的所有内容。

＆＃13;

classname{
    text-decoration: underline;
}

＆＃13;

或者如果你想让它像花哨的效果一样。将代码复制到类中。

问候。

整个段落的CSS悬停动画

3 个答案: