H5 Image Mask-arms and h5 Image Mask
(-1) Preface
This idea is not mine. I would like to pay tribute to this predecessor. I use chrome49. The image resources used in my Baidu cloud disk http://yun.baidu.com/share/link? Consumer id = 1970396223 & uk = 1302053889
The Code cannot run. This indicates that your browser version is not high enough, and the corresponding browser prefix is not supported.
This case has inspired me a lot, from what attributes are used in the case analysis, to how to implement them, and finally to the source code.
(1) Knowledge Preparation a. transform-originTransform-origin: x-axis y-axis z-axis;
The value of x-axis is left, center, right, length, and %. The default value is center 50%, indicating the position of the x axis coordinate origin relative to the element width.
The value of y-axis is top, center, bottom, and length. % The default value is center 50%, indicating the position of the y axis coordinate origin relative to the element.
I personally think it would be better to change the values of x-axis and y-axis to understand that if the y axis is left and the x axis is center, the intersection of the two axes is the coordinate axis origin.
B. Combined use of transition and conversionTransition-duration: 500 ms;
Transform: rotate (0deg)
500 ms for element rotation to 0 degrees
C. # lol: hover p: nth-child (2)When you place the cursor over element A whose id is lol, if the second element is p in all sub-elements of Element A, the match is successful.
D. key code# Lol: hover p: nth-child (2)/* triggered when you place the cursor over the p element */
{
Transform: rotate (0deg)
/* Equivalent to transform: translate (0px, 0px) rotate (0deg) do not forget the default attribute */
/* Transition-duration: 500 ms; transform-origin: right bottom; the same is true if you do not write it, because # lol p: nth-child (2) is set */
}
# Lol p: nth-child (2)/* execute when the browser displays the p element */
{
Transition-duration: 500 ms;
Transform-origin: right bottom;
Transform: rotate (90deg );
...
}
(2) All code<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = UTF-8>
<Link rel = "shortcut icon" href = "favicon. ico" type = "image/x-icon">
<Title> for life </title>
<Style type = "text/css">
*
{
Margin: 0px;
Padding: 0;
}
# Lol
{
Width: 222px;
Height: 221px;
Position: relative;
Overflow: hidden;
Cursor: pointer;
Margin: 20px auto;
Border: 10px #333 solid;
}
# Lol: hover p: nth-child (2)
{
Transform: rotate (0deg)
}
# Lol p: nth-child (2)
{
Width: 222px;
Height: 221px;
Position: absolute;
Transition-duration: 500 ms;
Transform-origin: right bottom;
Transform: rotate (90deg );
Background: orange;
Top: 0px;
Left: 0px;
}
</Style>
</Head
<Body>
<Div id = "lol">
<P> Hello World </p>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
