zoukankan      html  css  js  c++  java
  • 使用CSS3线性渐变实现图片闪光划过效果

    <p class="overimg">
        <a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a>
        <i class="light"></i>
    </p>
    .overimg{
        position: relative;
        display: block;
        /* overflow: hidden; */
        box-shadow: 0 0 10px #FFF;
    }
    .light{
        cursor:pointer;
        position: absolute;
        left: -180px;
        top: 0;
        width: 180px;
        height: 90px;
        background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
        background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
        transform: skewx(-25deg);
        -o-transform: skewx(-25deg);
        -moz-transform: skewx(-25deg);
        -webkit-transform: skewx(-25deg);
     
    }
    .overimg:hover .light{
        left:180px;
        -moz-transition:0.5s;
        -o-transition:0.5s;
        -webkit-transition:0.5s;
        transition:0.5s;
    }

    大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是CSS3线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。

    同时在 i 层使用 cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看得到 pointer 指针。

  • 相关阅读:
    leetcode-滑动窗口
    leetcode刷题-双指针
    nlp
    机器学习
    tf-idf算法
    RNN和LSTM的理解
    DDD落地实践-战术实现心得
    DDD落地实践-战略设计心得
    测试平台系列(66) 数据驱动之基础Model
    Python小知识之对象的比较
  • 原文地址:https://www.cnblogs.com/zhangrenjie/p/6112883.html
Copyright © 2011-2022 走看看