[CSS]くるくる回るDivを作成する

ずっとくるくる回るdivを配置したい場合は以下のコードを実装する

回転させたい要素に「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);}
}

コメントを残す

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