<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开锁动画</title>
<style type="text/css">
.yuan{
border-radius: 200px;
background-color: aqua;
height: 300px;
300px;
margin: 500px;
border-top: 10px solid red;
border-bottom: 10px solid blue;
border-right: 10px solid blue;
border-left: 10px solid red;
color: white;
font-size: 30px;
transition: all 2s;
position: relative;
}
.yuan:hover{
transform: rotate(180deg);
}
.suo{
height: 200px;
150px;
}
.kaisuo{
position: absolute;
top: 580px;
left: 590px;
}
.kaisuo:hover{
opacity: 0.1;
}
</style>
</head>
<body>
<div class="yuan">
</div>
<div class="kaisuo">
<img src="../images/suozi.png" alt="" class="suo">
</div>
</body>
</html>
效果：鼠标移入边框会旋转180°，图片会虚化，但是现在两者只能选择一种显示，用了个DIV把图片定位到BORDER里的，如果不用的话，图片会和边框一起旋转。
值得改动的地方还有很多，希望在深入学习的过程中能慢慢完善