线路通过动画徘徊

时，我想做点什么，我有一个线，通过文字，当我将鼠标悬停在文本的行缩进。线路通过动画徘徊

这是我到目前为止有：

#about { 
 
    text-decoration: line-through; 
 
    text-align: right; 
 
    padding-right: 80px; 
 
    float: right; 
 
    color: black; 
 
} 
 
#about:hover { 
 
    text-decoration: none; 
 
}

<div id="about"><a href="about.html" target="_new">ABOUT</a> 
 
</div>

我怎样才能做到这一点？ CSS或Javascript？

来源

2015-10-02 sam

这应该是可能的CSS，虽然你将需要向我们展示你迄今为止尝试什么。 –

你好，请给出一些流行的例子，你想要什么..？所以我们可以帮助你..！ –

http://www.thmsbfft.fr/#/works类似这样的东西。当您将鼠标悬停在“配置文件”链接上时，该行将缓慢缩回。 – sam

伪元素会在这里的理想选择。

a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    margin: 25px; 
 
    color:black; 
 
    position: relative; 
 
} 
 

 
a::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top:50%; 
 
    transform:translateY(-50%); 
 
    width: 100%; 
 
    right: 0; 
 
    height: 25%; 
 
    background: currentColor; 
 
    transition:width 0.25s ease; 
 
} 
 

 
a:hover::after { 
 
    width: 0; 
 
}

<a href="#">Profile</a> 
 

 
<a href="#">Lorem ipsum dolor.</a>

来源

2015-10-02 07:46:01

这是可能的，虽然不是text-decoration: line-through;。我们可以通过使用伪元素并相应地对其进行动画来重现line-through效果。

原则：

添加position: relative;到#about，这使得伪元件被相对定位成它
创建伪元件#about:after，给它height: 1px;和width: 100%;复制线通效应
绝对定位伪元素，并使用top: 0;，bottom: 0;和margin: auto 0;将其垂直对齐
添加transition: width 1s;动画宽度
与#about:hover:after添加悬停事件，并设置width: 0;

#about { 
 
    color: black; 
 
    position: relative; 
 
    text-decoration: none; 
 
} 
 
#about:after { 
 
    background-color: black; 
 
    bottom: 0; 
 
    content: ""; 
 
    display: block; 
 
    height: 1px; 
 
    margin: auto 0; 
 
    position: absolute; 
 
    top: 0; 
 
    transition: width 1s; 
 
    width: 100%; 
 
} 
 
#about:hover:after { 
 
    width: 0; 
 
}

<a id="about" href="about.html">ABOUT</a>

来源

2015-10-02 07:46:46

谢谢！这非常有帮助。有没有一种方法可以控制线路缩回的方向？ – sam

是的，如果您添加'right：0;'（类似于@Paulie_D提供的答案），则该线将以另一种方式缩回。 https://jsfiddle.net/h15umr7a/ –

谢谢！我很感激你如何解释你的代码，这将帮助我学习。 – sam

移动一个text-decoration:line-through无法通过CSS也不JS来完成。

你可以，但是，使用另一个元素你动画，例如像这样：

.strike { 
    position: relative; 
} 

.strike:before { 
    content:" "; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    border-bottom: 1px solid red; 
    width: 100%; 
    transition: left 2s; 
} 

.strike:hover:before { 
    left: -120% 
}

查看jsfiddle here。

来源

2015-10-02 07:57:42 MoMolog

线路通过动画徘徊

回答

相关问题