在背景的SVG動畫中更改顏色文本

我有我創建並具有文本的背景SVG animation。 檢查jsFiddle在背景的SVG動畫中更改顏色文本

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; 
} 

/*====================*/

我想改變文字顏色，而動畫匹配它，並在休息到默認的顏色樹葉。

任何幫助？

由於事先

來源

2017-07-15 Norhan

只是重疊的部分改變顏色？或者整個文本改變了？你有沒有考慮過在文本邊框放置邊框的更簡單的選擇？ https://jsfiddle.net/vf9fzLuh/3/ –

你只是部分你的解決方案是漂亮:) 有沒有辦法改變部分的文字顏色？（不只是邊框） – Norhan

一種選擇是使用CSS屬性mix-blend-mode。它控制元素如何將其顏色與其父元素的其他內容混合。

因此，舉例來說，如果你設置：

mix-blend-mode: exclusion;

上的文字，就可以使文本顏色反轉當它與移動BLOB相交。爲了避免與顏色混淆的粉紅色背景色，我們需要將其移動到不是<svg>或其父項（<div class="content">）的元素。所以我剛把它移到了這個例子的<body>元素上。

body { 
 
    background-color: #f857a6; 
 
} 
 
.content { 
 
\t color: #fff; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 
.background-svg { 
 
\t position: absolute; 
 
\t z-index: -4; 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 
.background-svg path { 
 
\t -webkit-animation: svgAnimate 25s infinite alternate linear; 
 
\t animation: svgAnimate 25s infinite alternate linear; 
 
} 
 
@-webkit-keyframes svgAnimate { 
 
to { 
 
\t \t 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"); 
 
\t } 
 
} 
 
@keyframes svgAnimate { 
 
\t to { 
 
\t \t 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"); 
 
\t } 
 
} 
 

 
/*====================*/ 
 

 

 
/* Intro Div */ 
 

 
#intro { 
 
\t /* 
 
\t background:#fff; 
 
\t color:#f857a6; 
 
*/ 
 
\t border-radius: 20px; 
 
\t padding: 60px; 
 
\t height: 500px; 
 
\t position: relative; 
 
\t /* \t box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.23);*/ 
 
\t margin-top: 7%; 
 
} 
 
.name { 
 
\t font-family: 'Raleway', sans-serif; 
 
\t font-weight: 900; 
 
    mix-blend-mode: exclusion; 
 
} 
 

 
/*====================*/

<div class="content"> 
 
\t \t <!-- Background SVG --> 
 
\t \t <svg width="1500" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="background-svg"> 
 
\t \t \t <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> 
 
\t \t \t <g> 
 
\t \t \t \t <title>Background</title> 
 
\t \t \t \t <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" /> 
 
\t \t \t </g> 
 
\t \t </svg> 
 
\t \t <!-- /Background SVG --> 
 

 
\t \t <div class="container"> 
 

 
\t \t \t <!-- Intro --> 
 
\t \t \t <div id="intro" class="left-center"> 
 
\t \t \t \t <p class="">Text</p> 
 
\t \t \t \t <h1 class="name display-3"><strong>Title Here</strong></h1> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <!-- /Intro --> 
 

 
\t \t \t <!-- Porfolio --> 
 
\t \t \t <div id="portfolio"> 
 

 
\t \t \t </div> 
 
\t \t \t <!-- /Porfolio --> 
 

 
\t \t \t <!-- Contact Me --> 
 
\t \t \t <div id="contact"> 
 

 
\t \t \t </div> 
 
\t \t \t <!-- /Contact Me --> 
 
\t \t </div> 
 
\t </div> 
 
\t

我相信這應該只是IE所有現代瀏覽器。無論如何，您的動畫只能在Chrome中運行。

來源

2017-07-15 11:21:11

雅，它是完全一樣我想:)謝謝 – Norhan

只是我可以改變黑色的顏色給別人嗎？以及爲什麼它不反轉顏色（混合模式顏色文本變成粉紅色）？ – Norhan

您無法直接設置重疊時顯示的顏色。您需要嘗試使用文本顏色，背景顏色，blob顏色和「mix-blend-mode」值，以找到能夠滿足您需求的最佳組合的組合。只有一些模式會產生你想要的效果。請閱讀更多信息：https：//developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode –

在背景的SVG動畫中更改顏色文本

回答

相關問題