wordpress

WORDPRESS CSSで画像を点滅

WORDPRESS CSSで画像を点滅

CSS Animation を利用して点滅させる方法

.blinking{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

テーマのカスタマイズの追加ＣＳＳへ上記コードを追加します。

点滅したいブロックの高度な設定を開いて追加 CSS クラスへ blinking を追加します。

カスタムHTMLの場合は、

<span class="blinking">点滅させたいテキストや画像</span>

-wordpress

PAGE TOP