背景の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/ –

yaちょうどの部分あなたの解決策はかなりです:) 部品のテキストの色を変更する方法はありますか？（境界だけでなく） – Norhan

1つのオプションは、CSSプロパティmix-blend-modeを使用することです。これは、要素がどのように色をその親要素の他の内容とブレンドするかを制御します。

したがって、たとえば、あなたが設定されている場合：それは動いてブロブと交差するとき

mix-blend-mode: exclusion;

テキストには、テキストの色の反転を行うことができます。ピンクの背景色が色付きでならないようにするには、<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

オーバーラップに表示される色を直接設定することはできません。テキストの色、背景色、ブロブの色、 'mix-blend-mode'の値を実験する必要があり、必要に応じて最適な組み合わせを見つけることができます。いくつかのモードだけが、あなたが望む効果を生み出します。詳細はこちら：https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode –

背景のSVGアニメーション中に色のテキストを変更します

答えて

関連する問題