CSS3 dynamic prompt effect when mouse moves into picture
不言Original
2018-06-25 16:35:482782browse
This article mainly introduces a brief discussion of the CSS3 dynamic prompt effect (transform) when the mouse moves into the image. The content is quite good. I will share it with you now and give it as a reference.
This is my first time trying to write a blog. I hope you can correct me if I have any mistakes or mistakes. Today I mainly write about some usage of transform, an important property of CSS3. These examples are from previous MOOCs. I typed it myself after taking a course from a certain teacher online.
1. Introduction
1. What is transform?
The meaning of transform is: change, deform...; transform
2. What are the common attributes of transform?
The properties of transform include: translate()/rotate() / skew() / scale() /, and they are divided into x and y respectively, such as: rotatex() and rotatey(), And so on.
transform:translate()
Meaning: change, displacement; for example, 20 pixels to the right and 50 pixels to the top (negative values to the left and down). Examples are as follows
Meaning: Ratio 1.8 means enlarging at a ratio of 1.8. If it is an integer multiple, such as enlarging 3 times, it must be written as 3.0. The example is as follows
demo01 Description: After the mouse is moved in, the image moves to the left and the content enters in sequence
Steps:
1. Write the html code and set the initial style of the content and pictures through css (the text content is all on the picture);
2. Displace the description content through the transform attribute Until the left side is no longer visible (transform:translate(-600px,0););
3. Next, set the style when the mouse moves in (:hover). Also use transform to move the content to the left. is 0 (transform:translate(0,0)) The transition-delay attribute is used here mainly to delay the three contents for different times to form the effect of entering in sequence.
demo02 Description: After the mouse is moved in, the picture becomes blurry and the rectangle is rotated from outside the picture into the specified picture. The position text flies over from the right and gradually displays
Steps:
1. Write the html code and set the initial style of the content and pictures through css (The rectangular text is all on the picture);
2. Use the transform attribute to move the rectangle to the top until it cannot be seen and set the rotation angle to 0 transform: translate(0,-400px) rotate(0deg);
3. Next set the style displacement when the mouse moves in (:hover) to 0 and rotate 360 degrees transform: translate(0,0) rotate(360deg);
demo03 Note: The distorted text is displayed normally after the mouse is moved in (because the text is distorted by 90 degrees in the example, so the text cannot be seen visually)
Steps:
1. Write the html code and set the initial style of the content and pictures through css;
2. The text content is distorted by 90 degrees transform: skew(90deg);
3. Next, set the style when the mouse moves in (:hover) to distort the text content by 0 degrees transform: skew(0);
demo04 Description: After the mouse is moved in, the rectangle and text are displayed and reduced, and the picture is also reduced
Steps:
1. Write the html code and set the initial style of the content and pictures through css
2. Enlarge the content 1.2 times for the mouse to move in When the magnification becomes 1, the transparency of the content will be reduced to 0;
3. Next, set the style of the content when the mouse moves in (:hover). The magnification of the content will become 1, which means the original size image will be reduced. The transparency becomes 1;
The above is the detailed content of CSS3 dynamic prompt effect when mouse moves into picture. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn