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平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...
随机推荐
- 详解 Cookie 和 Session 关系和区别
在技术面试中,经常被问到“说说Cookie和Session的区别”,大家都知道,Session是存储在服务器端的,Cookie是存储在客户端的,然而如果让你更详细地说明,你能说出几点?今天个推君就和大 ...
- Dubbo+Zookeeper+SpringMVC+Maven整合实现微服务项目
互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,Dubbo是一个分布式服务框架,在这种情况下诞生的.现在核心业务抽取出来,作为独立的服务,使 ...
- Javascript的执行过程详细研究
下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码执行顺序就比较形象了,因为我 ...
- css 格式中id与class共存
PHP文件中有一段:<div class="post-alt blog" id="post-alt"> CSS文件中有一段:.post-alt {X ...
- Python3 多进程
多进程(multiprocessing)的用法和多线程(threading)类似,里面的函数也一样,start()为启动函数,join() 等待该进程运行结束,每一个进程也是由它的父进程产生 1.简单 ...
- __inet_insert_ifa/__inet_del_ifa
/* 添加ip地址 主地址添加到最后一个满足范围的主地址后面 从地址添加到整个列表后面 若列表中存在与插入地址在同一子网的地址,则 要求ip地址不同且范围相同,并且插入地址认为是从地址 */ stat ...
- C#：Excel上传服务器后导入数据库
- 94.Binary Tree Inorder Traversal---二叉树中序非递归遍历
题目链接 题目大意:中序遍历二叉树.先序见144,后序见145. 法一:DFS,没啥说的,就是模板DFS.代码如下(耗时1ms): public List<Integer> inorder ...
- javascript 之数据类型--01
写在前面 国庆整理资料时,发现刚开始入门前端时学习JS 的资料,打算以一个基础入门博客记录下来,有不写不对的多多指教: 先推荐些书籍给需要的童鞋 <JavaScript 高级程序设计.pdf&g ...
- Caused by: android.content.res.Resources$NotFoundException: Resource ID #0x7f070058 android-studio 3.0 from canary 5 to canary 6
我升级android-studio到了3.0 canary 6打包编译安装出现如下错误: 07-11 13:00:39.523 8913-8913/dcpl.com.myapplication E/A ...