css流光效果1：

<!DOCTYPE html>

<html>

<head>

    <title>ww</title>

</head>

<style type="text/css">

    /*CSS源代码*/

    body{

        background:#CFCFCF;

    }

    .image {

      position: relative;

      overflow:hidden;

      width: 300px;

      height: 450px;

    }

    img {

      width:300px;

      height: 450px;

    }

    .image:before{

        content: '';

        position: absolute;

        display:block;

        width: 200px;

        height: 450px;

        background:#fff;

        top: ;

        left: -400px;

        translate: -webkit-transform: skewY(25deg);

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

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

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

        transform: skewX(-25deg);

        background:linear-gradient(0deg, rgba(, , , ), rgba(, , , 0.4), rgba(, , , ));

        -moz-linear-gradient(0deg, rgba(, , , ), rgba(, , , 0.4), rgba(, , , ));

        -webkit-linear-gradient(0deg, rgba(, , , ), rgba(, , , 0.4), rgba(, , , ));

        -o-linear-gradient(0deg, rgba(, , , ), rgba(, , , 0.4), rgba(, , , ));

    }

    .image:hover:before{

      left:400px;

      -webkit-transition: all .5s ease;

      -moz-transition: all .5s ease;

      -ms-transition: all .5s ease;

      -o-transition: all .5s ease;

      transition: all .5s ease;

     }

    }

</style>

<body>

<!-- HTML代码片段中请勿添加<body>标签 //-->

<div id="container">

    <div class="image">

      <img src="http://ww4.sinaimg.cn/mw600/005vbOHfgw1ercvg85sr0j30jg0t6tdq.jpg" alt="Hello World" />

      <!-- <em></em> -->

    </div>

</div>

<!-- 推荐开源CDN来选取需引用的外部JS //-->

<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

</body>

</html>

2：

.view-area ul li{

    width: 32.666%;

    float: left;

    margin-left: %;

    position: relative;

    overflow: hidden;

}

.view-area ul li img{

    width: %;

    height: %;

    position: relative;

}

.view-area ul li::before{

    position: absolute;

    top: ;

    left: -%;

    z-index: ;

    display: block;

    content: '';

    width: %;

    height: %;

    background: -webkit-linear-gradient(left, rgba(,,,) %, rgba(,,,.) %);

    background: linear-gradient(to right, rgba(,,,) %, rgba(,,,.) %);

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

    transform: skewX(-25deg);

}

.view-area ul li:hover::before{

    -webkit-animation: shine .75s;

    animation: shine .75s;

}

@-webkit-keyframes shine {

    % {

        left: %;

    }

}

@keyframes shine {

    % {

        left: %;

    }

}

http://demo.cssmoban.com/cssthemes4/cpts_958_csb/index.html

.

css流光效果的更多相关文章

  1. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  2. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  4. Simptip – 使用 Sass 制作的 CSS Tooltip 效果

    Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...

  5. CSS 居中效果完整指南

    本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...

  6. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  7. 按钮制作技巧（css精灵效果）-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  8. NGUI具有流光效果的UISprite

    之前做过一个流光效果(http://www.cnblogs.com/jietian331/p/4748644.html). 现将其改进一下,与NGUI结合起来,提供一个具有流光效果的组件:UIWalk ...

  9. Unity3d之流光效果

    所谓流光效果,如一个图片上一条刀光从左闪到右边,以下为实现代码: c#代码: using System; using UnityEngine; public class WalkLightEffect ...

随机推荐

  1. RxJava系列之二 变换类操作符具体解释1

    1.回想 上一篇文章我们主要介绍了RxJava , RxJava 的Observables和 RxJava的just操作符.以及RxJava一些经常使用的操作. 没看过的抓紧点我去看吧. 事实上RxJ ...

  2. (寻找第K小的数&amp;&amp;寻找第K小的数的和)

    这一篇博客以一些OJ上的题目为载体,讲一下寻找第K小的数的方法 方法一: 先将数据排列好,然后,然后return a[k]或者将前K个数加起来 方法二: 基于高速排序.如,一次高速排序将某一个数放到了 ...

  3. LeetCode 884. Uncommon Words from Two Sentences (两句话中的不常见单词)

    题目标签:HashMap 题目给了我们两个句子,让我们找出不常见单词,只出现过一次的单词就是不常见单词. 把A 和 B 里的word 都存入 map,记录它们出现的次数.之后遍历map,把只出现过一次 ...

  4. postgis经常使用函数介绍（一）

    概述: 在进行地理信息系统开发的过程中,经常使用的空间数据库有esri的sde,postgres的postgis以及mySQL的mysql gis等等,在本文.给大家介绍的是有关postgis的一些经 ...

  5. oc72--NSArray排序

    // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject @property (nonatomi ...

  6. YTU 2715: 函数---判断某年某月某日是这一年中的第几天

    2715: 函数---判断某年某月某日是这一年中的第几天 时间限制: 1 Sec  内存限制: 128 MB 提交: 380  解决: 155 题目描述 在主程序(main)中输入某年某月某日,例如2 ...

  7. 关于OpenFileDialog的使用（转）

    OpenFileDialog控件有以下基本属性 InitialDirectory 对话框的初始目录 Filter 要在对话框中显示的文件筛选器,例如,"文本文件(*.txt)|*.txt|所 ...

  8. luogu 1045 麦森数

    题目大意: 从文件中输入P(1000<P<3100000),计算2^P−1的位数和最后500位数字(用十进制高精度数表示) 思路: 一道高精度练习题 其中位数是一个结论 位数=[P*log ...

  9. AD10 库下载地址

    http://wiki.altium.com/display/ADOH/Download+Libraries 最新更新库地址: http://designcontent.live.altium.com ...

  10. jeesite ckeditor数据库 HTML 被编码 的问题解决

    public abstract class BaseController { /** * 初始化数据绑定 * 1. 将所有传递进来的String进行HTML编码,防止XSS攻击 * 2. 将字段中Da ...