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. jdk1.6下使用sardine和jackrabbit-webdav的问题

    同步一个遇到的问题,前几天,客户给了一个server地址和usernamepassword.让把上面的文件,download到还有一台server上.我查了下,发现该server使用文件协议是webd ...

  2. ES6 一些常用使用

    //1.解构数组 let arr1 = ['apple', 'coffee', 'cake']; let [fruit, drink, dessert] = arr1; console.log(fru ...

  3. 初探C++运算符重载学习笔记&lt;2&gt; 重载为友元函数

    初探C++运算符重载学习笔记 在上面那篇博客中,写了将运算符重载为普通函数或类的成员函数这两种情况. 以下的两种情况发生.则我们须要将运算符重载为类的友元函数 <1>成员函数不能满足要求 ...

  4. js将图片转为base64编码，以字符串传到后台存入数据库

    (前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...

  5. android 6.1解锁

    1.adb reboot bootloader 2.fastboot flashing unlock 3.power 键即可

  6. timeout in asp.net

    Forms authentication timeout vs sessionState timeout They are different things. The Forms Authentica ...

  7. AD10 库下载地址

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

  8. 71.Ext.form.ComboBox 完整属性

    转自:https://blog.csdn.net/taotaoqi/article/details/7409514 Ext.form.ComboBox 类全称: Ext.form.ComboBox 继 ...

  9. E20171005-ts

    collapse  n. 垮台; (身体的) 衰弱;              vt. 使倒塌; 使坍塌; 使瓦解;               vi. 崩溃; 倒塌; 折叠; (尤指工作劳累后) 坐 ...

  10. 【WIP】Ruby CSV文件操作

    创建: 2017/09/30                                                                                       ...