代码很简单, 根据需要修改标签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. 如何修改Windows上某块网卡的MTU的值

    先用如下命令查看所有的网卡以及他们的MTU的值. netsh interface ipv4 show interfaces 使用如下的命令修改他们的MTU为9000.        netsh int ...

  2. windows下mysql忘记root密码的解决办法

    今天早上 一朋友说自己的mysql 忘记root密码了 让我帮忙给看看,因为没有接触过mysql 所以从网上找了一下信息经我亲身实践  已经成功!mysql版本是5.1以下是从网上找的信息: 1. 首 ...

  3. checkbox反复调用attr('checked', true/false)只有第一次生效

    /** * 全选 */ function checkAll() { $("input[name=ids]").attr("checked", true); } ...

  4. Linux下安装nmap扫描工具

    NMAP是一款流行的网络扫描和嗅探工具,被广泛应用在黑客领域做漏洞探测以及安全扫描,更多的nmap是一个好用的网络工具,在生产和开发中也经常用到,主要做端口开放性检测和局域网信息的查看收集等,不同Li ...

  5. 【Spark】SparkStreaming-foreachrdd foreachpartition

    SparkStreaming-foreachrdd foreachpartition foreachrdd foreachpartition_百度搜索 SparkStreaming之foreachRD ...

  6. Nginx配置基于多域名、端口、IP的虚拟主机

    原文:https://www.cnblogs.com/ssgeek/p/9220922.html ------------------------------- Nginx配置基于多域名.端口.IP的 ...

  7. mongodb最大连接数、最大连接数修改

        mongodb最大连接数是20000. 所以业界流传一段话,千万级以下的用mysql.千万级以上的用mongodb,亿级以上的用hadoop.   查看mongodb最大连接数 mongodb ...

  8. [Spring Boot] Complex Scope Scenarios of a Spring Bean - Mix Prototype and Singleton, ScopeProxy

    We have the following example: @SpringBootApplication public class In28minutesScopeApplication { pri ...

  9. PHPCMS标签

    获取栏目名:{$CAT[catname]}或{$catname}获取父栏目名:{$CATEGORYS[$CAT[parentid]][catname]} 获取同级栏目列表: {pc:content a ...

  10. Windows版Mycat结合mysql安装配置+水平切分（转载）

    来源:https://segmentfault.com/a/1190000009495748 参考文档:Mycat安装与使用 环境 环境 版本 windows 10 java 1.8.0 mysql ...