どうも!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アソシエイトの方におすすめの おもちゃ・ホビー商品