2021/02/14

CSSで点滅させる方法【現役エンジニアが解説】

PROGRAM

今回は、CSSで点滅させる方法について、3つの方法に分け、簡単に解説していきます。

opacity

opacityプロパティとanimationプロパティで点滅可能です。

opacityプロパティの値を0と1で切り替えることによって点滅させます。

.hoge1:hover{
    animation:blink1 1s ease infinite;
}
@keyframes blink1{
    50%{
        opacity:0;
    }
}

上記のコードでは、hoge1のクラスの要素にカーソルが乗っている間、点滅させています。

box-shadow

box-shadowプロパティとanimationプロパティで点滅させられます。

box-shadowプロパティで枠への影の表示と非表示を切り替えることで点滅させます。

.hoge2:hover{
    animation:blink2 1s ease infinite;
}
@keyframes blink2{
    50%{
        box-shadow:2px 2px 14px 2px red;
    }
}

上記のコードでは、hoge2というクラスの要素にカーソルが乗っている間、点滅させています。

text-shadow

text-shadowプロパティとanimationプロパティで点滅させることができます。

text-shadowプロパティで文字列への影の表示と非表示を切り替え、点滅させる仕組みです。

.hoge3:hover{
    animation:blink3 1s ease infinite;
}
@keyframes blink3{
    50%{
        text-shadow:2px 2px 2px green;
    }
}

上記のコードでは、hoge3というクラスを持つ要素にカーソルが乗っている間、点滅させています。

• facebook
• Tweet
• Read Later