CSS 3+HTML 5特効7-特殊なLoading効果

効果は以下の通りです.
<!--
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(-360deg);
}
}
@keyframes rotate {
100% {
transform: rotate(-360deg);
}
}
.border{
position: absolute;
top: 240px;
left: 300px;
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.border div {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 0px 30px #FF0000;
-webkit-animation: rotate 8s infinite linear ;
animation: rotate 8s infinite linear ;
}
.splitDiv{
height:250px;
}
-->
 
 
 
 
 
 
 
 
 
 
 
 
実現原理:

CSS 3の@keyframesルールを使用してアニメーション効果を作成します.

CSS 3のanimation効果でスクロール切り替えを完了します.

 
コードの説明:

スタイルシートの@-webkit-keyframesおよび@keyframesは、360度回転する操作を定義します.

スタイルシート.border divはdivの基本スタイルを定義し、赤い10 px円形である.

10個のdivネスト使用;

 

<style>

@-webkit-keyframes rotate {

  100% {

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

  }

}



@keyframes rotate {

  100% {

    transform: rotate(-360deg);

  }

}



.border{

  position: absolute;

  top: 10px;

  left: 10px;

  width: 300px;

  height: 300px;

  border: 1px solid #ccc;

}



.border div {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 10px;

  height: 10px;

  border-radius: 50%;

  box-shadow: 0px 30px #FF0000;

  -webkit-animation: rotate 8s infinite linear ;

  animation: rotate 8s infinite linear ;

}



</style>



<div class="border">

<div> 

<div> 

<div> 

<div> 

<div> 

<div> 

<div> 

<div> 

<div> 

<div> </div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>