首页技术正文

简单的CSS3鼠标滑过图片标题和遮罩层动画特效

程序员英杰技术 2022年11月7日

0 收藏 776 点赞 707 浏览 1416 个字

此文转自：http://www.cnblogs.com/w2bc/p/5735300.html，仅供本人学习参考，版权归原作者所有！

这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特效。该鼠标滑过特效通过 CSS3transitions 和 transform 属性，在鼠标滑过图片时制作遮罩层和图片标题动画效果。

在线预览源码下载

使用方法

HTML结构

该鼠标滑过图片特效的HTML结构非常简单：使用一个<div>元素作为图片遮罩层，在里面放置图片的描述信息。

12345678 <img src="img/01.jpg" alt=""><div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>图片标题</h1> <p>描述信息</p> </div></div>

CSS样式

第一个DEMO使用透明度opacity属性来制作遮罩层的导入效果，并通过transition来制作平滑过渡动画。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 .caption-style-1 li{ float: left; padding: 0px; position: relative; overflow: hidden;} .caption-style-1 li:hover .caption{ opacity: 1; }.caption-style-1 img{ margin: 0px; padding: 0px; float: left; z-index: 4;} .caption-style-1 .caption{ cursor: pointer; position: absolute; opacity: 0; -webkit-transition:all 0.45s ease-in-out; -moz-transition:all 0.45s ease-in-out; -o-transition:all 0.45s ease-in-out; -ms-transition:all 0.45s ease-in-out; transition:all 0.45s ease-in-out; }.caption-style-1 .blur{ background-color: rgba(0,0,0,0.65); height: 300px; width: 400px; z-index: 5; position: absolute;} .caption-style-1 .caption-text h1{ text-transform: uppercase; font-size: 24px;}.caption-style-1 .caption-text{ z-index: 10; color: #fff; position: absolute; width: 400px; height: 300px; text-align: center; top:100px;}