一个图片鼠标悬浮，人像站立起来的卡片资源-CSDN文库

共4个文件

png：3个

html：1个

111 浏览量 2025-06-08 16:27:18 上传评论收藏 194KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

img3d.zip （4个子文件）

img3d

cover.png 118KB

txt.png 20KB

girl.png 58KB

index.html 2KB

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D图片卡片</title> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; } .img-card { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .img-card-3dcontent { width: 250px; height: 323px; padding: 20px; border: 1px solid #e0e0e0; background-color: #ffffff; border-radius: 12px; transition: transform 0.2s ease; margin: 10px; } .card { width: auto; height: 274px; position: relative; margin: 0 auto; } .card p { font-weight: 600; } .card img { position: absolute; width: 180px; top: 50px; left: 0; } .card .cover { height: 100%; z-index: 1; border-radius: 5px; transition: all 1s; } .card .girl { height: 100%; z-index: 2; opacity: 0; object-fit: cover; transition: all 1s; } .card .txt { width: 180px; height: 304px; opacity: 0; position: absolute; left: 0; z-index: 3; bottom: 0; filter: drop-shadow(2px 2px 2px #000); transition: all 0.75s; } .card:hover .cover { transform: perspective(600px) rotateX(30deg); box-shadow: 0 35px 35px -10px rgba(0, 0, 0, 0.75); } .card:hover .txt { opacity: 1; width: 200px; height: 280px; left: -10px; transform: perspective(300px) translate3d(0 -15px, 200px); } .card:hover .girl { opacity: 1; transform: perspective(300px) translate3d(0, -50px, 40px); } </style> </head> <body> <div class="img-card"> <div class="img-card-3dcontent"> <div class="card"> <p>3d图片卡片人像站立</p> <img src="./cover.png" alt="" class="cover" /> <img src="./girl.png" alt="" class="girl" /> <img src="./txt.png" alt="" class="txt" /> </div> </div> </div> </body> </html>

评论收藏

内容反馈