在百度音乐 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. STL源码分析-list

    http://note.youdao.com/noteshare?id=81492dc45602618344edc838ef104581

  2. HAOI2017游记

    HACF的最终成绩已经出炉,但是事情还没有结束. 好多想说的,不知道从何说起,就按照时间顺序说吧. 考前 考前大概一周半就开始复习了,一些比较重要的算法,比如KDT,单纯性,线性基等等没有再继续学,所 ...

  3. 下载外部jar包后，链接源码和javadoc.jar

    今天下载了一个Apache Common的一个jar包,对于引入源码和JavaDoc有了新的认识,在这里记录一下. Binaries是指二进制文件,包含使用的jar包.Source是指源码. xxx. ...

  4. Python之文件操作：os模块

    Python os 模块提供了一个统一的操作系统接口函数 一.对于系统的操作 1.os.name 当前使用平台 其中 ‘nt’ 是 windows,’posix’ 是linux 或者 unix 2.o ...

  5. javaFX8主要特性

    javaFX8主要特性 JavaAPIs:javaFX是用Java代码写的库,包含一系列的类和接口.这个APIs可以友好的替换java虚拟机语言,比如:JRuby和Scala. FXML and 场景 ...

  6. HTML常用标签-手打抄录-来自-烟雨飘零-拜谢

    HTML常用标签及其全称 <a href="#">a 超级链接(anchor)</a>    <abbr title="abbreviati ...

  7. @PathParam 和 @QueryParam

    今天调试一个上传功能,客户端手持机发送数据,在URL中附加一个参数,后台用@PathParam接收,但是报错,无法获取这个参数. url:http://192.168.1.3/web1_service ...

  8. Codeforces 797 F Mice and Holes

    http://codeforces.com/problemset/problem/797/F F. Mice and Holes time limit per test             1.5 ...

  9. ZOJ 3776 A - Pokemon Master 签到水题

    link 求和比大小... /** @Date : 2017-03-23-21.26 * @Author : Lweleth (SoungEarlf@gmail.com) * @Link : http ...

  10. [php]unset函数

    unset($var); 释放一个变量空间 unset($var1, $var2...);释放多个变量空间 unset(var['数组元素内容']);释放数组元素 注意: 1.在函数内部释放全局变量和 ...