本篇文章，主要讲解一下如何创建一个响应式卡片页面
响应式卡片效果图
HTML部分（index.html）
<!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"> <link rel="stylesheet" href="style.css"> <title>响应式卡片</title> </head> <link href="http://175.178.184.206/usr/uploads/2022/05/2356336909.png" mce_href="favicon.ico" rel="icon" type="image/x-icon"/> <body> <div class="container"> <!-- 01 card --> <div class="card"> <div class="circle"> <h2>Email</h2> </div> <div class="content"> <p>Welcome To Mango Diary<br></p> <p>Click the button below to tell you what you want to whisper to me</p> <a href="#">Post Here</a> </div> </div> <!-- 02 card --> <div class="card"> <div class="circle"> <h2>Photo</h2> </div> <div class="content"> <p>Welcome To Photo Waterfall<br></p> <p>Through the days when no one cares, there is poetry and distance</p> <a href="#">Read More</a> </div> </div> <!-- 03 card --> <div class="card"> <div class="circle"> <h2>Moon</h2> </div> <div class="content"> <p>I've always wanted to see the moon from your window. You can see it more clearly in this room than in that one</p> <a href="#">Read More</a> </div> </div> </div> </body> </html>
CSS部分（style.css）
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap'); * { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(45deg,#ffaf00, #bb02ff); background-attachment: fixed; } .container { position: relative; width: 1150px; padding:20px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .container .card { position: relative; width: 300px; height: 480px; background: #fff; margin: 20px; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 25px rgba(0, 0 ,0 , .2); transition: 0.5s; } .container:hover .card{ filter: blur(20px); transform: scale(0.9); opacity: .5; } .container .card:hover{ filter: blur(0px); transform: scale(1.1); opacity: 1; } .container .card .circle { position: relative; width: 100%; height: 100%; background: #000; clip-path: circle(180px at center 0); text-align: center; } .container .card .circle h2{ color: #fff; font-size: 4.5em; padding: 30px 0; } .container .card .content { position: absolute; bottom: 10px; padding: 20px; text-align: center; } .container .card .content p { color: #666; } .container .card .content a { position: relative; display: inline-block; padding: 10px 20px; background: #000; border-radius: 40px; text-decoration: none; margin-top: 20px; color: #fff; } .container .card:nth-child(1) .circle, .container .card:nth-child(1) .content a{ background: #ffaf00; } .container .card:nth-child(2) .circle, .container .card:nth-child(2) .content a{ background: #da2268; } .container .card:nth-child(3) .circle, .container .card:nth-child(3) .content a{ background: #bb02ff; } .container .card:nth-child(4) .circle, .container .card:nth-child(4) .content a{ background: #bb02ff; } .container .card:nth-child(5) .circle, .container .card:nth-child(5) .content a{ background: #bb02ff; }
注意事项
以上两个文件须使用括号内的名字命名并且放在同一目录下才可
