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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>light</title>

    <style>

        body{

            margin:;

        }

        a.floor{

            display: block;

            height: 475px;

        }

        a.floor:hover:before{

            -webkit-transition: left 1.5s;

            -moz-transition: left 1.5s;

            transition: left 1.5s;

            left: 920px;

        }

        a.floor:before{

            content: "";

            position: absolute;

            width: 80px;

            height: 475px;

            top:;

            left: -150px;

            overflow: hidden;

            background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);

            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)));

            background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);

            background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);

            -webkit-transform: skewX(-25deg);

            -moz-transform: skewX(-25deg);

        }

    </style>

</head>

<body>

<a class="floor" href="javascript:;">

    <img src="./images/girl.jpg" height="475" width="760" alt="">

</a>

</body>

</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. Neo4j 2.0 生产环境集群搭建

    一.在windows上搭建Neo4j ha cluster的配置方法: 例如:建立集群的三台机器的ip分别为:10.230.9.91,10.230.9.92,10.230.9.93. 10.230.9 ...

  2. 添加PMD插件扫描潜在的bug

    上一节使用checkstyle来规范你的项目主要解决了代码编码规范问题,比如缩进换行等.这次继续代码健康工具类PMD. 什么是PMD PMD真的不像checkstyle这样的东西所见即所得啊,去官网找 ...

  3. 【架构】技术-工具-平台-语言&框架

    技术-工具-平台-语言&框架 Techniques | Technology Radar | ThoughtWorks

  4. ProBase

    http://haixun.olidu.com/probase.html A Data Driven Semantic Network for Text Understanding Probase i ...

  5. conEmu的使用笔记

    1.如何让conEmu成为windows的默认控制台程序? 解决:选中settings > Integration > Default Term里的Force ConEmu as defa ...

  6. .NET 服务器定位模式（Service Locator Pattern）——Common Service Locator

    本文内容 场景 目标 解决方案 实现细节 思考 相关模式 更多信息 参考资料 Common Service Locator 代码很简单,它一般不会单独使用,而是作为一个单件模式,与像 .net Uni ...

  7. Zabbix-Agent在主动模式启动服务后，提示no active checks on server [139.219.xx.xx:10051]: host [139.219.xx.xx] not found

    一.解决方法

  8. webkit webApp 开发技术要点总结[转]

    http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.html 如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现 ...

  9. java.lang.NoSuchMethodError: org.apache.commons.lang.StringUtils.endsWith(Ljava/lang/String;Ljava/lang/String;)Z

    这是一个包冲突的典型错误,今天搞了一天.从错误信息就能看出是commons.lang出现的问题,解决方案:去掉新增加的conmons.lang依赖,加载其他的版本. 1.在编译之后的目录查看加载的包版 ...

  10. NGINX源码分析——概览

    一.概况 Nginx可以开启多个进程,每个进程拥有最大上限128个子线程以及一定的可用连接数.最大客户端连接数等于进程数与连接数的乘积,连接是在主进程中初始化的,一开始所有连接处于空闲状态.每一个客户 ...