Home >Web Front-end >HTML Tutorial >hover_html/css_WEB-ITnose
hover_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:44:371148browse
Hover effect
I saw a website introducing many examples http://tympanus.net/Development/CreativeLinkEffects/
Then I learned to write down all the above examples
In fact, they are all relatively simple except for the two possible trouble spots of 3D rotation
Well, record these examples so that you can forget them later and come back. Let’s take a look
A collection of examples
Pseudo class, pseudo element
Understanding of some examples
Pseudo classes, pseudo elements
To do the above example, you must distinguish and learn pseudo classes, pseudo elements
Pseudo classes
Go to this link to have a look http:// wenku.baidu.com/link?url=cOVkL1-IutGmPcziO7OS2WLGOMwAW5erUFF1SHfOVSd1t6HC22YsuOVkhgX3uFh1IBCx42p17mXhGoDk_YAv0oSy-Sf_Ty4VWXXY3EzS0Ci
Pseudo classes are generally used like this d:h over
Pseudo-elements
Pseudo-elements are real Element, you can add styles to this element
In order to distinguish pseudo classes, pseudo elements are generally written like this a::before
Understanding of some examples
demo1
1. Add pseudo elements before and after before
2. Hide the pseudo elements and fill the content with "[","]"
3. Move before horizontally to the right by 10px, Move after horizontally 10px to the right
4. When the mouse moves up (a:hover), display the pseudo element, and move before and after to the appropriate position (a:hover::before)
demo2
1. First set the a element to over:hidden, because it is obvious in the effect that when scrolling upward, the surrounding elements cover the text
2. Because it is a top-down structure, after is below the text, so span is positioned relatively, afert determines the positioning, top: 100%, you can make the text of after below the text of span
3. How To fill in the text, take the data-hover attribute of the span to fill in, content:attr(data-hover)
4. When the mouse is placed on the span (span:hover), move the span up 100 % is enough
demo3
1. The two horizontal bars need to be on the upper and lower sides of the text, so the a element must be positioned relatively, and the pseudo-element determines the positioning
2. The pseudo-elements below are top: 100%, set below, and then scaled to become smaller transform: scale(0.90). The pseudo-elements above are also placed below, reduced, and then hidden
3. Place the mouse on it At this time, the lower pseudo-element is enlarged, the upper pseudo-element is moved to the top (top:0), and enlarged, and the transparency is set to 1
demo3
1. First put the a element Set to over:hidden, which acts as a container
2. span should be positioned relatively, because the pseudo-element is in front of the text, it is easier to use absolute positioning (left:-100%)
3. When the mouse is placed (span:hover), the span must move 100% to the right
1.a should be positioned relatively, and the pseudo-element should be positioned absolutely, so that the pseudo-element can cover it In terms of text, the size of the pseudo element is the same as the size of the a element
2. The text should be left, and then set the width of the pseudo element to 0
3. When the mouse is placed on a, Set the width of the pseudo-element to 100%
1.a should be positioned relatively, and the pseudo-element should be positioned absolutely, so that the pseudo-element covers the text, and the size of the pseudo-element is the same as the size of the a element
2. When the mouse is placed on it, make the pseudo-element smaller and set the transparency to 0
The above examples are relatively simple. Figure out the pseudo-class and pseudo-element. It is enough to have a certain basic knowledge of css. The following example is a bit more complicated
1. Use a element as a container, so a needs to set perspective (this css is very important, it will make the 3D effect much better), set the perspective
2. Set the span to a block shape
3. Set the pseudo element to a block shape, and then rotate it 90 degrees, just like a piece of paper with the square in front of you
4 .Because it is turned from bottom to top, the paper needs to be placed under the span, so top:100%
5. When the mouse is placed on it, rotate the entire span element 90 degrees along the x-axis. Just
To do this, I thought it was just to put the 2 sides in place, and then rotate the container.
Let’s try the rotation of the 4 sides. Place the 4 sides and rotate the container
1
2
3
4