Web

各パーツのデモを作ってみました。Part2

cssのみで作ることが出来るアニメーションを更新しています。

マウスオーバーで回転させる

デモページ

くるくると自動で回る要素と、マウスオーダーで回転する要素のデモです。
※デモページなので簡素ですが…

回転させる要素だけですが、コードは下記になります。
※参考:http://www.webopixel.net/lab/sample/13/1028css3-onepoint/

	
BUTTON

※めちゃシンプル!

	
.btn01 {
    color: #fff;
    text-decoration: none;
    background-color: #dda0dd;
    display: block;
    width: 150px;
    height: 150px;
    line-height: 150px;
    border-radius: 50%;
    /* ここで動く速度とか設定 */
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}
.btn01:hover {
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
}

マウスオーダー時に一回点だけであれば、
「rotate」を360にすれば完成です!

transform: rotate(720deg);
-webkit-transform: rotate(720deg);

自動的に回転させる

回転させる要素だけですが、コードは下記になります。
※参考:http://on-ze.com/archives/510

	
class="load"

※回転させたい要素に、上記クラス名を付けます。

	
.load {
width: 50px;
height: 50px;
background: #1aa;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -ms-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

スピードを変えたいときは、

1.5s

この数値を変更すれば実装できます!
デモページではゆっくり動くバージョンも入れていますが、

1.5s→5

に設定しています。

お問い合わせフォーム

気になる方はコチラからお問い合わせ!
必須お名前
必須メールアドレス
必須郵便番号
必須ご住所
必須電話番号
ご相談内容
必須メッセージ本文

コメントを残す

*