wordpress

WORDPRESS CSSで画像をキラリと光らせる

WORDPRESS CSSで画像をキラリと光らせる

CSS を利用して画像をキラリと光らせる方法

.reflection{
display:inline-block;
position:relative;
overflow:hidden;
}
 
.reflection:after {
content:"";
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
}
 
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

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

キラリと光らせたいブロックの高度な設定を開いて追加 CSS クラスへ reflection を追加します。

カスタムHTMLの場合は、

<div class="reflection">
<img src="画像の URL">
</div>

-wordpress

PAGE TOP