代码很简单, 根据需要修改标签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. 微信公众号网页授权获取用户openid

    最近一个项目是在微信公众号内二次开发,涉及到微信公众号支付,根据文档要求想要支付就必须要获取到用户的openid. 这是微信官方文档https://mp.weixin.qq.com/wiki?t=re ...

  2. 用深度学习（CNN RNN Attention）解决大规模文本分类问题 - 综述和实践

    https://zhuanlan.zhihu.com/p/25928551 近来在同时做一个应用深度学习解决淘宝商品的类目预测问题的项目,恰好硕士毕业时论文题目便是文本分类问题,趁此机会总结下文本分类 ...

  3. List 集合的交集

    private void Test() { List<string> lsA = new List<string>(); lsA.Add("A"); lsA ...

  4. offsetof与container_of宏[总结]

    1.前言 今天在看代码时,遇到offsetof和container_of两个宏,觉得很有意思,功能很强大.offsetof是用来判断结构体中成员的偏移位置,container_of宏用来根据成员的地址 ...

  5. Kafka：ZK+Kafka+Spark Streaming集群环境搭建（十七）Elasticsearch-6.2.2集群安装，组件安装

    1.集群安装es ES内部索引原理: <时间序列数据库的秘密(1)—— 介绍> <时间序列数据库的秘密 (2)——索引> <时间序列数据库的秘密(3)——加载和分布式计算 ...

  6. 关闭Pycharm拼写检查

    转载: https://blog.csdn.net/u013088062/article/details/50001189 Pycharm作为一款优秀的PythonIDE,唯一让我觉得不安的就是它的拼 ...

  7. JAVA中JDBC连接Mysql数据库简单测试

    一.引用库 maven库:mysql:mysql-connector-java:6.0.6 二.SDK环境 JAVA JDK10 三.测试代码 package com.mysql.mysqlconne ...

  8. C++ 第五课：C/C++ 数据类型

    C语言包含5个基本数据类型: void, integer, float, double, 和 char. 类型 描述 void 空类型 int 整型 float 浮点类型 double 双精度浮点类型 ...

  9. [OpenGL] 斯坦福兔子与显示列表

    1.调整桌子的大小.         在OpenGL绘制长方体,能够通过函数: glutSolidCube(Size)          绘制得到的是一个正方体,再利用缩放矩阵使其变成长方体.使得桌子 ...

  10. Web Storage与Cookie相比存在的优势：

    (1).存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多. (2).存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一 ...