css实现开锁转圈动画 |css3 tab 样式

.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`属性将动画应用在锁钥匙上，并定义其在循环中来回切换的速率。