<style>
.box {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 0 6px #999;
overflow: hidden;
}
.box img {
width: 200px;
height: 200px;
border-radius: 50%;
}
.cover {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #fff;
}
.box1 .cover{
transform-origin: right bottom;
transform: rotate(90deg);
transition: transform 0.5s linear;
}
.box1:hover .cover {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="box box1">
<img src="./images/pic2.jpg" alt="">
<div class="cover">cover</div>
</div>
<div class="box box2">
<img src="./images/pic2.jpg" alt="">
<div class="cover">cover</div>
</div>
<div class="box">
<img src="./images/pic2.jpg" alt="">
<div class="cover">cover</div>
</div>
</body>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
