该效果在京东里的图片有。
.img {
display:block;
position: relative;
width:800px;
height:450px;
margin:0 auto;
}
.img:before {
content: "";
position: absolute;
width:200px;
height: 100%;
top: 0;
left: -150px;
overflow: hidden;
background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg)
}
.img:hover:before {
left: 150%;
transition: left 1s ease 0s;
}
<a href="#" class="img"><img src="http://img.loveqiao.com/pic1.jpg" width="800"></a>
原文地址：http://www.loveqiao.com/archives/417
分享到：
相关推荐
只需要两个HTML元素和一个CSS变换，我就能创造出我自己的闪光效果。让我们来实现它！ 呈现光泽图片 下面就是这张Addy在他博客上使用的图片： 比我需要的要大一些，但你可以把它裁剪一些。 注意：左边的那张是纯白色...
【标题】中的“使用纯CSS3实现图片轮播效果源码免费下载”表明我们要讨论的是一个基于CSS3技术实现的图片轮播效果，且提供源码供用户免费下载。CSS3是层叠样式表的第三版，是Web设计领域的重要组成部分，它提供了...
在CSS3中，鼠标划过样式（Hover效果）是一种常用的技术，用于改变用户将鼠标光标悬停在元素上时的视觉表现。这种效果能够增强用户界面的交互性和吸引力，常用于按钮、链接、菜单等元素。在"css3-hoverButton"这个...
在本案例中，我们关注的是“光束闪过特效”，这是一个利用CSS3动画来创建动态视觉效果的技术。这种效果通常用于吸引用户的注意力或者为网站或应用程序添加一些独特的交互体验。 首先，我们需要理解CSS3的关键帧动画...
在“12种炫酷CSS3图片切换过渡效果”这个主题中，我们将深入探讨这些效果的实现方法和应用场景。 1. **滑动切换**：这种效果通常用于轮播图，图片沿水平或垂直方向平滑滑动，提供了一种流畅的视觉过渡。通过`...
css图片外边框效果实现 css图片外边框效果实现
在本文中，我们将深入探讨如何使用JavaScript（js）和CSS3技术实现一款鼠标滑过图片时，图片随机切换展示的特效。这个特效模仿了扑克牌翻转的效果，为网页增添了一种动态且引人注目的视觉体验。我们将分为以下几个...
"jQuery+CSS3实现图片圆形转动效果"是一个常见的动态展示技术，广泛应用于网站头图、产品展示、广告轮播等多个场景。这个主题涵盖了两个关键的技术：jQuery（一个流行的JavaScript库）和CSS3（一种强大的样式表语言...
在这款名为“css3线条波浪动画效果”的项目中，开发者利用CSS3的动画（animation）特性，结合PNG图像，创建了一个生动且吸引人的波浪线条动画效果。以下是对这个项目的详细解析： 首先，CSS3的动画功能允许我们为...
本资源“纯CSS3实现的图片切换幻灯片代码.zip”提供了一个无需JavaScript或jQuery的纯CSS3实现的图片切换幻灯片效果。这种技术在网页设计中非常常见，因为它可以为用户提供一种动态、吸引人的方式来展示多张图片，如...
2.需要使用css3中的至少两种效果，并且用到css3的地方请注释，例如阴影效果，动画效果，2D转换，3D转换，css3过渡等等。 3.要求css样式写在head的style里，或者新建一个css文件写在里面。图片放在单独建立的文件夹下...
一、图片实现圆形条件 原本不是圆形图片，通过CSS样式布局实现成圆形图片，首先图片必须为正方形。 二、使用布局技术 使用CSS3 圆角技术实现。 使用CSS3样式单词：border-radius 语法： div{border-...
"jQuery+CSS3圆形图片3D翻转效果"是一种创新的交互方式，它利用jQuery库的强大功能和CSS3的新特性，实现了类似书本翻页的3D视觉体验。这种效果可以用于展示个人头像、产品图片或其他任何需要突出展示的圆形图像。 *...
【CSS3卡通太阳阳光照射动画特效】是一种利用CSS3的强大功能来实现的视觉效果，它在网页设计中常用于增加互动性和视觉吸引力。这个动画特效通过细致的样式定义和动态变换，模拟出一个可爱且生动的太阳形象，伴随着...
在本压缩包“css3心跳动画、流行划过效果、跳动的球css3.zip”中，包含了几个关于CSS3的精彩示例，主要涉及以下几个关键知识点： 1. **CSS3 心跳动画**： CSS3心跳动画是通过利用CSS3的动画属性来创建一种视觉上...
效果描述： 在手机移动客户端，我们经常看到图片由模糊到清晰的加载过程 如果抛给你这样一个问题，你会怎么去实现呢 而且是在不用js的基础上实现 今天懒人站长写了这样一个效果，供给大家参考使用 ...
【纯CSS3鼠标hover图片3D透视效果】是一种利用CSS3的强大功能来实现的交互式设计技术。在网页设计中，这种效果可以增加用户界面的动态感和视觉吸引力，为用户提供更加丰富的体验。CSS3是层叠样式表的最新版本，它...
jquery+css3实现图片提示效果.rarjquery+css3实现图片提示效果.rarjquery+css3实现图片提示效果.rarjquery+css3实现图片提示效果.rarjquery+css3实现图片提示效果.rarjquery+css3实现图片提示效果.rar
这是一款基于HTML5和CSS3的图片滤镜特效应用，每一张图片应用不同的滤镜效果都会有不一样的视觉特效。另外，你也可以切换图片，特别是应用在相册应用中，你不仅可以浏览不同的图片，而且对同一张图片可以有多种特效...