我嘗試使用border-radius（下面的代碼）來實作這種效果，但我希望圓圈更小，如本示例所示https://imgur.com/a/gKHtVXr，我認為我無法實作這一點邊界半徑。
<img class = "zyra-thumb" src = "thumbnail champion/thumb2.png" alt="zyra">
CSS:
.zyra-thumb{
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 150px;
transition: border-radius 0.3s;
}
.zyra-thumb:hover{
border-radius: 10px;
}
uj5u.com熱心網友回復：
您可以使用clip-path僅顯示拇指影像的中心并
transition: clip-path 1s;在懸停時提供所需的影片
.thumb {
background: purple;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.zyra-thumb {
width: 100%;
object-fit: cover;
clip-path: circle(25% at 50% 50%);
transition: clip-path 1s;
border-radius: 10px;
}
.zyra-thumb:hover {
clip-path: circle(100% at 50% 50%);;
}<div class="thumb">
<img class="zyra-thumb" src="https://www.gravatar.com/avatar/0cf65651ae9a3ba2858ef0d0a7dbf900?s=256&d=identicon&r=PG&f=1" alt="zyra">
</div>uj5u.com熱心網友回復：
根據您附加的圖片，我認為這是您想要達到的效果。
.zyra-thumb {
background: url(https://i.stack.imgur.com/OR7ho.jpg) no-repeat center;
background-size: cover;
position: relative;
width: 400px;
height: 400px;
overflow: hidden;
display: inline-block;
border-radius: 20px;
}
.zyra-thumb::before {
content: "";
display: block;
width: 50%;
padding-bottom: 50%;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
transform: translate(-50%, -50%);
border: solid 400px #41373f;
border-radius: 50%;
transition: all ease-in-out 0.3s;
}
.zyra-thumb:hover::before {
width: 150%;
padding-bottom: 150%;
}<div class="zyra-thumb">
</div>uj5u.com熱心網友回復：
只需border-radius:0px;在懸停中使用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/512719.html
標籤：htmlcss图片
上一篇：如何裁剪多余的alpha背景？