源码：
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css制作的相应式卡片悬停特效</title>
<style> * { margin: 0; padding: 0; } body { display: flex; align-items: center; justify-content: center; background: #16384c; } .container { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 20px; } .container .Card { position: relative; position: relative; display: flex; max-width: 30%; flex-direction: row; background: #fff; transition: 0.3s ease-in-out; display: flex; flex-direction: column; margin: 20px 10px; padding: 10px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .container .Card .imgBx { width: 100%; margin: 0 auto; z-index: 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); } .container .Card .imgBx img { max-width: 100%; border-radius: 10px; } .container .Card .content { position: relative; padding: 10px 15px; text-align: center; color: #111; visibility: hidden; opacity: 0; transition: 0.3s ease-in-out; } /* 这里实现点击卡片悬停 */ .container .Card:hover { margin: 0 0 50px 0; } .container .Card:hover .content { visibility: visible; opacity: 1; margin-top: 20px; transition-delay: 0.3s; } /* 宽度自适应 在项目中这里可以使用bootstrap响应式布局 这里我们使用媒体查询实现*/ @media only screen and (min-width:320px) and (max-width:720px) { .container .Card { max-width: 100%; } } </style> </head>
<body> <div class="container"> <div class="Card"> <div class="imgBx"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""> </div> <div class="content"> <h2>Card one</h2> <p>Performance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。</p> </div> </div> <div class="Card"> <div class="imgBx"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""> </div> <div class="content"> <h2>Card Two</h2> <p>Performance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。</p> </div> </div> <div class="Card"> <div class="imgBx"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""> </div> <div class="content"> <h2>Card Three</h2> <p>Performance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。</p> </div> </div> </div> </body>
</html>