やりたいこと
- テキストのアウトラインだけ色が変化するようにしたい
- テキストは決め打ちではなく、自由に変えられる
イメージ
このカラフルな部分がグラデアニメーションする感じです。
出来上がったコード
index.html
<pclass="txt-outline">TEXT OUTLINE</p>style.css
body{background-color:#fff;}.txt-outline{text-align:center;font-size:5rem;color:#fff;-webkit-text-stroke:4pxrgba(0,0,0,0);text-stroke:4pxrgba(0,0,0,0);font-weight:bold;letter-spacing:3px;background:-moz-linear-gradient(-45deg,#661df70%,#fcbf2f25%,#ef26ba50%,#2696f275%,#661df7100%)0%center/200%auto;background:-webkit-linear-gradient(-45deg,#661df70%,#fcbf2f25%,#ef26ba50%,#2696f275%,#661df7100%)0%center/200%auto;background:linear-gradient(135deg,#661df70%,#fcbf2f25%,#ef26ba50%,#2696f275%,#661df7100%)0%center/200%auto;background-clip:text;-webkit-background-clip:text;-webkit-animation:outlineRun4slinearinfinite;animation:outlineRun4slinearinfinite;}/* 背景の横位置をズラす */@-webkit-keyframesoutlineRun{to{background-position-x:200%;}}@keyframesoutlineRun{to{background-position-x:200%;}}text-strokeの色を透明にし、背景色と文字色を同じにするのがポイントです。
実際のサンプル
See the Pen outline text animation by Mei Koutsuki (@mei331) on CodePen.