【每日一練】07—CSS實(shí)現(xiàn)響應(yīng)式產(chǎn)品介紹的Hover效果
寫在前面
今天我們練習(xí)的這個小項(xiàng)目，在很多產(chǎn)品網(wǎng)站或者個人博客上都會用到，它主要的場景，就是在做一個產(chǎn)品說明或者個人文字介紹說明，這是一個非常實(shí)用的小項(xiàng)目。
因?yàn)樵诤茉缰埃覀內(nèi)绻獙?shí)現(xiàn)這樣的效果，基本都是要通過PS把它處理成6邊形的圖片，而且每次如果要修改產(chǎn)品的話，都需要再處理一次圖片，還是非常麻煩的。
但是今天我們學(xué)會了這個CSS技巧，我們完全不需要麻煩設(shè)計了，而且現(xiàn)在各大瀏覽器都是兼容支持的，所以，不用擔(dān)心，我們寫出來的效果不適用，其實(shí)，除了最新的一些屬性，或者淘汰的屬性，瀏覽器不支持外，現(xiàn)在很多屬性，各大瀏覽器都是支持的，請放心使用。
好了，說了這么多，我們一起來看一下，今天練習(xí)的小項(xiàng)目的最終效果：
以上圖片就是頁面加載完的默認(rèn)效果，而下面的圖片是鼠標(biāo)移上去的hover效果。
具體實(shí)現(xiàn)代碼在后面，大家可以自行取閱學(xué)習(xí)，練習(xí)的圖片素材，我放在這里了，請自行下載獲取。
圖片素材下載地址：
百度網(wǎng)盤：https://pan.baidu.com/s/1-hKOAs6UfYvE67-70HK9UA?pwd=tg8u 提取碼: tg8u
<html><head><meta charset="utf-8"><title>【每日一練】07—CSS實(shí)現(xiàn)響應(yīng)式產(chǎn)品介紹的Hover效果</title></head><body><div class="container"><!-- 01 hexagon begin--><div class="hexagon"><div class="shape"><img src="img1.png"><div class="content"><div><h2>主動的人</h2><p>主動的人，往往也是更加努力的人，他們的創(chuàng)造力也會更強(qiáng)，因?yàn)樗麄兌米约旱拿\(yùn)在自己手中，不想供手讓別人操控自己的命運(yùn)</p></div></div></div></div><!--01 hexagon end--><div class="hexagon"><div class="shape"><img src="img2.png"><div class="content"><div><h2>主動的人</h2><p>往往運(yùn)氣也會越來越好，因?yàn)樗麄兦宄闹雷约合胍裁矗麄冴P(guān)注自己的目標(biāo)而努力，因此會朝著目標(biāo)前進(jìn)，自然就會運(yùn)氣好，運(yùn)氣越好越努力，越努力運(yùn)氣越好</p></div></div></div></div><!--02 hexagon end--><div class="hexagon"><div class="shape"><img src="img3.png"><div class="content"><div><h2>主動的人</h2><p>他們會擁有更多的機(jī)會，因?yàn)樗麄冎罊C(jī)會從來都不會從天而降，只有抓住機(jī)會才會擁有成功的可能，這個世界有很多機(jī)會，就是看機(jī)會來臨時，你能把握住</p></div></div></div></div><!--03hexagon end--><div class="hexagon"><div class="shape"><img src="img4.png"><div class="content"><div><h2>主動的人</h2><p>他們也會更容易成功，因?yàn)樗麄冏鍪虑椴煌涎?，沒有懶癌癥，心態(tài)也會更加積極主動，對自己做的事情負(fù)責(zé)，能夠做到今日事今日畢，甚至是提前完成工作與自己的任務(wù)</p></div></div></div></div><!--04 hexagon end--></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;}.container{position: relative;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}.hexagon{position: relative;width: 350px;height: 400px;margin: 50px 20px 70px;}.hexagon:before{content: '';position: absolute;bottom: -70px;width: 100%;height: 60px;background: radial-gradient(rgba(0,0,0,0.15),transparent,transparent);border-radius: 50%;transition: 0.5s;}.hexagon:hover:before{opacity: 0.8;transform: scale(0.8);}.hexagon .shape{position: absolute;top: 0;left: 0;width: 100%;height: 100%;clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);transition: 0.5s;}.hexagon:hover .shape{transform: translateY(-30px);}.hexagon .shape img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}.hexagon .shape .content{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background: linear-gradient(45deg, #727373, rgba(99, 104, 107, 0.5));opacity: 0;transition: 0.5s;padding: 20px;text-align: center;color: #fff;}.hexagon:hover .shape .content{opacity: 1;}
寫在最后
以上就是每日一練的全部內(nèi)容，希望今天的小練習(xí)對你有用，如果你覺得有幫助的話，請點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
