您现在的位置是：网站首页> 编程资料编程资料

纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白必看)css实现背景半透明文字不透明的效果示例纯css实现背景图片半透明内容不透明的方法利用CSS3制作简单的3d半透明立方体图片展示用CSS设定一个元素半透明css3实现的半透明遮罩lightbox效果源码纯CSS实现多级半透明效果菜单代码

2023-10-18 205人已围观

简介这篇文章主要介绍了纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白必看),代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

效果如下：

实例1

实例2以实例1【婚礼策划】为例

HTML：

 婚礼策划  状态：待完成
 执行者：张三
 截止日期：2020/03/15

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顶端的距离*/ }

全部代码：

Title 婚礼策划  状态：待完成
 执行者：张三
 截止日期：2020/03/15

总结

以上所述是小编给大家介绍的纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白必看)，希望对大家有所帮助！

上一篇：在Firefox浏览器中利用CSS窃取数据CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

下一篇：css中有序无序列表项list样式设置方法CSS字体、文本、列表属性详细介绍CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现使用CSS计数器美化数字有序列表的实现方法

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢