Question

我有一个我创建的背景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

Answer 1

一种选择是使用CSS属性mix-blend-mode。它控制元素如何将其颜色与其父元素的其他内容混合。

因此，例如，如果您设置：

mix-blend-mode: exclusion;

在文本上，您可以在文本颜色与移动的斑点相交时反转。为了避免混淆颜色的粉红色背景颜色，我们需要将其移动到不是<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。

在背景的SVG动画中更改颜色文本

1 个答案: