有一个动画的例子
@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
background-color: #272727;
background-image: url(https://cdn.oboi7.com/bd48c3217e4d770da198fdff5fb165a3c6c09cd2/devushki-odetta-annable-lica.jpg);
background-size: cover;
background-repeat: no-repeat;
border-top: 1px solid transparent;
}
.test-grad {
font-size: 7vmax;
font-family: 'Anton', sans-serif;
text-align: center;
margin: 100px auto;
line-height: 2;
background-image: linear-gradient(to top, #fff 50%, #272727 50%), linear-gradient(to top, #000 50%, #fff 50%);
-webkit-background-clip: text, padding-box;
color: transparent;
mix-blend-mode: multiply;
animation: gradient-top 3s linear infinite;
background-size: 100% 200%;
background-position: top;
transition: background-position 1s ease-in-out;
}
@keyframes gradient-top {
0% {
background-position: bottom;
}
100% {
background-position: 50% 300%;
}
}
<div class="test-grad">Test gradient</div>
如何在 SVG 中实现这一点?
有人可能会有疑问А чем не устраивает данная реализация?
,问题是它在FF中不起作用。
在 Mozilla 浏览器中运行下面的示例,就会清楚问题所在。
@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
background-color: #272727;
}
.test-grad {
font-size: 7vmax;
font-family: 'Anton', sans-serif;
text-align: center;
margin: 100px auto;
line-height: 2;
background-image: linear-gradient(to top, #fff 50%, #272727 50%), linear-gradient(to top, #000 50%, #fff 50%);
-webkit-background-clip: text, padding-box;
color: transparent;
background-size: 100% 100%;
background-position: top;
}
<div class="test-grad">Test gradient</div>
但是,如果有一个没有解决方案的解决方案,SVG
并且这个示例适用于什么,那FF
也很好......
但是有一个解决方案FF
,但是没有mix-blend-mode: multiply;
,我不知道在哪里添加mix-blend-mode
@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
background-color: #272727;
background-image: url(https://cdn.oboi7.com/bd48c3217e4d770da198fdff5fb165a3c6c09cd2/devushki-odetta-annable-lica.jpg);
background-size: cover;
background-repeat: no-repeat;
border-top: 1px solid transparent;
}
.wrapper {}
.test-grad {
margin: 100px auto;
background-image: linear-gradient(to top, #fff 50%, #27272700 50%);
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-size: 100% 200%;
background-position: top;
animation: gradient-top 3s linear infinite;
}
.test-grad p {
color: transparent;
font-size: 95px;
font-family: 'Anton', sans-serif;
text-align: center;
background-image: linear-gradient(to top, #272727 50%, #fff 50%);
background-size: 100% 200%;
background-clip: text;
-webkit-background-clip: text;
animation: gradient-top 3s linear infinite;
}
@keyframes gradient-top {
0% {
background-position: bottom;
}
100% {
background-position: 50% 300%;
}
}
<div class="wrapper">
<div class="test-grad">
<p>Test gradient</p>
</div>
</div>
工作,接受的选项 -
#3
前两个选项不完全满足问题中的要求。
代码注释中的解释。
#1。
点击图片后动画开始。
#2。黑白文本动画的另一种选择
#3。选项使用
clipPath
和mask
clipPath
从黑色矩形mask
中剪下黑色铭文 从黑色条中剪下铭文,黑色条上填充有背景图像