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. ckeditor 设置含有html标签的值

    ckeditor 设置含有html标签的值 需要使用ajax请求拿到那个字符串,然后用editor.setData(text);

  2. 1.求整数最大的连续0的个数 BinaryGap Find longest sequence of zeros in binary representation of an integer.

    求整数最大的连续0的个数 A binary gap within a positive integer N is any maximal sequence of consecutive zeros t ...

  3. 第6章 TCP/IP路由协议故障处理

    第6章 TCP/IP路由协议故障处理 一.缺省网关 当包的目的地址不在路由器的路由表中,如路由器配置了缺省网关,则转发到缺省网关,否则就丢弃. Show ip route :查看Cisco路由器的缺省 ...

  4. Hdu5303 Delicious Apples 贪心

    题目链接: HDU5303 题意: 有一条环形的长为L的路,仓库在位置0处, 这条路上有n棵苹果树,给出每棵苹果树的位置和苹果数量, 问用 一次最多能装K个苹果的篮子   把这条路上全部苹果採回仓库最 ...

  5. 一看就懂系列之 由浅入深聊一聊php的垃圾回收机制

    前言 是的,平时经常听到大牛说到的gc,就是垃圾回收器,全称Garbage Collection. 早期版本,准确地说是5.3之前(不包括5.3)的垃圾回收机制,是没有专门的垃圾回收器的.只是简单的判 ...

  6. ubuntu安装vmware 64位

    1.从官网上获取http://www.vmware.com/products/workstation/workstation-evaluation.html 2.执行安装程序 chmod +x VMw ...

  7. string转date

    /*util-->sql*/ java.util.Date utdt; java.sql.Date sqldt =null; SimpleDateFormat simFormat = new S ...

  8. Python细节(一)深浅拷贝

    深浅拷贝 只要涉及拷贝,就会涉及创建新对象 浅拷贝,会创建一个新的容器,列表中的元素和原列表的元素用的是同一个内存空间 第一种方法:从头切到尾,完整的复制一份 lst = [1,2,3,4] lst1 ...

  9. NS2学习笔记（二）

    Tcl语言 变量和变量赋值 set a "Hello World!" #将字符串赋值给变量a puts "NS2 say $a" #输出字符串的内容,其中$a表 ...

  10. ashx 文件的使用

    它就类似.aspx文件,用于处理传入到服务器的HTTP请求,但它不会像.aspx文件那样要返回处理结果和大量HTML,它可以返回简单的字符串.图片等. 百度百科定义链接:http://baike.ba ...