Practical development of CSS3: Hands-on teaching you how to develop animation effects with a mouse over an image.

Practical development of CSS3: Hands-on teaching you how to develop animation effects with a mouse over an image.

Hello everyone, I am a stranger, and you can also call me a stranger. In this article, I will show you how to develop animation effects when you move your mouse over an image. I will not provide you with source code downloads for the case here, but I can ensure that the same running effect will be achieved as long as you follow my ideas and copy the code to the local machine step by step. I hope you will understand my intentions. Now, let's go to today's topic.

In today's case, I have prepared three clips, one background image and two landscape images. You can download it online.

Before writing code, I will show you the animation effects first.

Before the mouse is spent:

When you move the mouse over the image, the image will gradually become brighter:

 

We can see from the above two comparison pictures that the special effect is: When you move the mouse over the image, the variable gradually changes from the inside out.

Now, let's start today's practical journey.

First, we need to write the html code. The highlighted style name below is what we have implemented today:

 

<! DOCTYPE html> 
 
Based on the above, we can probably know which div apply styles:
1. Press the background paper on the wall;
2. Apply a style to the photo to make up the padding;
3. Set a covering layer;
Now that you know what styles you need, go to the style encoding page!
First, we set a style for the container so that the container is displayed in the center. The Code is as follows:
 
* {/* Clear the internal and external margins of all elements */margin: 0; padding: 0;} html, body ,. container {/* Set container height browser self-adaptation */height: 100% ;}. container {/* set the container style */width: 80%; margin: auto; padding: 10px ;}
 
Next, apply the style to the photo wall, paste it with a wallpaper, and set its height to PX. The Code is as follows:
. Photowall {background: url(bg.png);/* set the photo wall background */background-size: cover;/* set the background to the minimum value */height: 500px; /* set the height of the photo wall */}
 
Let's take a look at the running effect of the page:

 
Now we apply the box model attribute of CSS3 to center the photo in both the vertical and horizontal directions. The Code is as follows:
. Photowall {background: url(bg.png);/* set the photo wall background */background-size: cover;/* set the background to the minimum value */height: 500px; /* set the height of the photo wall */display:-webkit-box;/* apply the box Model */display:-moz-box; display:-o-box; display: box; -webkit-box-pack: center;/* center the elements in the box horizontally */-moz-box-pack: center;-o-box-pack: center; box-pack: center;-webkit-box-align: center;/* set the vertical center of elements in the box to allocate space */-moz-box-align: center; -o-box-align: center ;}
 
Then, we add a shadow effect to the photo and set the inside border of the photo. The Code is as follows:
. Photowall. photoview {/* apply the style */padding: 6px; background: # FFFFFF; margin: 0 10px; position: relative; overflow: hidden; /* Hide the overflow content */box-shadow: 2px 2px 6px black;/* apply the shadow effect to the photo box */}
 
What is the running effect at this time?

 
Okay, the whole picture has come out. Now let's add effects to the photo!
As a result, we have set the position: relative; attribute for the photo class. Now we can easily change the style by absolute positioning. the position of the mask element. We should know that when the element is set to position, it means it has been suspended out of the standard Document Stream, so we can easily adjust it. the position of the mask element to achieve the effect of covering objects. Now let's apply the effects to the shadow. mask:
. Photoview. mask {position: absolute;/* because the parent container has set position: relative, the child element can be absolutely located relative to the parent container */top: 60px; left: 120px; height: 120px;/* set the width and height of the cover */width: 120px; cursor: pointer; border-radius: 60px;/* set the rounded corner effect for the cover object, if radius = the width of the element * 1/2, then the element becomes a circle */border-width: 60px; display: inline-block; border: 60px solid rgba (0, 0, 0, 0.7);-moz-box-sizing: border-box;/* calculate the container width and height in the border-box mode */-webkit-box-sizing: border-box; box-sizing: border-box; opacity: 1;/* Set opacity */visibility: visible; /* set the concealer to be visible */-moz-transform: scale (4);/* enlarge the concealer by 4 times */-webkit-transform: scale (4 ); -o-transform: scale (4);-ms-transform: scale (4); transform: scale (4);-moz-transition: all 0.4 s transition-in-out;/* excessive smooth animation */-webkit-transition: all 0.4 s transition-in-out; -o-transition: all 0.4 s records-in-out;-ms-transition: all 0.4 s records-in-out; transition: all 0.4 s records-in-out ;}
 
If you are not familiar with the above attributes, you can follow my other blog posts, which will be explained in detail. Now let's take a look at the running effect:

 
The shadow has been translucent and completely covered. in the above style, we defined transition: all 0.4 s bytes-in-out. What does this mean?
In fact, it means that when the style of the. mask element changes, the animation effect is first fast and then slow to realize the change of the. mask style attribute.
Now, when you move the mouse over the photo, we can re-adjust the. mask attribute style:
. Photoview: hover. mask {/* when you move the mouse over the photo, set the shadow to transparent and border to 0 to hide the shadow */opacity: 0; border: 0px solid rgba (0, 0, 0, 0.7); visibility: hidden ;}

Now the code has been compiled. Now let's take a look at the effects:

 
Welcome to the internet technology exchange group: 62329335
Personal statement: the shared blog is absolutely original, and strives to verify every knowledge point through practical demonstration.

Do you have friends who want to learn PS? I teach you how to learn
100? So cheap? Haha

Development under wsad provides a learning sequence. It is recommended that
1) The third edition of JAVA programming ideology is mainly to learn the basic knowledge of JAVA. Of course, this is how much it can learn. It will be learned sooner or later. If you don't have time, you just need to read the most basic chapter.
2) Servlet and JSP core technology: the most basic part of J2EE learning, that is, Servlet and JSP, is to master ideas.
3) For J2EE applications and ibm websphere, the server used by WSAD is WEBSPHERE, and the main role of WSAD is to develop J2EE applications.
4) WSAD does not have any books to buy. The fastest way to learn is to learn and use them.

All the recommended books are well-known and classic books, and the electronic version can also be used. However, it is recommended that you buy one. It will not cost much, and it will be inconvenient to study and operate while reading an e-book. What do you mean :)