HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
???????效果演示：
GIF壓縮太大、故顯示圖片查看吧
???代碼目錄：
主要代碼實(shí)現(xiàn)：
CSS樣式：
@charset "utf-8"; * {margin: 0;padding: 0;list-style: none; }body {background-color: #1B1B1B }img {border: 0;cursor: pointer; }a {text-decoration: none; }.container01 .index-cont {width: 1200px;height: 990px;top: 100px;margin: 0 auto;position: relative; }.container01 .index-cont li {-moz-border-radius: 30px;/* Gecko browsers */-webkit-border-radius: 30px;/* Webkit browsers */border-radius: 30px;/* W3C syntax */position: absolute;width: 680px;height: 485px;top: 0;left: 0;overflow: hidden;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear; }.container01 .index-cont .T02 {width: 500px;height: 235px;top: 0;left: auto;right: 0; }.container01 .index-cont .T03 {width: 500px;height: 235px;top: 250px;left: auto;right: 0; }.container01 .index-cont .T04 {width: 500px;height: 235px;top: auto;bottom: 250px;left: 0; }.container01 .index-cont .T05 {width: 500px;height: 235px;top: auto;bottom: 0;left: 0; }.container01 .index-cont .T06 {width: 430px;height: 485px;top: auto;bottom: 0;left: 520px; }.container01 .index-cont .T07 {width: 230px;height: 485px;top: auto;left: auto;bottom: 0;right: 0;background-color: #707070; }.container01 .index-cont .T07 p {width: 170px;padding: 40px 30px;color: #fff;text-indent: 2em;font-size: 16px;line-height: 20px;text-align: justify; }.container01 .index-cont .T07 img {position: absolute;bottom: 40px;right: 30px; }.container01 .index-cont:hover li {background: #000;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear; }.container01 .index-cont:hover img.bg {opacity: 0.5;filter: alpha(opacity=50);-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear; }.container01 .index-cont li:hover img.bg {opacity: 1;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;box-shadow: 2px 2px 10px #333; }.container01 .index-cont li:hover {box-shadow: 2px 2px 10px #333; }.container01 .index-cont .overlay {opacity: 0;position: absolute;top: 0;left: 0;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear; }.container01 .index-cont .T01 .overlay {top: 190px;left: 310px; }.container01 .index-cont .T02 .overlay, .container01 .index-cont .T03 .overlay, .container01 .index-cont .T04 .overlay, .container01 .index-cont .T05 .overlay {top: 60px;left: 210px; }.container01 .index-cont .T05 .overlay {top: 60px;left: 200px; }.container01 .index-cont .T06 .overlay {top: 150px;left: 150px; }.container01 .index-cont:hover li .overlay {opacity: 1;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear; }.container01 .index-cont li:hover .overlay {opacity: 0;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear; }部分HTML代碼 :
<!doctype html> <html><head><meta charset="utf-8"><title>css3鼠標(biāo)懸停圖片遮罩高亮顯示圖標(biāo)效果</title><link href="css/style.css" type="text/css" rel="stylesheet" /></head><body><div class="container01"><div class="container clear"><div class="index-tatal"></div><ul class="index-cont"><li class="T01"><a href=""><img class="bg" src="image/index1-01.png" alt=""><div class="overlay"><img src="image/index-ICON01.png" alt=""></div></a></li><li class="T02"><a href=""><img class="bg" height="235" src="image/index1-02.png" alt=""><div class="overlay"><img src="image/index-ICON01.png" alt=""></div></a></li><li class="T03"><a href=""><img class="bg" height="235" src="image/index1-03.png" alt=""><div class="overlay"><img src="image/index-ICON02.png" alt=""></div></a></li><li class="T04"><a href=""><img class="bg" height="235" src="image/index1-04.png" alt=""><div class="overlay"><img src="image/index-ICON03.png" alt=""></div></a></li><li class="T05"><a href=""><img class="bg" height="235" src="image/index1-05.png" alt=""><div class="overlay"><img src="image/index-ICON04.png" alt=""></div></a></li><li class="T06"><a href=""><img height="485" class="bg" src="image/index1-06.png" alt=""><div class="overlay"><img src="image/index-ICON05.png" alt=""></div></a></li><li class="T07"><a href=""><p>自成立之始，久石人就以幫助最多設(shè)計(jì)師成功，實(shí)現(xiàn)每個(gè)設(shè)計(jì)師的設(shè)計(jì)理念和價(jià)值觀，引領(lǐng)中國建筑設(shè)計(jì)達(dá)到國際領(lǐng)先水平為使命，堅(jiān)持不懈，努力奮進(jìn)！經(jīng)過十年的積累與沉淀，已發(fā)展成為擁有2家分公司，三十多人的設(shè)計(jì)制作團(tuán)隊(duì)，具有先進(jìn)設(shè)計(jì)和制作理念的數(shù)字科技公司。</p><img src="image/button.png" alt=""></a></li></ul></div></div></body></html>上面的 image圖片可以替換成自己喜歡的
源碼獲取
精彩推薦更新中：
HTML5大作業(yè)實(shí)戰(zhàn)100套
??打卡 文章 更新? 37??/? 100天
大家可以點(diǎn)贊、收藏、關(guān)注、評論我啦 、需要完整文件隨時(shí)聯(lián)系我或交流喲~！
總結(jié)
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux修改密码最短生存时间,Linu
- 下一篇： 基于java SSM springboo