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. vsftpd conf 解釋

    Linux中vsFTP位置约定:/usr/sbin/vsftpd ---- VSFTPD的主程序/etc/rc.d/init.d/vsftpd ---- 启动脚本/etc/vsftpd/vsftpd. ...

  2. C# Json反序列化 C# 实现表单的自动化测试<通过程序控制一个网页> 验证码处理类：UnCodebase.cs + BauDuAi 读取验证码的值(并非好的解决方案) 大话设计模式：原型模式 C# 深浅复制 MemberwiseClone

    C# Json反序列化   Json反序列化有两种方式[本人],一种是生成实体的,方便处理大量数据,复杂度稍高,一种是用匿名类写,方便读取数据,较为简单. 使用了Newtonsoft.Json,可以自 ...

  3. oc 和swift混编的时候打包ipa安装不了

    做了一个oc项目.里面实用到swift第三方,真机执行的时候是正常的,用企业级证书打包成ipa之后安装完毕之后闪退.通过导出手机log日志发现错误提示: Dyld Error Message:   L ...

  4. how to use webpart container in kentico

    https://docs.kentico.com/k11/developing-websites/developing-websites-using-the-portal-engine/using-w ...

  5. 【线程安全】—— 单例类双重检查加锁（double-checked locking）

    1. 三个版本单例类的实现 版本1:经典版 public class Singleton { public static Singleton getInstance() { if (instance ...

  6. 【POJ 3263】 Tallest Cow

    [题目链接] http://poj.org/problem?id=3263 [算法] 若A和B两头牛可以互相看见,那么说明中间的牛的高度都至少比它们少1,因此,我们可以引入一个差分数组c 对于每组关系 ...

  7. bzoj2142 礼物——扩展卢卡斯定理

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2142 前几天学了扩展卢卡斯定理,今天来磕模板! 这道题式子挺好推的(连我都自己推出来了) , ...

  8. 54. Extjs组件render说明

    转自:http://blog.chinaunix.net/uid-450400-id-2119168.html 1. 1.调用组件的render方法 panel.render('div'); 2.在配 ...

  9. Linex系统 配置php服务器

    此文是可以参考 楼主也不是系统管理员只是迫不得已所以自己才找的  大家可以参考 .... ..... 安装apache 安装mysql 安装PHP 测试服务器 php -v 查询php的版本 就这些了 ...

  10. [Swift通天遁地]七、数据与安全-(19)使用Swift实现原生的SHA1加密

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...