時(shí)間：2023-09-17 09:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-17 09:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
一篇文章教會(huì)你使用html+css3制作炫酷效果：【一、項(xiàng)目背景】
在線咨詢
<body><div class="show"><div class="wap"> <div class="box" > <img src="images/img1.jpg"> <span class='ba'> </div> <div class="box"> <img src="images/img2.jpg"> <span class='ba'></span> </div> <div class="box"> <img src="images/img3.jpg"> <span class='ba'></span> </div> <div class="box"> <img src="images/img4.jpg"> <span class='ba'></span> </div> <div class="box"> <img src="images/img5.jpg"> <span class='ba'></span> </div> </div></div></body>2、添加文字。<span class='ba'>功夫熊貓</span><span class='ba'>飛屋環(huán)游記</span><span class='ba'>汽車總動(dòng)員</span><span class='ba'>玩具總動(dòng)員</span><span class='ba'>機(jī)器人</span>3、添加CSS樣式body { background: #ccc; }2）設(shè)置box的寬，邊框，邊框陰影，加載動(dòng)畫過(guò)渡效果。.box{ float: left; width: 160px; transition: all 0.5s; border: 1px solid #fff; #邊框 box-shadow: -5px 0px 10px 0px #000; #陰影 position: relative; }3）添加外層div 樣式。添加overflow屬性，防止內(nèi)容溢出。.wap{ width: 999999999px; overflow: hidden; } .show{ width: 800px; height: 320px; overflow: hidden; margin: 200px auto; box-shadow: 5px 5px 10px 4px #000; }4、文字樣式。.ba{ width: 640px; height: 50px; line-height: 50px; color: #fff; background: rgba(0,0,0,0.5); bottom: 0; left: 0; position: absolute; text-indent: 2em; }5、添加鼠標(biāo)移上去的效果樣式。 .ba:hover{ height: 320px; transition: all 0.5s; } .show:hover .box{ width: 40px; } .show .box:hover{ width: 640px; }6、添加詳細(xì)介紹文字。（text文件自?。?br>關(guān)鍵詞：效果,文章,教會(huì),使用
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
