html怎么从左到右设置颜色,使用CSS从左到右填充文本颜色(Text colour fill from left to right using CSS)...
使用CSS從左到右填充文本顏色(Text colour fill from left to right using CSS)
我試圖動畫有".popUpWord"類的文本。 在懸停時，我想做一個顏色動畫，文字顏色從左到右變化。
hello
我想做的是類似于這個 - Animate文本填充從左到右 ，但我希望它從左到右填充并停止 ，而不是重復它。
這可以通過CSS嗎？
I am trying to animate the text having class ".popUpWord". On hover, I would like to do a colour animation with the colour of text changing from left to right.
hello
What I would like to do is similar to this one - Animate text fill from left to right , but I want it to be filled in from left to right and stop, rather than repeating it.
Is this possible through css please?
原文：https://stackoverflow.com/questions/40875736
更新時間：2020-02-27 12:02
最滿意答案
添加一個外部div add mix-blend-mode: multiply; 何時:hover
.popUpWord {
text-transform: uppercase;
font: bold 26vmax/.8 Open Sans, Impact;
background: black;
display: table;
color: white;
}
.outPop:hover {
margin: auto;
background: linear-gradient( crimson , crimson) white no-repeat 0 0;
background-size: 0 100%;
animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
mix-blend-mode: multiply;
}
@keyframes stripes {
to {
background-size:100% 100%;
}
}
body {
float:left;
height: 100%;
background: black;
}
Text
add an outer div add mix-blend-mode: multiply; when :hover
.popUpWord {
text-transform: uppercase;
font: bold 26vmax/.8 Open Sans, Impact;
background: black;
display: table;
color: white;
}
.outPop:hover {
margin: auto;
background: linear-gradient( crimson , crimson) white no-repeat 0 0;
background-size: 0 100%;
animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
mix-blend-mode: multiply;
}
@keyframes stripes {
to {
background-size:100% 100%;
}
}
body {
float:left;
height: 100%;
background: black;
}
Text
相關問答
你可以定義一個具有填充矩形的模式，以及一個在你的矩形之上的png圖像。 然后使用該模式作為填充的圓圈(或任何你想要的元素)。 這意味著走出Rapha?l，或延伸到做你想做的事。 請注意，什么({fill: "url(pattern.png)"})所做的就是創建一個模式元素，并附加一個指向給定url的圖像元素。 對Rapha?l進行攻擊是很有可能的，你也可以通過一種顏色來處理，然后通過創建與給定填充顏色相同尺寸的矩形來創建模式。 我應該說，如果你想讓它與IE <9一起工作，那么你可能需要在VML中實
...
如果字體不包含實心云圖像，則無法在CSS中執行此操作。 可以使用SVG圖像執行此操作。 幸運的是，字體下載包含許多示例和字體的SVG版本，因此您可以從中提取圖像并根據需要進行修改。 實際上，由于你所需要的只是云和太陽之間的白色背景，你可能會使用一個或兩個CSS基本圓形狀，并使用字體本身來獲得更詳細的云和太陽形狀。 It's not possible to do this in CSS if the font doesn't contain a solid cloud image. It is po
...
在data-*屬性中存儲相同的文本。 將它放在具有::before或::after偽元素的文本的正上方。 懸停時將其高度設置為0 。 .text {
display: inline-block;
vertical-align: top;
position: relative;
line-height: 40px;
font-size: 30px;
cursor: pointer;
margin: 20px;
color: gold;
}
.t
...
.tooltiptext {
position: relative;
}
.popUpWord {
color: pink;
}
.popUpWordBlack {
color: black;
}
.outPop {
margin: auto;
background: none;
width: 0;
overflow: hidden;
display: block;
position: absol
...
-webkit-text-fill-color僅僅是WebKit特定的color變體，與-webkit-text-fill-stroke一起使用(正如你所見， -webkit-background-clip: text 。在Safari CSS Reference中有記錄 。 -webkit-text-fill-color和color之間沒有區別，只是當兩個屬性都被指定時，WebKit將使用前者。 您可以利用這個優勢來指定僅在基于WebKit的瀏覽器-webkit-background-clip:
...
這是我能得到的最接近的：P .spiffy1 {
margin-left: 4px;
margin-right: 4px;
padding-left: 1px;
padding-right: 1px;
border-left: 1px solid #919191;
border-right: 1px solid #919191;
background: #3F3F3F;
}
.spiffy2 {
margin-left: 2px;
margin-right: 2
...
我將HTML標頭標簽交換到正文中。 你的身體標記是它將放置你所有的html減去標題頭標的位置。 沒什么大不了的，因為它渲染得很好，只是一種最佳做法。 我還更改了標題img的css，使其具有將圖像放置在h1標記之上的z-index，并且您的h1標記具有-100的z-index總是會落到后面。 希望這可以幫助。 .header img {
float: left;
background: #555;
z-index: 100; /* added */
width: 100px;
...
嘗試使用-webkit-background-clip: text; .element {
width: 100%;
height: 100px;
background: #23282d;
}
h1 {
font-family: Arial;
font-size: 10vw;
background: -webkit-linear-gradient(135deg, #2efdc7, #d71414, #146ed7);
-webkit-backgroun
...
您可以為每個路徑添加不同的類：
然后在CSS中定位這些類： .circleClass {
fill: red;
}
You can add a different class to each of the paths:
總結
以上是生活随笔為你收集整理的html怎么从左到右设置颜色,使用CSS从左到右填充文本颜色(Text colour fill from left to right using CSS)...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CISAW信息安全保障人员
- 下一篇： Windows Azure安全概述