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. [Vue @Component] Extend Vue Components in TypeScript

    This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. ...

  2. Unity3d PBR海水渲染

    三层水 博主近期渲染:近期用unity5弄的一些渲染 ---- by wolf96  http://blog.csdn.net/wolf96

  3. 加壳学习笔记(三)-简单的脱壳思路&amp;调试思路

    首先一些windows的经常使用API:   GetWindowTextA:以ASCII的形式的输入框   GetWindowTextW:以Unicaode宽字符的输入框   GetDlgItemTe ...

  4. Android studio 解决setText中文乱码问题

    我在用Android Studio编译器的时候,总会遇到非常多乱码的问题.第一个乱码问题是在Layout文件中面定义了EditText.在代码中须要将获取到的内容填充到EditText里面,这时候假设 ...

  5. Ubuntu13.10添加/删除PPA

    什么是ppa ppa即Personal Package Archive(个人安装包文档),简单来说就是一些个人或者团体通过独立的网站发布的第三方的软件源.将这些软件源添加到你的电脑上后,你就可以像使用 ...

  6. MapReduce01

    ================== Hadoop内核 | MapReduce(分布式计算框架) ================== 源于Google的MapReduce论文 ----------& ...

  7. git diff比较使用

    git diff 等同于 git diff HEAD jiqing@ubuntu:/home/wwwroot/default/siemens/new_hotel$ git diff HEAD diff ...

  8. POJ 2195 Going Home 最小费用流

    POJ2195 裸的最小费用流,当然也可以用KM算法解决,但是比较难写. 注意反向边的距离为正向边的相反数(因此要用SPFA) #include<iostream> #include< ...

  9. ubuntu 16.04 Hbase 安装

    1.解压安装包至路径 /usr/local 1.1.sudo tar -zxf ~/下载/hbase-1.1.2-bin.tar.gz -C /usr/local 2.将解压的文件名hbase-1.1 ...

  10. codevs1669 运输装备（背包dp）

    1669 运输装备  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond   题目描述 Description 德国放松对英国的进攻后,把矛头指向了东北——苏联 ...