HTML+CSS+JS实现 ❤️鼠标悬停性感美女图片特效❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️鼠标悬停性感美女图片特效❤️
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
🍅 作者主頁(yè)：Java李楊勇?
🍅 簡(jiǎn)介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、【java李楊勇】公號(hào)作者? ?簡(jiǎn)歷模板、學(xué)習(xí)資料、面試題庫(kù)、技術(shù)互助【關(guān)注我，都給你】
🍅 歡迎點(diǎn)贊 👍 收藏 ?留言 📝 ??
效果演示：?文末獲取源碼
代碼目錄：
主要代碼實(shí)現(xiàn)：
CSS樣式：
body {margin: 0px;padding: 0px;background-color: #C3CCD5;font-family: 'Source Sans Pro', sans-serif; }.albums {width: 100%;float: left; }.albums-inner {width: 1100px;margin-top: 20px;margin-right: auto;margin-left: auto; }.albums-title {float: left;width: 100%;color: rgba(53, 117, 159, 1);font-size: 20px;border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: rgba(53, 117, 159, 1);line-height: 50px;margin-bottom: 100px; }.albums-tab {float: left;width: 300px;margin-right: 100px;margin-bottom: 100px; }.albums-tab:nth-child(3n+0) {margin-right: 0px; }.albums-tab-thumb {float: left;width: 300px;height: 200px; }.albums-tab-thumb img {height: auto;width: 290px;background-color: rgba(255, 255, 255, 1);padding: 5px; }.albums-tab-text {float: left;width: 100%;text-align: center;color: rgba(53, 117, 159, 1);margin-top: 15px;font-size: 18px; }.albums-tab-text span {font-size: 14px;color: rgba(102, 102, 102, 1); }HTML代碼 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>9款CSS3鼠標(biāo)懸停相冊(cè)預(yù)覽特效</title><link href="css/main.css" rel="stylesheet" type="text/css" /><link href="css/sim-prev-anim.css" rel="stylesheet" type="text/css" /></head><body><div class="albums"><div class="albums-inner"><div class="albums-tab"><div class="albums-tab-thumb sim-anim-1"><img src="images/studio_0001.jpg" class="all studio" /><img src="images/studio_0002.jpg" class="all studio" /><img src="images/studio_0003.jpg" class="all studio" /><img src="images/studio_0004.jpg" class="all studio" /><img src="images/studio_0005.jpg" class="all studio" /><img src="images/studio_0006.jpg" class="all studio" /><img src="images/studio_0001.jpg" class="all studio" /></div><div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div></div><div class="albums-tab"><div class="albums-tab-thumb sim-anim-2"><img src="images/studio_0001.jpg" class="all studio" /><img src="images/studio_0002.jpg" class="all studio" /><img src="images/studio_0003.jpg" class="all studio" /><img src="images/studio_0004.jpg" class="all studio" /><img src="images/studio_0010.jpg" class="all studio" /></div><div class="albums-tab-text">.sim-anim-2 <span>(5 pictures)</span></div></div><div class="albums-tab"><div class="albums-tab-thumb sim-anim-3"><img src="images/studio_0001.jpg" class="all studio" /><img src="images/studio_0002.jpg" class="all studio" /><img src="images/studio_0003.jpg" class="all studio" /><img src="images/studio_0004.jpg" class="all studio" /><img src="images/studio_0005.jpg" class="all studio" /><img src="images/studio_0006.jpg" class="all studio" /><img src="images/studio_0007.jpg" class="all studio" /><img src="images/studio_0008.jpg" class="all studio" /><img src="images/studio_0011.jpg" class="all studio" /></div><div class="albums-tab-text">.sim-anim-3 <span>(9 pictures)</span></div></div><div class="albums-tab"><div class="albums-tab-thumb sim-anim-4"><img src="images/studio_0001.jpg" class="all studio" /><img src="images/studio_0002.jpg" class="all studio" /><img src="images/studio_0003.jpg" class="all studio" /><img src="images/studio_0004.jpg" class="all studio" /><img src="images/studio_0005.jpg" class="all studio" /><img src="images/studio_0006.jpg" class="all studio" /><img src="images/studio_0007.jpg" class="all studio" /><img src="images/studio_0008.jpg" class="all studio" /><img src="images/studio_0009.jpg" class="all studio" /></div><div class="albums-tab-text">.sim-anim-4 <span>(9 pictures)</span></div></div><div class="albums-tab"><div class="albums-tab-thumb sim-anim-5"><img src="images/studio_0001.jpg" class="all studio" /><img src="images/studio_0002.jpg" class="all studio" /><img src="images/studio_0003.jpg" class="all studio" /><img src="images/studio_0004.jpg" class="all studio" /><img src="images/studio_0005.jpg" class="all studio" /></div><div class="albums-tab-text">.sim-anim-5 <span>(5 pictures)</span></div></div><div class="albums-tab"><div class="albums-tab-thumb sim-anim-6"><img src="images/studio_0001.jpg" class="all studio" /><img src="images/studio_0009.jpg" class="all studio" /><img src="images/studio_0003.jpg" class="all studio" /><img src="images/studio_0004.jpg" class="all studio" /><img src="images/studio_0005.jpg" class="all studio" /><img src="images/studio_0006.jpg" class="all studio" /><img src="images/studio_0007.jpg" class="all studio" /><img src="images/studio_0008.jpg" class="all studio" /><img src="images/studio_0002.jpg" class="all studio" /></div><div class="albums-tab-text">.sim-anim-6 <span>(9 pictures)</span></div></div><div class="albums-tab"><div class="albums-tab-thumb sim-anim-7"><img src="images/studio_0001.jpg" class="all studio" /><img src="images/studio_0002.jpg" class="all studio" /><img src="images/studio_0003.jpg" class="all studio" /><img src="images/studio_0004.jpg" class="all studio" /></div><div class="albums-tab-text">.sim-anim-7 <span>(4 pictures)</span></div></div><div class="albums-tab"><div class="albums-tab-thumb sim-anim-8"><img src="images/studio_0001.jpg" class="all studio" /><img src="images/studio_0002.jpg" class="all studio" /><img src="images/studio_0009.jpg" class="all studio" /><img src="images/studio_0004.jpg" class="all studio" /><img src="images/studio_0005.jpg" class="all studio" /><img src="images/studio_0006.jpg" class="all studio" /><img src="images/studio_0007.jpg" class="all studio" /><img src="images/studio_0008.jpg" class="all studio" /><img src="images/studio_0003.jpg" class="all studio" /></div><div class="albums-tab-text">.sim-anim-8 <span>(9 pictures)</span></div></div><div class="albums-tab"><div class="albums-tab-thumb sim-anim-9"><img src="images/studio_0001.jpg" class="all studio" /><img src="images/studio_0002.jpg" class="all studio" /><img src="images/studio_0003.jpg" class="all studio" /><img src="images/studio_0004.jpg" class="all studio" /><img src="images/studio_0005.jpg" class="all studio" /><img src="images/studio_0009.jpg" class="all studio" /><img src="images/studio_0007.jpg" class="all studio" /><img src="images/studio_0008.jpg" class="all studio" /><img src="images/studio_0006.jpg" class="all studio" /></div><div class="albums-tab-text">.sim-anim-9 <span>(9 pictures)</span></div></div></div></div></body></html>上面的圖片文件需要引入進(jìn)來(lái)
源碼獲取
大家可以點(diǎn)贊、收藏、關(guān)注、評(píng)論我啦 、查看博主主頁(yè)或下方微信公眾號(hào)獲取更多~！
打卡 文章 更新?50?/? 100天
精彩推薦更新中：
HTML5大作業(yè)實(shí)戰(zhàn)案例《100套》
Java畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例《100套》??
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️鼠标悬停性感美女图片特效❤️的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 速达财务3000服务器账套维护显示,速达
- 下一篇： Eclipse2020版本：pom.xm