【问题标题】:Animate line-through text with CSS使用 CSS 动画化换行文本
【发布时间】:2012-03-04 13:26:36
【问题描述】:

是否可以使用 Webkit 动画/过渡来为从左到右穿过单词的删除线制作动画?据我所知,我只能让它淡入/淡出,而不是让它突出文本。

任何帮助将不胜感激。谢谢。

【问题讨论】:

标签: css animation webkit css-transitions


【解决方案1】:

这行得通..(我用悬停,不知道你想让它触发什么事件)

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%;    
}​

小提琴: http://jsfiddle.net/bendog/LXKJU/

编辑: 这实际上只是为了说明它的可能...虽然会产生可怕的标记。我不建议你使用它......

编辑 2: 或使用 Javascript 触发:http://jsfiddle.net/bendog/Kdd7K/

【讨论】:

  • 本,两个jsfiddle sn-ps是一样的。我不想给你额外的工作,所以如果你还有那个 javascript 实现,我会很感激的。如果没有,没关系。
  • @Ashitaka.. 嗯,这很奇怪,不知道为什么它从 jsfiddle 中消失了。我已经没有了,只是在jsfiddle中进行了实验。
  • @Ashitaka .. 但基本上您需要将 :hover 更改为自定义类并使用 JS 动态添加该自定义类..
猜你喜欢
  • 1970-01-01
  • 2013-06-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-08-23
相关资源
最近更新 更多