作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
是否可以使用 Webkit 动画/过渡动画从左到右穿过单词的删除线?据我所知,我只能让它淡入/淡出,不能让它突出文本。
如有任何帮助,我们将不胜感激。谢谢。
最佳答案
这有效..(我使用悬停,不确定你想让它触发什么事件)
html:
<p>This is <span class='line_wrap'><span class='line'></span>weird</span></p>
CSS:
span.line_wrap {
position:relative;
display:inline-block;
}
span.line {
display:inline-block;
position:absolute;
left:0;
top:50%;
width:0;
border-top:1px solid grey;
-webkit-transition: width 0.5s ease-in;
}
span.line_wrap:hover span.line {
width:100%;
}
fiddle : http://jsfiddle.net/bendog/LXKJU/
编辑:这实际上只是为了说明它是可能的...不过会产生可怕的标记。我不建议你使用它...
编辑 2:或使用 Javascript 触发:http://jsfiddle.net/bendog/Kdd7K/
关于css - 使用 CSS 动画行文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9255527/
我是一名优秀的程序员,十分优秀!