Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】変わり種!アニメーションによる文字装飾 3種

 どうも!LSSです!!

 

またまた?変わり種CSSネタ3種、作ってみました。

 

 

ちかちかアンダーライン

このように、文章の一部に時々アンダーラインがつきます。

 

コード

<style><!--
@keyframes uwavea{
0%{text-decoration-line:none;}
69%{text-decoration-line:none;}
70%{text-decoration-line:underline;}
79%{text-decoration-line:underline;}
80%{text-decoration-line:none;}
89%{text-decoration-line:none;}
90%{text-decoration-line:underline;}
99%{text-decoration-line:underline;}
100%{text-decoration-line:none;}
}
.uwave{
animation:uwavea 3s linear 0s infinite;
text-decoration-style:double;
text-decoration-color:red;
}
--></style>
<p>このように、<span class="uwave">文章の一部</span>に時々アンダーラインがつきます。</p>

 

 

影分身!

このように、文章の一部が分裂、回転します。

 

コード

<style><!--
@keyframes moyaa{
0%{text-shadow:0px 0px 0px black,0px 0px 0px black;}
50%{text-shadow:0px 0px 0px black,0px 0px 0px black;}
60%{text-shadow:0px -10px 5px black,0px 10px 5px black;}
70%{text-shadow:10px 0px 5px black,-10px 0px 5px black;}
80%{text-shadow:0px 10px 5px black,0px -10px 5px black;}
90%{text-shadow:-10px 0px 5px black,10px 0px 5px black;}
100%{text-shadow:0px 0px 0px black,0px 0px 0px black;}
}
.moya{
animation:moyaa 5s linear 0s infinite;
}
--></style>
<p>このように、<span class="moya">文章の一部</span>が分裂、回転します。</p>

 

 

アニメーションマーカー

このように、文章の一部に引いた線に、違う色が走ります。

  

コード

<style><!--
@keyframes mkmva{
0%{background-position:-100% 70%,0% 70%;}
70%{background-position:-100% 70%,0% 70%;}
100%{background-position:200% 70%,0% 70%;}
}
.mkmv{
animation:mkmva 5s linear 0s infinite;
background-image:linear-gradient(90deg,#ffa500c0 0%,yellow 30%,yellow 70%,#ffa500c0 100%),linear-gradient(90deg,#ffa500c0 0%,#ffa500c0 100%);
background-repeat:no-repeat;
background-size:50% 30%,100% 30%;
}
--></style>
<p>このように、<span class="mkmv">文章の一部</span>に引いた線に、違う色が走ります。</p>

 

 

使い方

3種類、いずれも、コードの大部分を占める

 <style><!--

で始まり、

 --></style>

までの数行をまずコピペしてから、装飾したい部分を

 <span class="それぞれのクラス名">装飾したい部分</span>

のように<span>タグでクラスを指定する事で効果がのります。 

 

なお、<style>タグ数行をコピペした同ページ(記事)内では、<span>タグはいくつでも配置する事ができます^^

 

 

その他、テキスト装飾関連記事

CSSでの装飾、大きく分けると

  • 「ボックス(枠)装飾」
  • 「テキスト(文字)装飾」

に大別できるかと思います。

 

今回の記事は後者、テキスト装飾ですね。

その他、テキスト装飾関連記事はこちら!

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^

 

 

Amazonアソシエイトの方におすすめの おもちゃ・ホビー商品