最近看到w3cfuns教程页面的一个效果，学习和实现了一下，感觉不错，大家以后可以在项目中使用，其中几个知识点：
1、使用伪类元素:before和after来处理显示在图片上面的半透明遮罩背景和图片效果
2、使用css3动画属性transform:scale(1.1) 变化图片大小
3、使用transition实现渐变动画效果
页面代码如下：
<body id="before-after">
<ul>
<li><a href="#"><img src="images/p4.jpg" width="390" alt=""></a></li>
<li><a href="#"><img src="images/p5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/p7.png" alt=""></a></li>
</ul>
</body>
css代码如下：
/* 伪元素before-after */
#before-after ul {
clear:both;
overflow:hidden;
margin:20px 0 0 0
}
#before-after li {
float:left;
margin:0 20px 0 0
}
#before-after li a {
height: 365px;
}
#before-after li a, #before-after li img {
display: block;
height: 220px;
overflow: hidden;
position: relative;
transition: all 0.3s ease 0s;
width: 390px;
}
#before-after li a:before, #before-after li a:after {
content: "";
height: 220px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity 0.4s ease 0s;
visibility: hidden;
width: 390px;
}
#before-after li a:before {
background:#7a7fd2;
z-index:1
}
#before-after li a:hover:before {
opacity: 0.8;
visibility: visible;
}
#before-after li:hover a:after {
z-index:2;
background:url(images/play.png) center center no-repeat;
}
#before-after li a:hover:after {
opacity: 1;
visibility: visible;
}
#before-after li:hover img {
transform:scale(1.1)
}
实例下载地址：http://pan.baidu.com/s/1dDH52Hb
相关推荐
在本主题“117个图片css3鼠标经过效果”中，我们将探讨CSS3如何实现图片在鼠标悬停时的动态变换，以及这些效果可能带来的用户体验提升。 1. 鼠标悬停伪类选择器：`:hover` CSS3中的`:hover`伪类选择器允许我们在...
【纯CSS3鼠标滑过图片遮罩层动画特效】是一种基于现代浏览器的Web设计技术，主要利用CSS3的特性来实现交互式的用户体验。这个特效的核心在于，当用户将鼠标光标移动到图片上方时，会触发一个遮罩层，显示图片的附加...
在CSS3中，可以使用`background-color`属性来设置背景色，而动画则可能涉及到`background-image`（如果使用渐变作为背景）或`background-size`（如果使用背景图片）。 4. **过渡（Transition）**：CSS3的`...
这个压缩包文件“纯CSS3实现鼠标滑过图片出现条纹遮罩层动画特效源码.zip”显然是一个包含示例代码的资源，旨在帮助开发者了解如何利用CSS3创建一种交互式的图片展示效果。当用户将鼠标悬停在图片上时，图片会覆盖一...
以下是对8款CSS3鼠标滑过图片显示文字动画效果的详细解析： 1. **遮罩层效果**： 当鼠标滑过图片时，会触发一个半透明的遮罩层覆盖在图片上。遮罩层可以是固定颜色、渐变色或者具有图案，通过调整遮罩层的透明度，...
该资源是一个网页模板，主要特色是利用纯CSS3技术实现了一种独特的图片特效：当鼠标滑过图片时，图片上会动态显示出条纹状的遮罩层，为网页增添了一种现代感和交互性。接下来，我们将深入探讨这个知识点。 首先，...
本文将深入探讨“30款CSS3实现的鼠标经过图片显示描述特效”，这些特效能够为网站增添动态感，提高用户对内容的理解与互动性。CSS3是 Cascading Style Sheets 的第三版，它提供了更丰富的样式控制，包括动画、过渡和...
在本资源"CSS3鼠标经过遮罩及链接动画特效.zip"中，主要涉及的是使用CSS3来实现一种交互式的设计效果，即当鼠标悬停在元素上时，产生遮罩和链接的动态变换。这种效果可以提升网页的用户体验，使网站更加生动、吸引人...
遮罩层是一种常见的网页设计元素，通常用于在图片或背景上添加半透明覆盖，以突出显示特定内容或者创建视觉焦点。在这个特效中，遮罩层可能是一个具有固定颜色或渐变的div元素，通过CSS设置其透明度（opacity）和...
6. **CSS动画**：使用`@keyframes`规则可以创建自定义动画，当鼠标悬停在图片上时，这些动画可以触发。例如，图片可以像翻书页一样旋转，或者像波纹扩散一样放大。 7. **伪元素与边框效果**：利用`:before`和`:...
【标题】"CSS3按钮透明光亮遮罩特效"是一个基于现代CSS3技术实现的网页设计元素，旨在为按钮添加动态的透明光亮效果，并通过遮罩层来增强视觉冲击力。这种特效常用于提高用户体验，使用户在交互时感受到更丰富的视觉...
标题中的“CSS3六边形布局鼠标遮罩显示”揭示了这个压缩包包含了一个使用CSS3技术实现的六边形布局，并且具有鼠标悬停时显示遮罩效果的交互功能。这种效果通常用于网页设计，增加用户体验，使网站或应用看起来更加...
"CSS3菱形布局鼠标经过遮罩代码.zip" 提供了一个利用现代CSS3技术实现的创新设计，这种设计允许用户在鼠标悬停时看到一个遮罩效果。下面我们将详细探讨这个知识点。 1. **CSS3菱形布局**：CSS3提供了多种方式来创建...
首先，我们来看第一种效果——鼠标滑过遮罩文字背景动画。在这个效果中，背景由一个CSS3渐变图案组成，这个图案是一个彩虹色的条纹。通过`linear-gradient`函数定义了一个从透明到多种颜色再到透明的渐变。背景颜色`...
"12种炫酷的CSS3鼠标滑过图片遮罩层动画特效"表明存在多种不同的动态效果，例如渐变、旋转、缩放、模糊等，这些特效可以通过CSS3的transition和animation属性来创建，使得网页交互更加生动有趣。 【标签】：“鼠标...
CSS3中的`transition`属性允许我们平滑地改变元素的样式，当鼠标悬停在图片上时，可以设置图片的透明度、大小或颜色等属性平滑过渡，创造出优雅的效果。 2. **旋转效果**： 使用`transform`属性的`rotate()`函数...
在jQuery图片遮罩层Lightbox特效中，当鼠标滑过图片时，遮罩层会逐渐显现，给人一种专业且优雅的视觉体验。遮罩层的CSS样式可以使用 rgba() 函数设置透明度，以便在不影响其他元素的情况下，为图片添加半透明覆盖。 ...
当鼠标滑过图片时，它会被放大，并且提供几种不同的放大效果供设计师选择。这种效果尤其适用于商品展示、画廊或是图片墙等场景，以吸引用户的注意力，并提高网站内容的互动性。 3. DIV+CSS天猫店铺导航页面效果 此...
网页设计应考虑色彩搭配不超过三种，图像格式如JPEG用于高质量图片，PNG用于透明效果，GIF用于动画。常见的网页版式有F型、Z型等，黑色背景上的文字宜用高对比度颜色，如白色。红色加黑会产生深红色调，给人成熟稳重...