CSS實現開鎖轉圈動畫

.lock{
position: relative;
width: 80px;
height: 100px;
margin: 50px auto;
}
.lock .lock-body{
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 100px;
background-color: #f5f5f5;
border: 2px solid #999;
border-radius: 20px;
box-shadow: -2px 0 6px rgba(0,0,0,0.3);
}
.lock .lock-body:before{
content: "";
position: absolute;
top: 12px;
left: 33px;
width: 14px;
height: 14px;
background-color: #f5f5f5;
border: 2px solid #999;
border-radius: 50%;
}
.lock .lock-body:after{
content: "";
position: absolute;
top: 40px;
left: 5px;
width: 70px;
height: 60px;
background-color: #f5f5f5;
border: 2px solid #999;
border-radius: 0 0 20px 20px;
}
.lock .lock-hole{
position: absolute;
top: 36px;
left: 27px;
width: 26px;
height: 26px;
background-color: #999;
border-radius: 50%;
transform: rotate(45deg) skew(20deg);
}
.lock .lock-hole:before{
content: "";
position: absolute;
top: 7px;
left: 7px;
width: 12px;
height: 12px;
background-color: #f5f5f5;
border-radius: 50%;
}
.lock .lock-hole:after{
content: "";
position: absolute;
top: 8px;
left: 8px;
width: 10px;
height: 10px;
background-color: #999;
border-radius: 50%;
}
.lock .lock-key{
position: absolute;
top: 60px;
left: 42px;
width: 18px;
height: 30px;
background-color: #999;
border: 2px solid #999;
border-radius: 5px 5px 0 0;
transform: rotate(45deg);
animation: open-lock 0.5s ease-in-out infinite alternate;
}
@keyframes open-lock{
0%{
transform: rotate(45deg);
}
50%{
transform: rotate(0);
}
100%{
transform: rotate(45deg);
}
}

本文以一個鎖為例，演示如何使用CSS實現開鎖轉圈動畫。

首先創建鎖的外觀，包括鎖體和鎖孔。使用偽元素`:before`和`:after`來幫助完成鎖孔和鎖柄部分。

然后創建鎖鑰匙的外觀，使用`transform:rotate`讓其傾斜45度。使用`@keyframes`定義旋轉動畫，使其在0%和100%時傾斜45度，在50%時打開到水平位置。

最終完成后，使用`animation`屬性將動畫應用在鎖鑰匙上，并定義其在循環中來回切換的速率。