CSS3 mouse move in the picture dynamic prompt effect

This article mainly introduces the CSS3 mouse moved into the picture dynamic prompt effect (transform), the content is very good, and now share to everyone, but also for everyone to do a reference.

The first attempt to write a blog, bad or wrong place to hope that you have a lot of corrections, today is mainly about the CSS3 of an important attribute of transform some usage, these examples are in MU class on the internet to learn a teacher after the course of their own knock.

First, preface

1. What is transform?

The meaning of transform is: change, make .... to transform;

2. What are the common attributes of transform?

The properties of the transform include: Translate ()/rotate ()/skew ()/scale ()/, and x, y respectively, for example: Rotatex () and Rotatey (), and so on.

Transform:translate ()

Meaning: change, displacement; for example, 20 pixels to the right and 50 pixels upward (negative to the left) as follows

. Test01{-webkit-transform:translate (20px,50px);-moz-transform:translate (20px,50px)}

Transform:rotate ()

Meaning: rotation; "deg" is a degree of rotation, such as "180deg" for rotation of the 180-degree instance as follows

. Test02{-webkit-transform:rotate (180deg);-moz-transform:rotate (180DEG)}

Transform:skew ()

Meaning: The tilt example is as follows

. Test03{-webkit-transform:skew (20deg);-moz-transform:skew (20DEG)}

Transform:scale ()

Meaning: The scale 1.8 represents a magnification of 1.8 if it is enlarged integer times as magnified as 3 times times must be written in 3.0 instances as follows

. Test03{-webkit-transform:scale (2.5);-moz-transform:scale (2.5)}

3. Examples of transform

DEMO01 Description: Move the picture left after the mouse moved into

Steps:

1. Write the HTML code and set the original style of the content and image through CSS (the text content is on the picture);

2. Shift the description through the transform attribute to the left (Transform:translate ( -600px,0););

3. The next step in setting the mouse-over (: hover) is to use transform to move the content to the left by 0 (Transform:translate (0,0) Here, the Transition-delay attribute is used primarily to allow three content to delay different times to form a sequential entry effect.

/* Picture left to move text into */.test1{background: #fff;}. Test1 figcaption p{background: #fff; color: #333; margin:5px 0;transform:translate ( -600px,0px);}. Test1 figcaption{padding:20px}.test1:hover figcaption p{transform:translate (0,0);}. Test1 figcaption P:nth-of-type (1) {transition-delay:0.2s;}. Test1 figcaption P:nth-of-type (2) {transition-delay:0.3s;}. Test1 figcaption P:nth-of-type (3) {transition-delay:0.4s;}. Test1:hover img{transform:translate ( -5px,0);}

        <!--Mobile--        <figure class= "test1" >                        <figcaption>                

Demo02 Description: After the mouse moves the picture blurs the rectangle from outside the picture rotates enters the picture the specified position text flies from the right and gradually displays

　　　　

Steps:

1. Write the HTML code and set the original style of the content and the picture through CSS (the rectangle text is on the picture);

2. Shift the rectangle through the Transform property to the above view and set the rotation angle to 0 transform:translate (0,-400px) rotate (0deg);

3. Next, set the shift of the mouse (: hover) style displacement to 0 and rotate 360 degrees transform:translate (0,0) rotate (360deg);


/* Rotate */.test2{background: #ccc;}. Test2 figcaption{width:100%;height:100%;}. Test2 figcaption h2{margin:15% 0 0 15%}.test2 figcaption p{margin-left:15%;transform:translate (50px,0); opacity:0;}. Test2 figcaption p{border:2px solid #ccc; width:80%;height:80%;p osition:absolute;top:10%;left:10%;transform: Translate (0,-400px) rotate (0deg);}. Test2:hover figcaption p{transform:translate (0,0) rotate (360deg);}. Test2:hover img{opacity:0.6;}. Test2:hover figcaption p{transform:translate (0,0); opacity:1;}


        <!--rotate--        <figure class= "test2" >                        <figcaption>                

DEMO03 Description: Distorted words are displayed when the mouse is moved in (because the example is distorted by 90 degrees so that the text is visually invisible)

　　　　　　

Steps:

1. Write the HTML code and set the original style of the content and image through CSS;

2. Distort the text content by 90 degrees Transform:skew (90DEG);

3. Next set the mouse rollover (: hover) style to distort the text content 0 degrees Transform:skew (0);


/* Twist */.test3{background: #CCCCCC;}. Test3 figcaption{position:absolute;left:15%;top:15%}.test3 figcaption H2{transform:skew (90deg);}. Test3 figcaption P{transform:skew (90deg);}. Test3:hover img{opacity:0.6;}. Test3:hover figcaption h2{transform:skew (0);}. Test3:hover figcaption p{transform:skew (0);}


        <!--twisted-        <figure class= "test3" >                        <figcaption>                

DEMO04 Description: Rectangle and text display and zoom out when mouse is moved in


Steps:

1. Write the HTML code and set the original style of the content and picture through CSS.

2. Enlarge the content 1.2 times times This is for the mouse to move in the magnification to 1 o'clock to form a smaller effect content transparency set to 0;

3. Next set the mouse rollover (: hover) of the style content magnification to 1 that is, the original size of the image to reduce the transparency becomes 1;


/* Zoom */.test4{background: #000;}. Test4 figcaption{width:100%;height:100%;}. Test4 figcaption h2{margin:15% 0 0 15%;opacity:0;transform:scale (1.2);}. Test4 figcaption P{margin-left:15%;opacity:0;transform:scale (1.2);}. Test4 figcaption p{border:2px solid #ccc; width:80%;height:80%;p Osition:absolute;top:10%;left:10%;transform:scale ( 1.2,1.2); opacity:0;}. Test4:hover figcaption P{transform:scale (a); opacity:1;}. Test4:hover Img{opacity:0.6;transform:scale (0.9,0.9);}. Test4:hover figcaption H2{opacity:1;transform:scale (1);}. Test4:hover figcaption P{opacity:1;transform:scale (1);}

        <!--Zoom--        <figure class= "test4" >                        <figcaption>                

DEMO05 Description: After the mouse is moved in the content appears and appears the well character lattice

　　

Steps:

1. Write the HTML code and set the original style of the content and picture through CSS (the tic is the overlap of two rectangles)

2. Reduce the two rectangles by 0.8 and set the transparency to 0 content also set the transparency to 0;

3. Next set the mouse-over (: hover) style content transparency set to 1 set the rectangle to zoom to 1 here the use of the transition property is mainly to reduce the amplification process gradually change;


/* Tic */.test5{background: #000;}. Test5 figcaption{width:100%;height:100%;}. Test5 figcaption h2{margin:15% 0 0 18%;opacity:0;}. Test5 figcaption p{margin-left:18%;opacity:0;}. Test5 figcaption P{position:absolute;}. TEST5 figcaption p.p01{width:80%;height:70%;border-top:2px solid #ccc; border-bottom:2px solid #ccc; left:10%;top:15% ; Opacity:0;transform:scale (0.8);}. TEST5 figcaption p.p02{width:70%;height:80%;border-left:2px solid #ccc; border-right:2px solid #ccc; left:15%;top:10% ; Opacity:0;transform:scale (0.8);}. Test5:hover P.p01{opacity:1;transform:scale (1); Transition:transform 0.3s ease-in}.test5:hover p.p02{opacity:1; Transform:scale (1); Transition:transform 0.3s ease-in}.test5:hover figcaption p{opacity:1;}. Test5:hover figcaption h2{opacity:1;}. Test5:hover img{opacity:0.6;}


        <!--well-        <figure class= "Test5" >                        <figcaption>                

The above is a few simple small examples, the reason for using figures and figcaption tags, mainly the semantics of the label, the interception of dynamic map is used to gifcam the first time with a very easy to use very cute haha.

Figure tags are primarily used to specify separate flow content (Pictures, charts, photos, code, etc.) and figcaption with the figures tag, used primarily to define the caption of the figures element

Oh, well, because these examples are written in an HTML, they extract some common styles.


Body,figure,figcaption,h2,p{margin:0;padding:0;font-family: "Microsoft Jas Black";} figure{position:relative;overflow:hidden;float:left;width:33.33%;height:350px;} Figcaption{position:absolute;top:0;left:0;color: #fff;} Figure Img{width:101%;height:360px;opacity:0.8;transition:all 0.35s}figure figcaption P,h2,span,p{transition:all 0.35s} @media screen and (max-width:600px) {    figure{width:100%;}} @media screen and (min-width:601px) and (max-width:1000px) {    figure{width:50%;}} @media screen and (min-width:1001px) {    figure{width:33.33%;}}

Summarize:

The reason to choose to write a blog is mainly to exercise their own ability to express, training a good habit of summing up knowledge points, before looking at others to write some good articles are very envious, but I always do not know where to start, until recently when the resume found many companies are asked to indicate their own blog address, So it's necessary to force yourself to write something!

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!