Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8582

文字のアウトラインだけ色が変化するCSSアニメーション

$
0
0

やりたいこと

  • テキストのアウトラインだけ色が変化するようにしたい
  • テキストは決め打ちではなく、自由に変えられる

イメージ

スクリーンショット 2020-02-27 23.41.25.png

このカラフルな部分がグラデアニメーションする感じです。

出来上がったコード

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.


Viewing all articles
Browse latest Browse all 8582

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>