純CSS實現鼠標放上滑動出半透明效果的文字說明(新手小白 必看)
發(fā)布時間:2020-02-17 09:21:57 作者:佚名
我要評論

這篇文章主要介紹了 純CSS實現鼠標放上滑動出半透明效果的文字說明(新手小白 必看),代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
效果如下:
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;/*周圍陰影*/ /*以上根據個人的效果自定義*/ 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;/*鼠標不放時,半透明部分最高處離外層div頂端的距離*/ background-color:rgba(0,0,0,0.5);/*透明度*/ transition:top 0.5s ease-in-out;/*改變top屬性,0.5秒完成,慢開始慢結束*/ } .itemInWorks:hover .mask{ top:50px ;/*鼠標放上時,滑動到的最高處離外層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>
總結
以上所述是小編給大家介紹的 純CSS實現鼠標放上滑動出半透明效果的文字說明(新手小白 必看),希望對大家有所幫助!
相關文章
- 本篇文章主要介紹了css實現背景半透明文字不透明的效果示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-08
- 這篇文章主要介紹了純css實現背景圖片半透明內容不透明的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-12
- 這篇文章主要給大家介紹了利用CSS3制作簡單的3d半透明立方體圖片展示的相關資料,文中給出了完整的示例代碼,對大家的理解和學習具有一定的參考價值,需要的朋友們下面來一2017-03-25
- 這篇文章主要介紹了用CSS設定一個元素半透明的相關資料,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2016-12-13
- 是一段實現了突出主圖片的半透明遮罩lightbox效果代碼,當點擊一張圖片時,這樣圖片會無刷新彈出放大顯示,而周圍的圖片會被半透明在原位遮罩起來,本段代碼適應于所有網頁2015-10-22
- 這篇文章主要為大家介紹了純CSS實現多級半透明效果菜單代碼,通過純css實現多級菜單效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-01