【每日一練】26—CSS實現(xiàn)響應(yīng)式卡片懸停效果
今天練習(xí)的這個小項目，是一個產(chǎn)品卡片式的介紹說明，像我們在一些個人簡歷產(chǎn)品說明里或者產(chǎn)品說明里會經(jīng)常使用這樣的內(nèi)容設(shè)計，然后再配上合適的圖片即可。
例如，我們在個人簡歷上，我們可以這個圖片替換為響應(yīng)技術(shù)圖片，如，HTML&CSS、JavaScript、Vue等技術(shù)掌握怎么樣，熟練程度如何等等。
現(xiàn)在，我們還是一起來看一下這個項目的最終效果：
<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><title>【每日一練】26—CSS實現(xiàn)響應(yīng)式卡片懸停效果</title></head><body><div class="container"><div class="box"><div class="imgBx"><img src="img1.jpg"></div><div class="content"><h2>楊小愛<br><span>web前端開發(fā)</span></h2></div></div><div class="box"><div class="imgBx"><img src="img2.jpg"></div><div class="content"><h2>CSS小姐<br><span>JavaScript開發(fā)</span></h2></div></div><div class="box"><div class="imgBx"><img src="img3.jpg"></div><div class="content"><h2>HTML先生<br><span>網(wǎng)頁設(shè)計師</span></h2></div></div></div></body></html>
*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #010615;}.container{width: 1200px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}.box{position: relative;width: 300px;height: 300px;display: flex;margin: 40px;justify-content: center;align-items: center;background: #060c21;}.imgBx{position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 10px;box-sizing: border-box;color: #fff;z-index: 2;transition: 0.5s ease-in-out;}.box:hover .imgBx{transform: translate(-35px,-35px);}.imgBx img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}.box .content{position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 15px;background: #fff;display: flex;justify-content: center;align-items: flex-end;text-align: center;transition: 0.5s ease-in-out;}.box:hover .content{transform: translate(35px,35px);}.box .content h2{font-size: 20px;color: #111;font-weight: 500;line-height: 20px;letter-spacing: 1px;}.box .content h2 span{font-size: 14px;font-weight: 300;letter-spacing: 2px;}@media (max-width: 768px){.box:hover .imgBx{transform: translate(0px,-35px);}.box:hover .content{transform: translate(0px,35px);}}
寫在最后
以上就是每日一練的全部內(nèi)容，希望今天的小練習(xí)對你有用，如果你覺得有幫助的話，請點贊我，關(guān)注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
推薦內(nèi)容
【每日一練】24—CSS實現(xiàn)產(chǎn)品卡片的動畫效果
學(xué)習(xí)更多技能
請點擊下方公眾號
評論
圖片
表情