問題
ロールオーバーで、光ったかのように見せるには？
解決策
- 「animation-name: アニメーション名;」でアニメーションの名前を設定します。
- 「@keyframes アニメーション名{ ... }」でアニメーションを設定します。
- 0%（最初）に「opacity: 0」で透明にして、100%（最後）に「opacity: 1.0」で完全に不透明にします。
cssで光ったかのような演出をさせる。
ロールオーバーで、光ったかのような演出をするボタンの作成方法をご紹介します。
DEMOはこちら
HTMLはこちら
<p class="btn-light">
<a href="#">ロールオーバーで光る風の演出</a>
</p>CSSはこちら
- 「animation-name: アニメーション名;」でアニメーションの名前を設定します。
- 「@keyframes アニメーション名{ … }」でアニメーションを設定します。
- 0%（最初）に「opacity: 0」で透明にして、100%（最後）に「opacity: 1.0」で完全に不透明にします。
.btn-light a{
display: inline-block;
padding: 6px 15px;
color: #F15A24;
font-weight: bold;
background-color: #FCECE8;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
}
.btn-light a:hover{
-webkit-animation-name: light;
animation-name: light;
}
@-webkit-keyframes light {
0%{
opacity: 0;
}
100%{
opacity: 1.0;
}
}
@keyframes light {
0%{
opacity: 0;
}
100%{
opacity: 1.0;
}
}
コメント