【每日一練】23—CSS實現(xiàn)圖像懸停動畫的效果
今天練習(xí)的這個案例，是前幾天我在視頻號上分享過的，但是沒有分享源碼，于是有小伙伴在后臺留言說，想要看一下源碼，今天就給需要的小伙伴安排上，這個效果具體看下面視頻，源碼我就不直接打包，但是我直接貼在文章中了，方便瀏覽，節(jié)省下載時間。
具體的效果，請看下面的視頻：
另外，今天練習(xí)項目中的圖片素材，我也上傳到百度網(wǎng)盤了，需要的小伙伴可以自行獲取，當(dāng)然，你可以直接用其他的圖片素材代替，這個都不是什么大問題。
需要圖片素材的小伙伴可以自行獲取，地址如下: https://pan.baidu.com/s/10Ag4qT6UwnIwjIVfo-1zVg?pwd=e38y
提取碼: e38y
最后，我們再來看一下實現(xiàn)的代碼。
HTML代碼：
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【每日一練】23—CSS實現(xiàn)圖像懸停動畫的效果</title></head><body><div class="container"><div class="card"><div class="imgBx"><img src="img1.jpg"></div><div class="contentBx"><div class="content"><h3>Post One</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div></div><div class="card"><div class="imgBx"><img src="img2.jpg"></div><div class="contentBx"><div class="content"><h3>Post Two</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div></div><div class="card"><div class="imgBx"><img src="img3.jpg"></div><div class="contentBx"><div class="content"><h3>Post Three</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div></div><div class="card"><div class="imgBx"><img src="img4.jpg"></div><div class="contentBx"><div class="content"><h3>Post Four</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div></div><div class="card"><div class="imgBx"><img src="img5.jpg"></div><div class="contentBx"><div class="content"><h3>Post Five</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div></div><div class="card"><div class="imgBx"><img src="img6.jpg"></div><div class="contentBx"><div class="content"><h3>Post Six</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div></div></div></body></html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');*{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: #222;}.container{position: relative;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;max-width: 1100px;}.container .card{position: relative;width: 320px;height: 320px;margin: 15px;overflow: hidden;}.container .card .imgBx,.container .card .contentBx{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.container .card .imgBx img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}.container .card .contentBx::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #fff;transform: scaleX(0);transition: transform 0.5s ease-in-out;transform-origin: right;transition-delay: 0.5s;}.container .card:hover .contentBx::before{transform: scaleX(1);transition: transform 0.5s ease-in-out;transform-origin: left;transition-delay: 0s;}.container .card .contentBx{display: flex;justify-content: center;align-items: center;}.container .card .contentBx .content{position: relative;padding: 30px;z-index: 1;transition: 0.5s;transform: translateX(-300px);transition-delay: 0s;}.container .card:hover .contentBx .content{transform: translateX(0px);transition-delay: 0.5s;}.container .card .contentBx .content h3{font-size: 1.3em;text-transform: uppercase;letter-spacing: 1px;}.container .card .contentBx .content p{font-size: 1em;line-height: 1.4em;font-weight: 300;}
寫在最后
以上就是今天【每日一練】的全部內(nèi)容，希望今天的小練習(xí)對你有用，如果你覺得有幫助的話，請點贊我，關(guān)注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學(xué)習(xí)更多技能
請點擊下方公眾號
評論
圖片
表情