Use CSS3 linear gradient to achieve the flashing effect of pictures (code example)

The content of this article is about using CSS3 linear gradient to achieve the flashing effect of pictures. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I saw such a picture effect in Baidu Music http://music.baidu.com/. When the mouse is moved up, a flash of light will flash across the picture. The effect is quite cool. So let’s realize this effect again:

#How to achieve this CSS3 effect?

HTML is designed like this:

<p class="overimg">
    <a><img  src="/static/imghwm/default1.png"  data-src="http://www.php.cn/images/css3.jpg"  class="lazy"   alt="Use CSS3 linear gradient to achieve the flashing effect of pictures (code example)" ></a>
    <i class="light"></i>
</p>

CSS is:

.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;
}

The general idea is to design a transparent layer i, and skewx deforms by negative 25 degrees on the X-axis , the background color uses the linear-gradient of CSS3, and then when hovering the pseudo-class, set the animation time to 0.5s.

At the same time, use the CSS mouse style cursor:pointer on the i layer. If this is not set, you need to wait for the transparent layer animation to see the pointer.

The above is the complete introduction to using CSS3 linear gradient to achieve the flashing effect of pictures. If you want to know more about CSS3 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of Use CSS3 linear gradient to achieve the flashing effect of pictures (code example). For more information, please follow other related articles on the PHP Chinese website!