非常简单的一个效果，利用 filter + mask-box-image + mask-border + clip-path + outline-offset 简单组合罢了。
直接上代码了
你可以在这里找到大鹅所有CSS知识分享哦
🔥【冷门知识】鹅のCSS大合集！长期追更~ 收藏 ≈ 学会
39 个赞
大鹅520！
1 个赞
大鹅！前排前排
1 个赞
好的，这就给我的crush 去发
1 个赞
大鹅太强了
3 个赞
太强了，事实证明我心里是大鹅老师啊~ 
2 个赞
鹅鹅鹅，大鹅
2 个赞
520 520
3 个赞
没用的话，你就去diss大帅哥
4 个赞
可以放到serv00上加自己的域名，哈哈
1 个赞
太强了 
1 个赞
还得是大鹅
1 个赞
大鹅 520 
2 个赞
强如我佬
1 个赞
大鹅太强了！
不过手机微信打开无法实现hover效果，我让AI 稍微改了一下，直接使用点击的形式，并且多图轮换。
点击打开HTML详细代码←
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片效果</title>
<style>
body {
height: 100vh;
background: skyblue;
display: grid;
place-content: center;
filter: drop-shadow(0 0 4px #ff3e60) drop-shadow(0 0 6px #ff3e60);
}
.image-container {
position: relative;
width: 300px; /* 增加50% */
height: 300px; /* 增加50% */
text-align: center;
}
img {
--_m: radial-gradient(#000 69%, #0000 70%) 84.5%/50%;
width: 300px; /* 增加50% */
aspect-ratio: 1;
object-fit: cover;
-webkit-mask-box-image: var(--_m);
mask-border: var(--_m);
clip-path: polygon(-41% 0, 50% 91%, 141% 0);
outline: 100vmax solid #ff3e60;
outline-offset: -100vmax;
transition: 0.7s;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
img.active {
outline-color: #0000;
}
img.current {
opacity: 1;
}
.hint-text {
position: absolute;
width: 100%;
text-align: center;
bottom: -40px;
color: white; /* 文字颜色改为白色 */
font-weight: bold;
font-size: 18px;
}
/* fallback until better support for mask-border */
@supports not (-webkit-mask-box-image: var(--_m)) {
img {
--_m: radial-gradient(at 70% 31%, #000 29%, #0000 30%),
radial-gradient(at 30% 31%, #000 29%, #0000 30%),
linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
-webkit-mask: var(--_m);
mask: var(--_m);
}
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://linux.do/user_avatar/linux.do/clarke.l/200/223830_2.png" alt="头像1" class="current">
<img src="https://picsum.photos/300/300?random=2" alt="头像3">
<img src="https://picsum.photos/300/300?random=3" alt="头像4">
<img src="https://picsum.photos/300/300?random=4" alt="头像5">
<img src="https://picsum.photos/300/300?random=5" alt="头像6">
<img src="data:image/svg+xml;charset=utf-8,<svg width='300' height='300' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'><rect width='300' height='300' fill='white'/><text x='150' y='150' font-size='30' text-anchor='middle' fill='black'>我爱你，老婆</text></svg>" alt="SVG 文字">
<div class="hint-text">多点几次有惊喜</div>
</div>
<script>
const container = document.querySelector('.image-container');
const images = document.querySelectorAll('img');
let currentIndex = 0;
container.addEventListener('click', function() {
// 切换当前图片的显示/隐藏状态
images[currentIndex].classList.toggle('active');
// 如果再次点击，按顺序选择下一张图片
if (!images[currentIndex].classList.contains('active')) {
// 隐藏当前图片
images[currentIndex].classList.remove('current');
// 按顺序选择下一张图片
currentIndex = (currentIndex + 1) % images.length;
// 显示新的图片
images[currentIndex].classList.add('current');
}
});
</script>
</body>
</html>
1 个赞
520方块 
3 个赞
手机上hover得点两下，是touch方法 
可以稍微改造下利用:active伪类
3 个赞
哈哈，我技术小白，就只会叫AI直接改
1 个赞
CSS非常厉害了佬
1 个赞