代码很简单, 根据需要修改标签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. iOS开发-ViewController的生命周期和切换

    ViewController在App开发中是至关重要的一环,无论是页面的展示和数据之间的交互,ViewController提供了一个框架可以管理和构建App应用.iOS中构建App提供了两种方式一种是 ...

  2. Generate Parentheses leetcode java

    题目: Given n pairs of parentheses, write a function to generate all combinations of well-formed paren ...

  3. Rotate Image leetcode java

    题目: You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwis ...

  4. 人生就要挑战新难度——记zxing的深化

    首先,我们来看看zxing一些基本介绍. ZXing是一个开放源码的,用Java实现的多种格式的1D(注1d条码主要常见的条码) /2D条码(主要是二维码) 图像处理库,它包含了联系到其他语言的端口. ...

  5. Delphi获取默认打印机名称及端口

    Delphi获取默认打印机名称及端口 在前段时间写的收银系统中由于目前市场上很多电脑主板上已经没有并口,而POS机却又需要并口,所以目前需要用PCI转接卡,这个就导致不同门店使用的端口就有可能不同,这 ...

  6. 一文读懂「Attention is All You Need」| 附代码实现

    https://mp.weixin.qq.com/s?__biz=MzIwMTc4ODE0Mw==&mid=2247486960&idx=1&sn=1b4b9d7ec7a9f4 ...

  7. windows server 2012 st 版本的php环境问题修复 与删除

    windows server 2012 st 版本的php环境问题修复 错误内容 HTTP 错误 500.0 - Internal Server Error C:\Program Files\iis ...

  8. ASP入门（七）-Response小案例

    我们通过ASP来创建一个年月日的选择框,年份从1950到2000年,如果手动输入HTML代码,其中的<option>列表项目要写94个 (51年 + 12月 + 31天),很是繁琐. 代码 ...

  9. 构造并发送Beacon帧以伪造任意WiFi热点

    请想象一下这样的情景:你可以任意伪造很多个WiFi热点, 这个技术只能在linux上使用,而且对无线网卡也有一定的挑剔,具体的下面会讲- 阶段一:基本原理 首先需要搞清楚的是,手机.电脑等支持WiFi ...

  10. asp.net集合类

    1.返回IEnumerable类型 protected void Page_Load(object sender, EventArgs e) { IEnumerable ie = AllGet(); ...