カテゴリー: CSSサンプル

マーカーを塗っているCSS

Posted on by o

視界に入ると文字にマーカーを引く動作を行うCSSアニメーション

【CSS】

.marker-animation.active
　{
　　background-position: -100% .5em;
　}

.marker-animation

　{
　　background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
　　background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
　　background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
　　background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
　　background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
　　background-repeat: repeat-x;
　　background-size: 200% .8em;
　　background-position: 0 .5em;
　　transition: all 2s ease;
　　font-weight: bold;
　}
 
【HTML】
<span class=“marker-animation”>
　ここにマーカーをつける文章をいれる
</span>
 
「class=“marker-animation”」このコードをマーカーを引きたいところに入れてください。
他の装飾と被っても記述個所を分ける必要はありませんので、同じ場所に入れてください。