CSSファイル
shiny.cssを作成：内容は下記
—————————————–
.reflection-img{
width : 823（ボタンサイズあわせ）px;
height :162（ボタンサイズあわせ）px;
margin: 0px auto 30px;
display: block;
position :relative;
overflow :hidden;
}
.reflection {
height :100%;
width :30px;
position :absolute;
top :-180px;
left :0;
background-color: #fff;
opacity :0;
transform: rotate(45deg);
animation: reflection 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
-moz-transform: rotate(45deg);
-moz-animation: reflection 2s ease-in-out infinite;
-ms-transform: rotate(45deg);
-ms-animation: reflection 2s ease-in-out infinite;
-o-transform: rotate(45deg);
-o-animation: reflection 2s ease-in-out infinite;
}
@keyframes reflection {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { transform: scale(4) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-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; }
}
@-moz-keyframes reflection {
0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}
—————————————–
HTMLのhead内記載
→shiny.cssを読みにいくよというタグ
<link rel=”stylesheet” href=”css/shiny.css” type=”text/css”>
HTLM設置記載
→きらりんボタンの設置タグ
<div class=”reflection-img”>
<a href=”リンク先” target=”_”><img src=”ボタン画像”></a>
<div class=”reflection”></div>
</div>