在百度音乐 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. 3.6 scikit-learn：Python中的机器学习

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&am ...

  2. 前端PHP入门-027-数组常用函数-掌握级别

    下面的函数一定要到熟悉甚至到掌握级别. 这些函数,也是面试中基础面试中最爱问到的问题. 函数名 功能 array_combine() 生成一个数组,用一个数组的值作为键名,另一个数组值作为值 rang ...

  3. 前端PHP入门-019-内置函数之数学函数-很重要

    查看帮助文档为主 函数名 描述 实例 输入 输出 abs() 求绝对值 $abs = abs(-4.2); //4.2 数字 绝对值数字 ceil() 进一法取整 echo ceil(9.999); ...

  4. [DeeplearningAI笔记]卷积神经网络3.6-3.9交并比/非极大值抑制/Anchor boxes/YOLO算法

    4.3目标检测 觉得有用的话,欢迎一起讨论相互学习~Follow Me 3.6交并比intersection over union 交并比函数(loU)可以用来评价对象检测算法,可以被用来进一步改善对 ...

  5. rabbitmq常见运维命令和问题总结

    常见运维命令作用: yum安装erlang的环境配置: ERLANG_HOME=/usr/lib64/erlang export PATH=$PATH:$ERLANG_HOME/bin 常见rabbi ...

  6. HTML DOM 节点介绍(nodeName,nodeValue,nodeType)

    对于初学者来说,HTML DOM 里面的 nodeName.nodeValue 以及 nodeType 三个属性的作用和取值不是很清楚.下面整理的信息包含有关于节点的详细信息,供参考. 节点信息 每个 ...

  7. 绝妙的SQL行列转换语句

      说明:普通行列转换(version 1.0)仅针对sql server 2000提供静态和动态写法,version 2.0增加sql server 2005的有关写法. 问题:假设有张学生成绩表( ...

  8. window10_使用技巧

    1.系统关机文件 @echo offshutdown -s -t 0 2.终端常用命令 notepad 3.解决浏览器跨域 --disable-web-security --user-data-dir ...

  9. 莫比乌斯反演第二弹 入门 Coprime Integers Gym - 101982B

    题目链接:https://cn.vjudge.net/problem/Gym-101982B 题目大意: 给你(a,b)和(c,d)这两个区间,然后问你这两个区间中互素的对数是多少. 具体思路:和我上 ...

  10. Mac 下安装 ruby 环境解决 brew 安装 yarn 问题

    在brew安装yarn提示 ruby的版本过低.在网上搜了一下发现 1. mac下自带的ruby 在 system 目录下 2. 其实可以用brew安装一个ruby brew install ruby ...