一道闪光在图片上划过

在百度音乐 http://music.baidu.com/ 看到这么一个图片效果，当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的。于是把这个效果再实现一下：
大体思想是，设计一个透明层i，skewx在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变linear-gradient，然后hover的时候，设置0.5s的动画时间。
同时在 i 层使用 cursor:pointer，如果不设置这个的话，需要等透明层动画之后才能看得到 pointer 指针。
打开 fireBUG 调试来看会更加清楚!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>闪光图片</title>
<style>
.overimg{position: relative;display: block;/* overflow: hidden; */box-shadow: 0 0 10px #FFF;
}
.light{cursor:pointer;position: absolute;left: -180px;top: 0;width: 180px;height: 90px;background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));transform: skewx(-25deg);-o-transform: skewx(-25deg);-moz-transform: skewx(-25deg);-webkit-transform: skewx(-25deg);}
.overimg:hover .light{left:180px;-moz-transition:0.5s;-o-transition:0.5s;-webkit-transition:0.5s;transition:0.5s;
}
</style></head>
<body>
<p class="overimg"><a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a><i class="light"></i>
</p>
</body>
</html>

一道闪光在图片上划过相关推荐

html5闪光效果,css特效-一道闪光在图片上划过
在百度音乐 http://music.baidu.com/ 看到这么一个图片效果,当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的.于是把这个效果再实现一下: 大体思想是,设计一个透明层i, ...
css特效-一道闪光在图片上划过
在百度音乐 http://music.baidu.com/ 看到这么一个图片效果,当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的.于是把这个效果再实现一下: 大体思想是,设计一个透明层i, ...
演练鼠划图片上变亮的效果 1022
演练鼠划图片上变亮的效果 1022 期望效果素材图片
爬虫requests如何提取图片_如何提取图片上的文字（办公技巧）
是夜,公寓里,一道黑影闪过窗前,对面楼顶传来一声凄厉的猫叫声. 王美丽一个机灵,目中闪过一丝恐惧. 她面前的电脑里,正在播放<午夜凶铃>. 阴森恐怖的配音,让她全身发冷,感觉后脊梁有一股凉 ...
html5鼠标移过切换图片,鼠标移动到图片上切换到另一张图片，移出时又切默认图片...
HTML写法: JS写法:var img = document.createElement("img"); img.setAttribute("src",&qu ...
html显示数据库图片django,django将图片上传数据库后在前端显式的方法
1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=mo ...
yii2框架原生的结合框架使用的图片上传
首先我们要从model层开始写起,主要是为了创建验证规则,还有图片上传的路径以及图片的命名规则(UploadForm.php) 接下来我们要在控制器层写好业务逻辑,就是什么情况下直接在调用model层 ...
java flex 图片上传_flex上传图片到java服务器
今天弄flex上传图片到java,现在弄成功,中间也经常一点小波折,现记录一下.重点在java侧的实现. flex侧:文件上载到在url参数中传递的URL.该URL必须是配置为接受上载的服务器脚本.F ...
js表单提交，支持图片上传，包含后端php代码
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. <html><head><meta http-equiv="Conte ...
ckeditor finder php,CKEDITOR CKFINDER的图片上传配置(C#/asp.net/php)
CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还 ...

一道闪光在图片上划过

一道闪光在图片上划过相关推荐

最新文章

热门文章