純CSS實(shí)現(xiàn)鼠標(biāo)放上滑動(dòng)出半透明效果的文字說(shuō)明(新手小白 必看)
發(fā)布時(shí)間:2020-02-17 09:21:57 作者:佚名
我要評(píng)論

這篇文章主要介紹了 純CSS實(shí)現(xiàn)鼠標(biāo)放上滑動(dòng)出半透明效果的文字說(shuō)明(新手小白 必看),代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
效果如下:
HTML:
<div class="itemInWorks" > 婚禮策劃 <div class="mask"> 狀態(tài):待完成<br> 執(zhí)行者:張三<br> 截止日期:2020/03/15 </div> </div>
CSS:
/*外層div部分*/ .itemInWorks{ width: 180px; height: 130px; border-radius:5px;/*圓角*/ font-size: 18px; font-weight: 600; color: dimgrey; text-align: center;/*文字“婚禮策劃”水平居中*/ line-height: 50px;/*文字“婚禮策劃”垂直居中*/ background: url('image/works_image/4.jpg'); background-repeat: no-repeat; background-size: 180px 130px; box-shadow: #909090 0px 0px 10px;/*周圍陰影*/ /*以上根據(jù)個(gè)人的效果自定義*/ overflow: hidden; position: relative; } /*半透明部分*/ .itemInWorks .mask{ height:80px; width:172px; color: #f5f1e5; line-height: 23px; text-align: left; padding-left: 8px; border-radius:2px 2px 5px 5px; font-size: 14px; font-weight: 300; /*以上根據(jù)個(gè)人的效果自定義*/ position: absolute; top:130px;/*鼠標(biāo)不放時(shí),半透明部分最高處離外層div頂端的距離*/ background-color:rgba(0,0,0,0.5);/*透明度*/ transition:top 0.5s ease-in-out;/*改變top屬性,0.5秒完成,慢開(kāi)始慢結(jié)束*/ } .itemInWorks:hover .mask{ top:50px ;/*鼠標(biāo)放上時(shí),滑動(dòng)到的最高處離外層div頂端的距離*/ }
全部代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .itemInWorks{ width: 180px; height: 130px; border-radius:5px; font-size: 18px; font-weight: 600; color: dimgrey; text-align: center; line-height: 50px; background: url('image/works_image/4.jpg'); background-repeat: no-repeat; background-size: 180px 130px; box-shadow: #909090 0px 0px 10px; overflow: hidden; position: relative; } /*半透明部分*/ .itemInWorks .mask{ height:80px; width:172px; color: #f5f1e5; line-height: 23px; text-align: left; padding-left: 8px; border-radius:2px 2px 5px 5px; font-size: 14px; font-weight: 300; position: absolute; top:130px; background-color:rgba(0,0,0,0.5); transition:top 0.5s ease-in-out; } .itemInWorks:hover .mask{ top:50px ; } </style> <body> <div class="itemInWorks" > 婚禮策劃 <div class="mask"> 狀態(tài):待完成<br> 執(zhí)行者:張三<br> 截止日期:2020/03/15 </div> </div> </body> </html>
總結(jié)
以上所述是小編給大家介紹的 純CSS實(shí)現(xiàn)鼠標(biāo)放上滑動(dòng)出半透明效果的文字說(shuō)明(新手小白 必看),希望對(duì)大家有所幫助!
相關(guān)文章
css實(shí)現(xiàn)背景半透明文字不透明的效果示例
本篇文章主要介紹了css實(shí)現(xiàn)背景半透明文字不透明的效果示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-08純css實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法
這篇文章主要介紹了純css實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-12- 這篇文章主要給大家介紹了利用CSS3制作簡(jiǎn)單的3d半透明立方體圖片展示的相關(guān)資料,文中給出了完整的示例代碼,對(duì)大家的理解和學(xué)習(xí)具有一定的參考價(jià)值,需要的朋友們下面來(lái)一2017-03-25
- 這篇文章主要介紹了用CSS設(shè)定一個(gè)元素半透明的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2016-12-13
css3實(shí)現(xiàn)的半透明遮罩lightbox效果源碼
是一段實(shí)現(xiàn)了突出主圖片的半透明遮罩lightbox效果代碼,當(dāng)點(diǎn)擊一張圖片時(shí),這樣圖片會(huì)無(wú)刷新彈出放大顯示,而周圍的圖片會(huì)被半透明在原位遮罩起來(lái),本段代碼適應(yīng)于所有網(wǎng)頁(yè)2015-10-22純CSS實(shí)現(xiàn)多級(jí)半透明效果菜單代碼
這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)多級(jí)半透明效果菜單代碼,通過(guò)純css實(shí)現(xiàn)多級(jí)菜單效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-01