js+css实现卡片堆叠层叠图片点击放大效果代码
代码语言:html
所属分类:图片放大
代码描述:js+css实现卡片堆叠层叠图片点击放大效果代码
代码标签: js css 卡片 堆叠 层叠 图片 点击 放大
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #1a3558; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #1a3558; } .cards-container { position: relative; width: 400px; height: 200px; } .card { position: absolute; width: 120px; height: 180px; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); cursor: pointer; transition: transform 0.4s ease, box-shadow 0.4s ease; } .card:hover { transform: scale(1.05) rotate(3deg); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); z-index: 10; } .card img { transition: transform 0.4s ease; width: 100%; height: 100%; object-fit: cover; } .card:hover img { transform: scale(1.1); } button { margin-top: 2.5rem; padding: 10px 20px; font-size: 1em; cursor: pointer; background-color: #08ac1e; color: white; border: none; border-radius: 5px; transition: background-color 0.3s; text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } button:hover { background-color: #2980b9; } /* Lightbox styling */ #lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; z-index: 1000; } .lightbox-content { max-width: 90%; max-height: 90%; border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); } /* Overlappende startpositie */ #card1 { left: 0px; } #card2 { left: 40px; } #card3 { left: 80px; } #card4 { left: 120px; } #card5 { left: 160px; } @media screen and (min-width: 402px) { .cards-container { width: 425px; height: 450px; } .card { width: 260px; height: 390px; } /* Overlappende startpositie */ #card1 { left: 0px; } #card2 { left: 60px; } #card3 { left: 120px; } #card4 { left: 180px; } #card5 { left: 240px; } } </style> </head> <body translate="no"> <div class="cards-container"> <div class="card" id="card1"> <img src="//repo.bfw.wiki/bfwrepo/image/5fc1ae951e91a.png" alt="Image 1"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0