【每日一練】09—透明列表Hove效果的實(shí)現(xiàn)
作者 | 楊小愛(ài)
寫在前面
今天我們開(kāi)始第9天的小項(xiàng)目練習(xí)，今天這個(gè)小練習(xí)比較簡(jiǎn)單，主要就是一個(gè)比較常見(jiàn)的列表卡效果，這個(gè)列表的實(shí)現(xiàn)方法很多。
我們很多時(shí)候在項(xiàng)目上使用列表效果，會(huì)讓我們的內(nèi)容結(jié)構(gòu)比較清晰，富有層次，我希望今天這個(gè)練習(xí)，你一定要學(xué)會(huì)。
現(xiàn)在，我們就一起來(lái)看看今天練習(xí)的最終效果：
左邊圖為頁(yè)面加載完的效果，右邊圖為鼠標(biāo)懸停的hover效果。
練習(xí)中的圖片素材，我在【每日一練】07—CSS實(shí)現(xiàn)響應(yīng)式產(chǎn)品介紹的Hover效果這里分享過(guò)了，這些圖片可以重復(fù)使用練習(xí)。因此，今天我就不再單獨(dú)上傳圖片素材了。
<html lang="en"><head><meta charset="UTF-8"><title>【每日一練】09—透明列表hover效果的實(shí)現(xiàn)</title></head><body><section><div class="box"><h3>優(yōu)秀自媒體前十專家排行榜</h3><div class="list"><div class="imgBx"><img src="img1.jpg"></div><div class="content"><h2 class="rank">1</h2><h4>王二</h4><p>前端開(kāi)發(fā)工程師</p></div></div><div class="list"><div class="imgBx"><img src="img2.jpg"></div><div class="content"><h2 class="rank">2</h2><h4>張三</h4><p>后端開(kāi)發(fā)工程師</p></div></div><div class="list"><div class="imgBx"><img src="img3.jpg"></div><div class="content"><h2 class="rank">3</h2><h4>李四</h4><p>Photoshop專家</p></div></div><div class="list"><div class="imgBx"><img src="img4.jpg"></div><div class="content"><h2 class="rank">4</h2><h4>王五</h4><p>Illustrator專家</p></div></div><div class="list"><div class="imgBx"><img src="img5.jpg"></div><div class="content"><h2 class="rank">5</h2><h4>趙六</h4><p>視頻剪輯專家</p></div></div><div class="list"><div class="imgBx"><img src="img6.jpg"></div><div class="content"><h2 class="rank">6</h2><h4>甄七</h4><p>CSS技術(shù)專家</p></div></div><div class="list"><div class="imgBx"><img src="img7.jpg"></div><div class="content"><h2 class="rank">7</h2><h4>郭八</h4><p>web前端開(kāi)發(fā)技術(shù)專家</p></div></div><div class="list"><div class="imgBx"><img src="img8.jpg"></div><div class="content"><h2 class="rank">8</h2><h4>廖九</h4><p>Vue技術(shù)專家</p></div></div><div class="list"><div class="imgBx"><img src="img9.jpg"></div><div class="content"><h2 class="rank">9</h2><h4>JavaScript大叔</h4><p>JavaScript技術(shù)專家</p></div></div><div class="list"><div class="imgBx"><img src="img10.jpg"></div><div class="content"><h2 class="rank">10</h2><h4>楊小愛(ài)</h4><p>吃貨博主專家</p></div></div></div></section></body></html>
*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;}section{position: relative;background: #00a6bc;min-height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: center;}.box{position: relative;min-width: 350px;min-height: 400px;background: rgba(255,255,255,0.1);box-shadow: 0 25px 45px rgba(0,0,0,0.1);border: 1px solid rgba(255,255,255,0.5);border-right: 1px solid rgba(255,255,255,0.2);border-bottom: 1px solid rgba(255,255,255,0.2);border-radius: 10px;z-index: 10;padding: 20px;backdrop-filter: blur(25px);}.box h3{color: #fff;margin-bottom: 20px;}.box .list{position: relative;display: flex;padding: 10px;background: rgba(0,0,0,0.1);border-radius: 10px;margin: 10px 0;cursor: pointer;transition: 0.5s;overflow: hidden;}.box .list:hover{background: #fff;box-shadow: -15px 30px 50px rgba(0,0,0,0.5);transform: scale(1.15) translateX(30px) translateY(-15px);z-index: 1000;}.box .list .imgBx{position: relative;width: 60px;height: 60px;border-radius: 10px;overflow: hidden;margin-right: 10px;}.box .list .imgBx img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}.box .list .content{display: flex;flex-direction: column;justify-content: center;color: #fff;}.box .list .content .rank{position: absolute;right: -50px;color: #00a6bc;transition: 0.5s;font-size: 2em;}.box .list:hover .content .rank{right: 20px;}.box .list .content h4{line-height: 1.2em;font-weight: 600;transition: 0.5s;}.box .list .content p{font-size: 0.75em;transition: 0.5s;}.box .list:hover .content h4,.box .list:hover .content p{color: #333;}
寫在最后
以上就是每日一練的全部?jī)?nèi)容，希望今天的小練習(xí)對(duì)你有用，如果你覺(jué)得有幫助的話，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開(kāi)發(fā)的朋友，也許能夠幫助到他。
我是楊小愛(ài)，我們明天見(jiàn)。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
評(píng)論
圖片
表情