效果图:
![图片[1]-[站长原创]子比主题文章列表鼠标悬停显示-八九源码网](https://www.89ym.cn/wp-content/uploads/2025/05/20241113221129345-学社山中人_2024-11-13_22-09-38-1024x469.webp)
CSS代码:
.posts-item {
transition: box-shadow 0.3s ease, transform 0.3s ease; /* 平滑过渡效果 */
}
.posts-item:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* 添加更强的阴影 */
transform: scale(1.02); /* 略微放大,增加立体感,但不浮动 */
}
效果图:
![图片[2]-[站长原创]子比主题文章列表鼠标悬停显示-八九源码网](https://www.89ym.cn/wp-content/uploads/2025/05/20241113221129345-学社山中人_2024-11-13_22-09-38-1-1024x469.webp)
CSS代码:
.posts-item {
transition: box-shadow 0.3s ease; /* 平滑过渡阴影效果 */
}
.posts-item:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15),
0 8px 30px rgba(0, 0, 0, 0.2),
0 10px 40px rgba(0, 0, 0, 0.25); /* 增加多个阴影层次,强化立体感 */
}
效果图:上移浮动
![图片[3]-[站长原创]子比主题文章列表鼠标悬停显示-八九源码网](https://www.89ym.cn/wp-content/uploads/2025/05/20241113221129345-学社山中人_2024-11-13_22-09-38-2-1024x469.webp)
CSS代码:
.posts-item {
transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡 */
}
.posts-item:hover {
transform: translateY(-10px); /* 上浮效果 */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 加上阴影效果 */
}
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容