在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'); 樣品