在html5中突出显示文字

Question

我正在尝试使用uni代码编写telugu文本，以便我可以根据声音更改为多种颜色来突出显示文本。 因为我使用的是html5和js

<div  class="pa">&#3114;</div>
<div  class="paa">&#3114;&#3134;</div>

通过使用

$("#paa").animate({ color: "blue" }, 500); 

我可以改变字母的整个颜色，但现在我要强调那封信的某些部分。 请建议如何做到。???

Answer 1

有一些css技巧来伪造background-clip：text; 或类似的东西SVG。

 span { position:relative; color:green; } span:before { position:absolute; top:0; left:0; overflow:hidden; content:attr(data-text); color:blue; height:0.7em; overflow:hidden; animation: txtclr 4s infinite; } p { background:yellow; color:rgba(128, 0, 128 , 0.5); font-size:2em; font-weight:bold; background:linear-gradient(to bottom,lightgray 50%,yellow 50%); display:table;/* demo purpose to shrink to text size*/ box-shadow:inset -3em 0 rgba(100,100,100,0.5); } @keyframes txtclr { 0% { height:50%; } 25%,75%{ height:0; width:0; } 50%{ height:100%; } } 

 <p><span data-text="my text">my text</span> and some other text </p> 

运行代码段并查看从上到下填充蓝色的绿色文本。

没有添加前缀，以后的浏览器不需要它:)

Answer 2

你的意思是这样的吗？ 仅使用css在其上传输文本，在此示例中不需要javascript ;-)但是您可以随时切换具有所需效果的类等。

它的作用是使用transition属性，允许它在悬停，点击活动等事件之后在不同的css状态之间制作动画。

要突出显示字母的一部分，您需要将该HTML元素添加两次。 我用彩色和平原做了什么。 这也适用于个别字母。 您需要将它们设置为绝对位置并将它们包装在相对div中。 通过这样做，他们将自己绝对定位到相对包装div的左上角位置（在我的例子中）。 这样，如果使用<span>作为包装器示例，则可以保留文本流

然后你将一个设置为宽度0或任何你希望它覆盖另一半字母的宽度

在我的例子中，只有Y的一半是红色，另一半（半ish）不是红色。

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

http://jsfiddle.net/L9L8L966/1/

  #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; } 

 <div id="container"> <div id="coloured"> abcdefghijklmnopqrstuvwxyz </div> <div id="plain"> abcdefghijklmnopqrstuvwxyz </div> </div> 

Answer 3

这是可行的，但并不容易使用所有语言。 在下面的示例中，我在某些字母上添加了重音符号。 http://jsfiddle.net/07hh3z2n/5/

提示是使用CSS来获取没有宽度的inline-block 。

.phantom {
    display: inline-block;
    color: red;
    width: 0;
    overflow: visible;
}

如果要突出显示的字母部分是现有的unicode字符，则可以正常工作。 否则，您可以尝试使用（或创建）带有要突出显示的字母部分的特殊字体。

Answer 4

如果你想在你的代码中动态突出显示，我会使用一个javascript框架工作Highlight.js 。 它非常轻便，易于使用。 这是jquery和knockout示例的小提琴： $('.searchme').highlight('high'); 样品