HTMLには、箇条書きリストを作成する際に使えるulタグがありますね。
ulタグでリストを作成すると、デフォルトでテキストの左側に丸がつきます。
- 箇条書きリストサンプルテキスト1
- 箇条書きリストサンプルテキスト2
- 箇条書きリストサンプルテキスト3
今回の記事では、この黒丸をカスタマイズして、好きな色を指定＆脈動するようなアニメーションを実装していきます！
- 実装DEMOサンプルテキスト1
- 実装DEMOサンプルテキスト2
- 実装DEMOサンプルテキスト3
各テキストの左側を見てみると、丸が徐々に広がっていくアニメーションが確認できますね。
コピペ用のコード一式と、各コードの解説をしていきますので、興味がある方はぜひ参考にしてみてください。
【コピペ用】ulタグの丸が脈動するアニメーションの実装コード
コピペしてすぐに使いたい方のために、コード一式を載せておきますので、自由にお使いください。
<ul class="pulse-ul">
<li>テキストを入れてください</li>
<li>テキストを入れてください</li>
<li>テキストを入れてください</li>
</ul>/* 簡易リセットCSS */
*, *::before, *::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* ulタグ */
.pulse-ul {
list-style: none;
}
/* liタグ */
.pulse-ul li {
position: relative;
padding-left: 20px;
line-height: 2;
}
/* liタグの丸の共通スタイル */
.pulse-ul li::before,
.pulse-ul li::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
left: 5px;
top: calc(1em - 4px);
}
/* liタグの丸1のスタイル */
.pulse-ul li::before {
background-color: #8ec2ff;
animation: pulsate 2s infinite;
}
/* liタグの丸2のスタイル */
.pulse-ul li::after {
background-color: #2894d0;
}
/* 脈動アニメーション */
@keyframes pulsate {
0% {
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(2.5);
}
}これらをコピペすることで、以下のようなリストを作成できます！
- テキストを入れてください
- テキストを入れてください
- テキストを入れてください
次からはコードの解説をしていきますので、コードを理解したい・カスタマイズしたいという方はぜひ読み進めてください。
【解説】ulタグの丸が脈動するアニメーションの実装コードの解説
ここからは、実装コードの解説を行います。
- HTMLでリストを作成
- CSSでリストを装飾
この順番で説明していきますね。
HTMLでリストを作成
まずはHTMLでリストを作成していきます。
<ul class="pulse-ul">
<li>テキストを入れてください</li>
<li>テキストを入れてください</li>
<li>テキストを入れてください</li>
</ul>箇条書きリストは、ulタグ（unordered list）と、liタグ（list item）で作成することができますね。
ulタグには、CSSで装飾できるようpulse-ulというクラスを付けておきます。
これでHTMLは完了です！
CSSでリストを装飾
CSSでは、実際に丸部分の装飾とアニメーションを指定していきます。
まずは全体のCSSをもう一度確認しましょう。
/* 簡易リセットCSS */
*, *::before, *::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* ulタグ */
.pulse-ul {
list-style: none;
}
/* liタグ */
.pulse-ul li {
position: relative;
padding-left: 20px;
line-height: 2;
}
/* liタグの丸の共通スタイル */
.pulse-ul li::before,
.pulse-ul li::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
left: 5px;
top: calc(1em - 4px);
}
/* liタグの丸1のスタイル */
.pulse-ul li::before {
background-color: #8ec2ff;
animation: pulsate 2s infinite;
}
/* liタグの丸2のスタイル */
.pulse-ul li::after {
background-color: #2894d0;
}
/* 脈動アニメーション */
@keyframes pulsate {
0% {
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(2.5);
}
}これらのコードを、
ulタグliタグliタグの丸部分- 脈動アニメーション
以上に分けて解説していきますね。
ulタグのスタイル
.pulse-ul {
list-style: none;
}まずはulタグにデフォルトで設定されている丸が邪魔なので、消してしまいましょう。
list-styleの値にnoneを指定することで、デフォルトの丸を消すことができます。
liタグのスタイル
.pulse-ul li {
position: relative;
padding-left: 20px;
line-height: 2;
}続いてはliタグを装飾していきます。
position: relativeは、丸の部分を絶対位置指定するために必要です。
次にpadding-leftで丸を配置するための余白を確保します。
最後に、各行の高さを調整するためにline-heightを指定しておきます。
liタグに最低限必要なスタイルは以上です！
文字サイズや文字色など、他にも文字に関して指定したい場合は、自由にカスタマイズしてください。
liタグの丸部分のスタイル
/* liタグの丸の共通スタイル */
.pulse-ul li::before,
.pulse-ul li::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
left: 5px;
top: calc(1em - 4px);
}
/* liタグの丸1のスタイル */
.pulse-ul li::before {
background-color: #8ec2ff;
animation: pulsate 2s infinite;
}
/* liタグの丸2のスタイル */
.pulse-ul li::after {
background-color: #2894d0;
}ここからが今回のメインとなる丸部分の装飾です。
丸はそれぞれ::beforeと::afterの擬似要素を使用して実装していきます。
::before…アニメーション付きの丸::after…アニメーションなしの丸
少しコードが長いので、3つに分けて説明していきますね。
2つの丸の共通スタイル
.pulse-ul li::before,
.pulse-ul li::after {
content: "";
position: absolute;
width: 8px; /* 丸の横幅 */
height: 8px; /* 丸の横幅 */
border-radius: 50%; /* 丸みをつける */
left: 5px;
top: calc(1em - 4px); /* 1行目のちょうど中心に丸を配置する */
}まずは全く同じサイズの2つの丸を、同じ位置に配置します。
この時点では2つとも重なっているため、1つの円があるようにしか見えません。
この時、topプロパティで垂直方向の位置を指定するのですが、calcを使用してちょうど行の中心に丸がくるように指定します。
計算式は、以下の通りです。
(line-height ÷ 2)em – (円の縦幅 ÷ 2)px
ここでは詳しくは説明しませんが、この式の通りに計算することで丸を1行の高さの中心に配置できるようになります。
lihe-heightか丸の高さを変更する場合は、こちらの値も同時に調整してください。
これで2つの丸の共通スタイルが完成したので、次でそれぞれの丸を個別に装飾していきます。
::beforeの丸のスタイル（アニメーション付き）
.pulse-ul li::before {
background-color: #8ec2ff;
animation: pulsate 2s infinite;
}まずはアニメーション付きの丸の装飾からみていきましょう。
背景色には少し薄めの青を指定し、animationには次で作成するpulsateを指定しています。
::afterの丸のスタイル（アニメーションなし）
.pulse-ul li::after {
background-color: #2894d0;
}続いては、2つ目の丸を装飾します。
こちらにはアニメーションを設定しないので、背景色を指定するだけで終わりですね。
脈動アニメーションを作成
最後に、丸が徐々に広がっていく脈動アニメーションを作成していきます。
@keyframes pulsate {
0% {
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(2.5);
}
}まず、丸が徐々に拡大していくアニメーションには、transformプロパティのscale()関数を使用します。
0%の時点では、scale(1)としています。これは元の大きさの1倍の大きさにするという指定なので、大きさは変わりません。
次に100%の時点では、scale(2.5)となっていますね。これは元の大きさの2.5倍にするという意味になるため、時間が経過するにつれ丸を拡大するという指定になります。
scale関数については過去に別記事でまとめていますので、以下のリンクからご覧ください。
あとは丸を徐々に透明にしていくために、opacityを1から0へと変化させることで、最終的には透明になります。
丸のスタイルのパートで、animationを指定しましたね。
animation: pulsate 2s infinite;この一行は、作成したアニメーションpulsateを2秒感間隔で無限に繰り返すという意味になります。
これで丸部分が徐々に広がっていくアニメーション付きのリストを作成することができました！
- 実装DEMOサンプルテキスト1
- 実装DEMOサンプルテキスト2
- 実装DEMOサンプルテキスト3
【まとめ】ulタグの丸が脈動するアニメーションを実装する方法
CSSでulタグの丸が脈動するようなアニメーションを実装する方法を紹介しました。
色の部分はサイトカラーに合わせるとより良くなると思いますので、ぜひ使ってみてください！
今回はリストタグでしたが、ボタンタグに波紋アニメーションを実装する方法も紹介していますので、興味があればどうぞ。
コメント