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

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>闪光图片</title>
    6. <style>
    7. .overimg{
    8. position: relative;
    9. display: block;
    10. /* overflow: hidden; */
    11. box-shadow: 0 0 10px #FFF;
    12. }
    13. .light{
    14. cursor:pointer;
    15. position: absolute;
    16. left: -180px;
    17. top: 0;
    18. width: 180px;
    19. height: 90px;
    20. background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    21. background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    22. transform: skewx(-25deg);
    23. -o-transform: skewx(-25deg);
    24. -moz-transform: skewx(-25deg);
    25. -webkit-transform: skewx(-25deg);
    26. }
    27. .overimg:hover .light{
    28. left:180px;
    29. -moz-transition:0.5s;
    30. -o-transition:0.5s;
    31. -webkit-transition:0.5s;
    32. transition:0.5s;
    33. }
    34. </style>
    35. </head>
    36. <body>
    37. <p class="overimg">
    38. <a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a>
    39. <i class="light"></i>
    40. </p>
    41. </body>
    42. </html>

css特效-一道闪光在图片上划过的更多相关文章

  1. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  2. CSS实现文字半透明显示在图片上方法

    CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...

  3. JQuery与CSS之图片上放置button

    position:relative日常应用的时候通常是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就 ...

  4. SSM实现图片上传管理操作

    Spring MVC 实现文件上传 时序图 利用 Spring MVC 实现文件上传功能,离不开对 MultipartResolver 的设置.MultipartResolver 这个类,你可以将其视 ...

  5. springboot整合ueditor实现图片上传和文件上传功能

    springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...

  6. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  7. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  8. TinyMCE的使用（包括汉化及本地图片上传功能）

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...

  9. 包含修改字体，图片上传等功能的文本输入框-Bootstrap

    通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...

随机推荐

  1. Linux下UDP一发一收通信

    实现在Linux环境下的UDP通信测试. 注释了while循环,将代码规范化. udpserver.c代码: /******************************************** ...

  2. 解决问题Can’t connect to local MySQL server through socket

    不幸遇到MySQL出现ERROR 2002 (HY000): Can’t connect to local mysql server through socket ‘/tmp/mysql.sock’错 ...

  3. Jenkins使用教程之创建job

    第一部分:常规设置(general) 1.点击新建,进入新建项目页面 2.输入项目名称,选择构建一个自由风格的软件项目(里面可以自己自由进行配置,使用更加灵活),点击ok 3.项目名称与描述 4.gi ...

  4. codevs 2488 绿豆蛙的归宿

    2488 绿豆蛙的归宿 http://codevs.cn/problem/2488/  时间限制: 1 s  空间限制: 64000 KB  题目等级 : 黄金 Gold   题目描述 Descrip ...

  5. .NET面试题系列（二）GC

    序言 对象生存期 Phone item=new Phone() 在C#中,创建对象使用的是new关键字. 要注意的是new操作返回的并不是对象本身,而是对象的一个引用(Reference). 如果使用 ...

  6. javascript小技巧之with()方法

    With()方法平时用得不多,本文用个小例子来学习一下.在这里记录.个人感觉还是很方便的. 有了 With 语句,在存取对象属性和方法时就不用重复指定参考对象,在 With 语句块中,凡是 JavaS ...

  7. 表格标签（table、行、列、表头）

    表格标签 一.<table> <table>代表表格标签.   <table></table> 1.width  表示表格宽度,宽度表达方式有像素和百分 ...

  8. 基于bootstrap物资管理系统后台模板——后台

    链接:http://pan.baidu.com/s/1geKwVMN 密码:0utl

  9. python并发编程之Queue线程、进程、协程通信（五）

    单线程.多线程之间.进程之间.协程之间很多时候需要协同完成工作,这个时候它们需要进行通讯.或者说为了解耦,普遍采用Queue,生产消费模式. 系列文章 python并发编程之threading线程(一 ...

  10. openjudge-NOI 2.6-1759 最长上升子序列

    题目链接:http://noi.openjudge.cn/ch0206/1759/ 题解: 奇怪……之前博客里的o(nlogn)标程在codevs和tyvj上都能AC,偏偏它这里不行 #include ...