html5中加亮文本,HTML5中的文本高亮

你的意思是这样的？只使用CSS来将文本流过它，在这个示例中不需要javascript ;-)但是您可以随时切换出具有所需效果的类。

它所做的是使用transition属性，它允许它在诸如悬停之类的事件之后在不同的css状态之间进行动画处理，单击active等。

要突出显示一个字母的一部分，您需要添加该HTML元素两次。我用彩色和朴素做了什么。这也适用于单个字母。您需要将它们设置为绝对位置并将它们包裹在相对的div中。通过这样做，他们将自己定位到相对包装div的左上角位置(在我的示例中)。这样，您就可以保持文本流，如果您使用的是的包装FO例如

然后，设置一个宽度0或者你想让它掩盖了其他盘符半

在我的例子无论宽度仅Y的一半是红色的，另一半(一半是)不是红色的。

如果你想覆盖上半部分，你可以玩高度。

#container {

font-size:40px;

position:relative;

background-color:#CCC;

width:450px;

height:40px;

}

#coloured {

position:absolute;

z-index:2;

top:0px;

left:0px;

display:block;

width:0%;

-webkit-transition: width 1s ease-in-out;

-moz-transition: width 1s ease-in-out;

-o-transition: width 1s ease-in-out;

transition: width 1s ease-in-out;

color:red;

overflow:hidden;

}

#container:hover #coloured {

width:100%;

}

#plain {

position:absolute;

z-index:1;

width:100%;

display:block;

top:0px;

left:0px;

color:black;

}

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz