使用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?
原文：/questions/40875736
更新时间：-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)...
