css特效-一道闪光在图片上划过
在百度音乐 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>
css特效-一道闪光在图片上划过的更多相关文章
- css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；
css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...
- CSS实现文字半透明显示在图片上方法
CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
- JQuery与CSS之图片上放置button
position:relative日常应用的时候通常是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就 ...
- SSM实现图片上传管理操作
Spring MVC 实现文件上传 时序图 利用 Spring MVC 实现文件上传功能,离不开对 MultipartResolver 的设置.MultipartResolver 这个类,你可以将其视 ...
- springboot整合ueditor实现图片上传和文件上传功能
springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- TinyMCE的使用（包括汉化及本地图片上传功能）
TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...
- 包含修改字体，图片上传等功能的文本输入框-Bootstrap
通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...
随机推荐
- Qt ------ 再论事件循环
在介绍在以前,我们要认识两个术语: 可重入的(Reentrant):如果多个线程可以在同一时刻调用一个类的所有函数,并且保证每一次函数调用都引用一个唯一的数据,就称这个类是可重入的(Reentrant ...
- 利用Zynq Soc创建一个嵌入式工程
英文题目:Using the Zynq SoC Processing System,参考自ADI的ug1165文档. 利用Zynq Soc创建一个嵌入式工程,该工程总体上包括五个步骤: 步骤一.新建空 ...
- (转) 使用vivado创建工程 1
此文全文转自:http://svenand.blogdrive.com/archive/169.html#.WaUV9IiGNPY ,非常感谢! 本人在vivado 2015.4版本测试! When ...
- eclipse/myeclipse添加插件3种方式
个人比较偏爱links的方式,以下方式eclipse/myeclipse均适合 1.links方式 在eclipse目录先新建links目录,新建一个xx.link(例如:android.link) ...
- HTML5 表单自学记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 分治法：三维偏序问题之CDQ分治
我怀疑那个k是用来定界限用的 #include <cstdio> #include <cstring> #include <algorithm> using nam ...
- [洛谷P3228] [HNOI2013]数列
洛谷题目链接:[HNOI2013]数列 题目描述 小T最近在学着买股票,他得到内部消息:F公司的股票将会疯涨.股票每天的价格已知是正整数,并且由于客观上的原因,最多只能为N.在疯涨的K天中小T观察到: ...
- ② 设计模式的艺术-02.简单工厂（Simple Factory）模式
工厂模式 实现了创建者和调用者的分离. 详细分类:简单工厂模式.工厂方法模式.抽象工厂模式 面向对象设计的基本原则 OCP(开闭原则,Open-Closed Principle):一个软件的实体应当对 ...
- spring boot(二)：注解大全
spring boot注解 @Autowired 注解的意思就是,当Spring发现@Autowired注解时,将自动在代码上下文中找到和其匹配(默认是类型匹配)的Bean,并自动注入到相应的地方去. ...
- c# asp.net 调用系统设置字体文本框
一,调用系统字体文本框 首先在bin文件夹右击--添加引用--.net标签里选择System.Windows.Forms--确定 然后在cs文件里引入,using System.Windows.For ...