代码很简单, 根据需要修改标签class和弧光效果的宽高位置就可以了.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>light</title>
  6.     <style>
  7.         body{
  8.             margin:;
  9.         }
  10.         a.floor{
  11.             display: block;
  12.             height: 475px;
  13.         }
  14.         a.floor:hover:before{
  15.             -webkit-transition: left 1.5s;
  16.             -moz-transition: left 1.5s;
  17.             transition: left 1.5s;
  18.             left: 920px;
  19.         }
  20.         a.floor:before{
  21.             content: "";
  22.             position: absolute;
  23.             width: 80px;
  24.             height: 475px;
  25.             top:;
  26.             left: -150px;
  27.             overflow: hidden;
  28.             background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
  29.             background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
  30.             background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
  31.             background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
  32.             -webkit-transform: skewX(-25deg);
  33.             -moz-transform: skewX(-25deg);
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38. <a class="floor" href="javascript:;">
  39.     <img src="./images/girl.jpg" height="475" width="760" alt="">
  40. </a>
  41. </body>
  42. </html>

详情参见:

http://www.cnblogs.com/jaxu/p/5946947.html

http://www.loveqiao.com/archives/417

CSS特效(弧光效果)的更多相关文章

  1. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  2. jquery特效 幻灯片效果

    jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  3. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  4. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  5. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  6. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  7. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  8. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  9. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

随机推荐

  1. getWidth() 和 getMeasuredWidth()的区别

    getWidth(): View在设定好布局后整个View的宽度.   getMeasuredWidth(): 对View上的内容进行测量后得到的View内容占据的宽度,前提是你必须在父布局的onLa ...

  2. 轻松解决vuejs跨域

    Vuejs跨域问题实战 有时候,本地使用webpack开启一个node的dev端口,项目中使用vuejs去访问别人家的api,比如豆瓣或者其他的api,不使用jsonp肯定就会报跨域的问题. 如何让我 ...

  3. mysql设置允许外网访问

    1.设置mysql服务允许外网访问 修改mysql的配置文件,有的是my.ini,有的是my.cnf[linux],找到bind-address变量,这个值默认是127.0.0.1,设置为0.0.0. ...

  4. artTemplate--使用artTemplate时，由于json对象属性有特殊格式 导致调用报错artTemplate,syntax error,Template Error

    我们首先看下面的代码 data = { "siteName" : "西部云谷二期17", "PM10" : "10017" ...

  5. 【指导】SonarQube 部署说明

    转载:https://blog.csdn.net/cuiaamay/article/details/52057091 1,安装 1.1 安装依赖 需要保证Oracle JRE 8 及以上,或者 Ope ...

  6. Bossies 2015: The Best of Open Source Software Awards

    InfoWorld editors and contributors pick the top open source software for data centers, clouds, devel ...

  7. IT行业简报 2014-2-8

    1.微信在“我的银行卡”页面接入嘀嘀打车,三天内微信打车突破10万单,日均订单为70万,其中微信支付订单超过48万单2.三大运营商手机支付用户仅366.3万,与腾讯单月发展手机支付用户500万户相比, ...

  8. spring MVC、mybatis配置读写分离，ReplicationDriver（转载）

    参考:http://shift-alt-ctrl.iteye.com/blog/2271730c 环境: 3台数据库机器,一个master,二台slave,分别为slave1,slave2 2.要实现 ...

  9. 从n个数中随机选取m个

    咋一看,这是个很简单的问题,但是如果n是个不确定的数呢?比如服务器每天会收到数以亿计的请求,但是目前服务器端不希望保存所有的请求,只想随机保存这些请求中的m个.试设计一种算法,能够使服务器实时保存m个 ...

  10. 【转】一些linux基础命令

    学习Linux,其实很多基础命令很重要. 不论多么复杂的shell或者命令组合,都是一个一个的拼接组合命令拼接而成: 大号一个基本功,遇到需要的场景,信手拈来,随意组合拼接,是非常重要的. 恰好看到一 ...