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

一部分だけ文字の色変更 (アニメーションあり)

$
0
0

タイトルの文字を部分的に変更

Image from Gyazo

アニメーションを付与しているタイトルのおすすめのみ色変更

index.html
<divclass="popular__header"><h2class="main-title tween-animate-title">おすすめ作品
  </h2><pclass="sub-title tween-animate-title">愛読歴20年の独断と偏見(TOP5)
  </p></div>
_base.scss
.popular{margin-bottom:80px!important;.main-title{.char:nth-child(1){color:aqua;}.char:nth-child(2){color:aqua;}.char:nth-child(3){color:aqua;}.char:nth-child(4){color:aqua;}}

nth-childを使用し、文字を指定し変更できた。

アニメーションがあるタイトルには、spanタグでおすすめを囲うやり方をしてもうまくいかなかった。

<h2><span>おすすめ</span>作品</h2>

Viewing all articles
Browse latest Browse all 8589

Trending Articles



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