纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白 必看)
发布时间：2020-02-17 09:21:57 作者：佚名 
我要评论
我要评论这篇文章主要介绍了 纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白 必看),代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
效果如下：
HTML：
<div class="itemInWorks" >
婚礼策划
<div class="mask">
状态：待完成<br>
执行者：张三<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">
状态：待完成<br>
执行者：张三<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
最新评论