問題 × 解決策

ロールオーバーで、光ったかのような演出をするボタンの作成方法

問題

ロールオーバーで、光ったかのように見せるには?

解決策

  1. 「animation-name: アニメーション名;」でアニメーションの名前を設定します。
  2. 「@keyframes アニメーション名{ ... }」でアニメーションを設定します。
  3. 0%(最初)に「opacity: 0」で透明にして、100%(最後)に「opacity: 1.0」で完全に不透明にします。

 

cssで光ったかのような演出をさせる。

ロールオーバーで、光ったかのような演出をするボタンの作成方法をご紹介します。

DEMOはこちら

HTMLはこちら

<p class="btn-light">
	<a href="#">ロールオーバーで光る風の演出</a>
</p>

CSSはこちら

  1. animation-name: アニメーション名;」でアニメーションの名前を設定します。
  2. @keyframes アニメーション名{ … }」でアニメーションを設定します。
  3. 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;
	}
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2 + nineteen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧