站長(zhǎng)資訊網(wǎng)在上一篇《使用CSS快速更改PNG圖像的顏色（兩種方法）》中給大家介紹了怎么使用CSS快速更改PNG圖像的顏色，感興趣的朋友可以去看看~
本文將給大家介紹一種炫酷的效果，就是用CSS創(chuàng)建響應(yīng)式堆疊卡片懸停效果。到底是什么樣的效果呢？我們繼續(xù)往下看！
在開始之前，我先介紹一下實(shí)現(xiàn)的整體大致思路：首先我們將在 HTM 中設(shè)計(jì)一個(gè)簡(jiǎn)單的卡片結(jié)構(gòu)；然后將定義::before 和::after偽元素并將它們相對(duì)于父卡片絕對(duì)定位；接著使用transform屬性將類“card-inner”的div從其原始位置移開；最后通過使用可以在懸停效果前后translate卡片的變換，在一堆卡片上添加懸停效果。
下面就直接上代碼了！
示例代碼一：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <style> body { color: #FDFAF6; background: #50CB93; } .card { position: relative; width: 400px; margin: 60px auto; } .card::before, .card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .card::before, .card::after, .card .card-inner { background-color: #423F3E; border: 1px solid #01937C; transition: transform 0.5s; } .card::before, .card-inner { z-index: 1; } .card-inner { position: relative; padding: 4rem; } /* 將疊好的卡片放在不同的位置 */ .cards:hover { transform: translate(5px, 5px); } .cards:hover::before { transform: translate(-5px, -5px); } .cards:hover::after { transform: translate(-10px, -10px); } </style> </head> <body> <center> <h1>歡迎來到PHP中文網(wǎng)</h1> <div class="card-container"> <div class="card cards"> <div class="card-inner"> <h1>將鼠標(biāo)移至方框內(nèi)</h1> <h3 class="card-title"> PHP中文網(wǎng) </h3> <div class="card-body"> 編程學(xué)習(xí)平臺(tái) </div> </div> </div> </div> </center> </body> </html>
效果如下：
示例代碼二：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <style> body { color: #FDFAF6; background: #50CB93; } :root { --offset-before: 8px; --offset-after: 16px; } .card { position: relative; width: 400px; margin: 60px auto; } .card::before, .card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .card::before, .card::after, .card .card-inner { background-color: #423F3E; border: 1px solid #01937C; transition: transform 0.5s; } .card::before, .card-inner { z-index: 1; } .card-inner { position: relative; padding: 4rem; } .cards-diagonal::before { transform: translate(calc(-1 * 8px), calc(-1 * 8px)); } .cards-diagonal::after { transform: translate(calc(-1 * 16px), calc(-1 * 16px)); } .cards-diagonal:hover::before { transform: translate(8px, 8px); } .cards-diagonal:hover::after { transform: translate(16px, 16px); } .cards-rotate::before, .cards-rotate::after { transform-origin: 50% 100%; } .cards-rotate:hover { transform: translate(2.5px, 0) rotate(2.5deg); } .cards-rotate:hover::before { transform: translate(2.5px, 0) rotate(2.5deg); } .cards-rotate:hover::after { transform: translate(5px, 0) rotate(5deg); } } </style> </head> <body> <center> <h1>歡迎來到PHP中文網(wǎng)</h1> <div class="card-container"> <div class="card cards-diagonal"> <div class="card-inner"> <h1>將鼠標(biāo)移至框內(nèi)</h1> <h3 class="card-title">PHP中文網(wǎng)</h3> <div class="card-body"> 編程學(xué)習(xí)平臺(tái) </div> </div> </div> </div> <div class="card-container"> <div class="card cards-rotate"> <div class="card-inner"> <h1>將鼠標(biāo)移至框內(nèi)</h1> <h3 class="card-title">PHP中文網(wǎng)</h3> <div class="card-body"> 編程學(xué)習(xí)平臺(tái) </div> </div> </div> </div> </center> </body> </html>
效果如下：
示例代碼三：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <style> body { color: #FDFAF6; background: #50CB93; } :root { --offset-before: 8px; --offset-after: 16px; } .card { position: relative; width: 400px; margin: 60px auto; } .card::before, .card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .card::before, .card::after, .card .card-inner { background-color: #423F3E; border: 1px solid #01937C; transition: transform 0.5s; } .card::before, .card-inner { z-index: 1; } .card-inner { position: relative; padding: 4rem; } /*Stacked => Up*/ .cards-up::before, .cards-up::after { transform-origin: center bottom; } .cards-up:hover { transform: translate(0, -5px); } .cards-up:hover::before { transform: translate(0, 5px) scale(0.95); } .cards-up:hover::after { transform: translate(0, 10px) scale(0.90); } /*Stacked => Right */ .cards-right::before, .cards-right::after { transform-origin: left center; } .cards-right:hover { transform: translate(5px, 0); } .cards-right:hover::before { transform: translate(-10px, 0) scale(0.95); } } .cards-right:hover::after { transform: translate(-10px, 0) scale(0.90); } } </style> </head> <body> <center> <h1>歡迎來到PHP中文網(wǎng)</h1> <div class="card-container"> <div class="card cards-up"> <div class="card-inner"> <h1>將鼠標(biāo)移至框內(nèi)</h1> <h3 class="card-title">PHP中文網(wǎng)</h3> <div class="card-body"> 編程學(xué)習(xí)平臺(tái) </div> </div> </div> </div> <div class="card-container"> <div class="card cards-right"> <div class="card-inner"> <h1>將鼠標(biāo)移至框內(nèi)</h1> <h3 class="card-title">PHP中文網(wǎng)</h3> <div class="card-body"> 編程學(xué)習(xí)平臺(tái) </div> </div> </div> </div> </center> </body> </html>
效果如下：
PHP中文網(wǎng)平臺(tái)有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》！
