我有一个SVG animation我创建的背景并有一个文本。检查jsFiddle
HTML：
<div class="content">
<!-- Background SVG -->
<svg width="1500" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="background-svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Background</title>
<path fill="#fefefe" stroke="#000000" stroke-width="5" d=" m498.33967,-113.03246c99.6527,78.64871 -127.11402,258.15614 -190.68809,236.79926c-63.57406,-21.35688 -114.68809,-306.16174 -46.65269,-211.12362c68.0354,95.03812 137.68808,-104.32435 237.34078,-25.67564z" id="shap" stroke-opacity="0" fill-opacity="0.9" />
</g>
</svg>
<!-- /Background SVG -->
<div class="container">
<!-- Intro -->
<div id="intro">
<p >Text</p>
<h1 ><strong>Title Here</strong></h1>
</div>
<!-- /Intro -->
</div>
</div>
CSS
.content {
color: #fff;
background-color: #f857a6;
position: fixed;
top: 0;
height: 100%;
width: 100%;
}
.background-svg {
position: absolute;
z-index: -4;
width: 100%;
height: 100%;
}
.background-svg path {
-webkit-animation: svgAnimate 20s infinite alternate linear;
animation: svgAnimate 20s infinite alternate linear;
}
@-webkit-keyframes svgAnimate {
to {
d: path("m276.33967,389.03246c130.6527,-65.35129 -20.11402,367.15614 -190.68809,236.79926c-170.57407,-130.35688 -161.68809,-159.16174 -46.65269,-211.12362c115.0354,-51.96188 106.68808,39.67565 237.34078,-25.67564z");
}
}
@keyframes svgAnimate {
to {
d: path("m276.33967,389.03246c130.6527,-65.35129 -20.11402,367.15614 -190.68809,236.79926c-170.57407,-130.35688 -161.68809,-159.16174 -46.65269,-211.12362c115.0354,-51.96188 106.68808,39.67565 237.34078,-25.67564z");
}
}
/*====================*/
/* Intro Div */
#intro {
border-radius: 20px;
padding: 60px;
height: 500px;
position: relative;
margin-top: 7%;
}
.name {
font-family: 'Raleway', sans-serif;
font-weight: 900;
}
/*====================*/
我想在动画匹配时更改文本颜色，并在离开时保持默认颜色。
任何帮助？
提前致谢
更新
用另一个例子解决：https : //codepen.io/norhan22/pen/jwJvxw?editors=1100
一种选择是使用 CSS 属性mix-blend-mode。它控制元素如何将其颜色与其父元素的其他内容混合。
因此，例如，如果您设置：
mix-blend-mode: exclusion;
在文本上，当文本与移动的 blob 相交时，您可以使文本颜色反转。为了避免粉红色背景颜色也弄乱颜色，我们需要将其移动到不是<svg>或其父元素( <div class="content">)的元素。所以我刚刚把它移到了<body>这个例子的元素中。
body {
background-color: #f857a6;
}
.content {
color: #fff;
position: fixed;
top: 0;
height: 100%;
width: 100%;
}
.background-svg {
position: absolute;
z-index: -4;
width: 100%;
height: 100%;
}
.background-svg path {
-webkit-animation: svgAnimate 25s infinite alternate linear;
animation: svgAnimate 25s infinite alternate linear;
}
@-webkit-keyframes svgAnimate {
to {
d: path("m276.33967,389.03246c130.6527,-65.35129 -20.11402,367.15614 -190.68809,236.79926c-170.57407,-130.35688 -161.68809,-159.16174 -46.65269,-211.12362c115.0354,-51.96188 106.68808,39.67565 237.34078,-25.67564z");
}
}
@keyframes svgAnimate {
to {
d: path("m276.33967,389.03246c130.6527,-65.35129 -20.11402,367.15614 -190.68809,236.79926c-170.57407,-130.35688 -161.68809,-159.16174 -46.65269,-211.12362c115.0354,-51.96188 106.68808,39.67565 237.34078,-25.67564z");
}
}
/*====================*/
/* Intro Div */
#intro {
/*
background:#fff;
color:#f857a6;
*/
border-radius: 20px;
padding: 60px;
height: 500px;
position: relative;
/* box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.23);*/
margin-top: 7%;
}
.name {
font-family: 'Raleway', sans-serif;
font-weight: 900;
mix-blend-mode: exclusion;
}
/*====================*/<div class="content">
<!-- Background SVG -->
<svg width="1500" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="background-svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Background</title>
<path fill="#fefefe" stroke="#000000" stroke-width="5" d=" m498.33967,-113.03246c99.6527,78.64871 -127.11402,258.15614 -190.68809,236.79926c-63.57406,-21.35688 -114.68809,-306.16174 -46.65269,-211.12362c68.0354,95.03812 137.68808,-104.32435 237.34078,-25.67564z" id="shap" stroke-opacity="0" fill-opacity="0.9" />
</g>
</svg>
<!-- /Background SVG -->
<div class="container">
<!-- Intro -->
<div id="intro" class="left-center">
<p class="">Text</p>
<h1 class="name display-3"><strong>Title Here</strong></h1>
</div>
<!-- /Intro -->
<!-- Porfolio -->
<div id="portfolio">
</div>
<!-- /Porfolio -->
<!-- Contact Me -->
<div id="contact">
</div>
<!-- /Contact Me -->
</div>
</div>
我相信这应该适用于除 IE 之外的所有现代浏览器。但是，无论如何，您的动画现在只能在 Chrome 中使用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句