在百度音乐 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. 题解 UVA1184 【Air Raid】

    有向无环图(DAG)的最小路径覆盖的模板题. 定义:在一个有向图中,找出最少的路径,使得这些路径经过了所有的点. 由题意可得这是一个有向图,而路径不能相交,于是我们知道这是无向图的不相交最小路径覆盖问 ...

  2. php 傻瓜式代码计算两个时间间隔

    $stamp = (strtotime($_POST['start'])-strtotime($_POST['end'])); $s = $stamp%60; //秒 $m_stamp= ($stam ...

  3. svn工具的使用问题总结

    前言: 最近在开发的时候,由于需求太多,开发周期长短不一,从主线上切了多个分支(一般不在主线trunk上开发,万一线上出问题可及时修改代码上线),在部分功能上线后,想把代码同步到新的分支上去,最开始的 ...

  4. HDU 5213 分块 容斥

    给出n个数,给出m个询问,询问 区间[l,r] [u,v],在两个区间内分别取一个数,两个的和为k的对数数量. $k<=2*N$,$n <= 30000$ 发现可以容斥简化一个询问.一个询 ...

  5. 2015/9/29 Python基础(20)：类的授权

    类的授权 1.包装包装在Python编程世界中时经常会被提到的一个术语.它是一个通用的名字,意思是对一个已存在的对象进行包装,不管它是数据类型,还是一段代码,可以是对一个已存在的对象,增加新的,删除不 ...

  6. （64位）本体学习程序（ontoEnrich）系统配置说明文档

    1系统环境 64位 Ubuntu 2 第三方依赖库配置 boost_1_44_0 #解压boost_1_44_0.tar.gz 到 /usr/local.如果出现权限问题,请用sudo执行该命令 ta ...

  7. Elasticsearch技术解析与实战（六）Elasticsearch并发

    乐观锁与悲观锁 图示的冲突过程,其实就是es的并发冲突问题,会导致数据不准确 当并发操作es的线程越多,或者读取一份数据,供用户查询和操作的时间越长,在这段时间里,如果数据被其他用户修改,那么我们拿到 ...

  8. [php]几个常用函数

    count(arr);用于统计数组的元素个数 is_array(arr);判断给定变量是不是数组 var_dump(var||arr);打印数组或变量信息(类型和值): print_r(var||ar ...

  9. 【CodeForces】889 B. Restoration of string

    [题目]B. Restoration of string [题意]当一个字符串在字符串S中的出现次数不小于任意子串的出现次数时,定义这个字符串是高频字符串.给定n个字符串,求构造出最短的字符串S满足着 ...

  10. 【leetcode 简单】第十题 实现strStr()

    实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在,则返 ...