How to create a flash CSS3 effect when the mouse slides over an image on the front end

Two or three years ago, Brother Ji made the front-end page of this site when he was still a student. In fact, this site now has many predecessors. I have the opportunity to post a post to show everyone how he used to be young and ignorant. Special work...
Okay, today let’s talk about how to create a reflective flashing effect when the mouse slides over the picture. This effect was discovered accidentally when I was shopping on JD.com. Let’s take a look at the finished product demonstration below: Otherwise It’s embarrassing to talk for a long time and still don’t know what effect to make. Oh, by the way, what is this situation called? "Awkward Chat"



As you can see, today's article is about how to achieve this effect
- Ps: People with a little html foundation will easily understand it , if you don’t have the foundation, it may seem difficult.
Let’s post the code first:

<div><a><img  src="/static/imghw/default1.png" data-src="aaa.jpg" class="lazy" alt="How to create a flash CSS3 effect when the mouse slides over an image on the front end" ></a></div>

The above is the code in the html, it’s not much, it’s relatively simple, the focus is on the css behind it The code needs to be carefully read and analyzed, and a lot of css3 knowledge points need to be involved.

div{width:800px;height:600px;overflow:hidden;}                  /div宽度和高度 超出隐藏
div a:hover::before{transition: all 0.5s;left:850px;}               /css3过度样式  before离左边850像素
div a:before{content: "";                  
    position: absolute;width: 50px;height: 600px;top: 0;left: -130px;background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);-webkit-transform: skewX(-25deg);-moz-transform: skewX(-25deg);}              /这里是给反光加样式的css3代码，就不一一解释了

The above is the css style code. Brother Ji simply wrote a demo to show everyone. In fact, the reflective style code behind was also copied by Brother Ji. I haven’t written it for a long time and forgot about it, so I can only copy it. If you don’t understand anything, you can use Baidu to copy the code you don’t understand. Baidu will help you figure it out.

The specific theory is to add a transparent layer above the a tag and press it on the a tag through positioning. This transparent layer is the before in the above code. Of course, it can also be any other tag. Everyone I have different habits, and then use the CSS3 mouse to slide the transparent layer to the right through excessive styling to achieve this reflective effect.

Okay, the specific method has been shared with you. If you want to use it in your own project, you need to have some basic knowledge of html+css, otherwise it will be difficult to do it.

Below I have packaged the demo I just wrote. If you don’t understand it well, you can download it and study it carefully.

Original link: How to create a CSS3 flash effect when the mouse slides over the image on the front end?

The above is the detailed content of How to create a flash CSS3 effect when the mouse slides over an image on the front end. For more information, please follow other related articles on the PHP Chinese website!