設頁面中有<div class=” wrap”></div>，若定義.wrap的樣式規則為：
.wrap
{
width: 200px;
height: 100px;
top:100px;
left:100px;
position: absolute;
background-color:#ff0;
border:4px solid #f00;
transform-origin: 50% 100%;
animation: spin 2s cubic-bezier(.175, .885, .32, 1.275) infinite;
}
定義關鍵幀spin，使矩形繞底部中點旋轉起來
@keyframes spin
{
0%,15% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
可在頁面中呈現如圖1所示的動畫。
圖1 矩形繞底部中點旋轉
在頁面中放置5個<div class=” wrap”></div>，使這5個矩形各自按給定的延遲進行旋轉。編寫如下的HTML文件。
<!DOCTYPE html>
<html>
<title>旋轉的矩形</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:400px;
background:#d8d8d8;
overflow:hidden;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.wrap
{
width: 200px;
height: 100px;
top:100px;
left:100px;
position: absolute;
background-color:#ff0;
border:4px solid #f00;
transform-origin: 50% 100%;
animation: spin 2s cubic-bezier(.175, .885, .32, 1.275) infinite;
}
.wrap:nth-child(1)
{
animation-delay: -0.05s;
}
.wrap:nth-child(2)
{
animation-delay: -0.1s;
}
.wrap:nth-child(3)
{
animation-delay: -0.15s;
}
.wrap:nth-child(4)
{
animation-delay: -0.2s;
}
.wrap:nth-child(5)
{
animation-delay: -0.25s;
}
@keyframes spin
{
0%,15% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
</div>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現出如圖2所示的動畫效果。
圖2 旋轉的5個矩形
在圖2的5個矩形中依次放置5個圓，每個矩形中放置一個圓，每個圓的大小依次遞減，使得5個圓同圓心，小圓完全嵌套在大圓內。取消原來矩形的邊框和背景色設置。
編寫如下的HTML文件。
<!DOCTYPE html>
<html>
<title>旋轉的同心圓</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:400px;
background:#d8d8d8;
overflow:hidden;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.wrap
{
width: 200px;
height: 105px;
top:100px;
left:100px;
position: absolute;
overflow: hidden;
transform-origin: 50% 100%;
animation: spin 2s cubic-bezier(.175, .885, .32, 1.275) infinite;
}
.wrap:nth-child(1)
{
animation-delay: -0.05s;
}
.wrap:nth-child(2)
{
animation-delay: -0.1s;
}
.wrap:nth-child(3)
{
animation-delay: -0.15s;
}
.wrap:nth-child(4)
{
animation-delay: -0.2s;
}
.wrap:nth-child(5)
{
animation-delay: -0.25s;
}
@keyframes spin
{
0%,15% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
.circle
{
border: 4px solid transparent;
border-radius: 100%;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.wrap:nth-child(1) .circle
{
border-color: hsl(0, 80%, 60%);
height: 90px;
width: 90px;
top: 7px;
}
.wrap:nth-child(2) .circle
{
border-color: hsl(60, 80%, 60%);
height: 76px;
width: 76px;
top: 14px;
}
.wrap:nth-child(3) .circle
{
border-color: hsl(120, 80%, 60%);
height: 62px;
width: 62px;
top: 21px;
}
.wrap:nth-child(4) .circle
{
border-color: hsl(180, 80%, 60%);
height: 48px;
width: 48px;
top: 28px;
}
.wrap:nth-child(5) .circle
{
border-color: hsl(240, 80%, 60%);
height: 34px;
width: 34px;
top: 35px;
}
</style>
</head>
<body>
<div class="container">
<div class="wrap"><div class="circle"></div></div>
<div class="wrap"><div class="circle"></div></div>
<div class="wrap"><div class="circle"></div></div>
<div class="wrap"><div class="circle"></div></div>
<div class="wrap"><div class="circle"></div></div>
</div>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現出如圖3所示的動畫效果。
圖3 旋轉的同心圓
將呈現圖3動畫效果的HTML文件中，矩形的高度修改為50px（原來的一半），此時各個同心圓被裁掉了一大半（超出矩形的部分被隱藏），只剩下5條弧段。在瀏覽器中呈現出如圖4所示的動畫效果。這個動畫效果可以作為一個Loading動畫。
圖4 旋轉的5條弧段