Learn about css3<border-radius> and <transfrom> styles and simply try to use them.

In recent days, I have studied the CSS3 selector style to achieve the HTML5 animation transition effect and the background style of the border to beautify the page effect and other knowledge.

After studying, I just learned that H5 's animation effect is achieved by transition (transition style) and Transfrom (transformation style) with hover effect. In a nutshell, add the transition style to the specified element to give it a transition property, then add the hover directive to the element, and then add the Tranfrom style to the hover element to get the desired transition effect.

Where the transition attribute transition need to remember the following 4 kinds of directives: Transition-property, Transition-duration, Transition-timing-function, Transition-delay 、

and transform need to remember these 4 kinds: transform-origin, Transform-style, Perspective, Perspective-origin.

Before I only know Border-radius can give the box of the border fillet, but the Tao Border-radius behind is should be filled four values, four values from the upper left corner of the box as the starting point for the box should be Four corners. When four different values are given, the four corners of the box are not the same, thus achieving the goal of making the box irregularly shaped.

When I got to the Border-radius to make the box irregular, I thought I could use this property to write some of the shapes I wanted. In other words, do not use the painting board, the HTML5 code to draw! With this idea, I went to look for the picture, followed by a picture of the wheel eye.

1.2.3.*.

Think for a moment, feel to use H5 code to achieve this eye is not difficult, which on the eyes of the three Magatama (comma) A little trouble, I found that the transition effect can be transition to let Magatama deformation, so the whole process is broadly divided into three steps.

The first step is relatively simple, wrote three boxes, the corners of the outer box to give a different value to the eye contour, and then the inner box directly to the 50% Border-radius and then adjust the size and fill background is complete.

The second step for me is slightly more difficult, because Magatama is a comma-shaped, pure use of Border-radius and can not make a box into a comma shape, so I wrote a solid circle, and then in this box to add a only two border empty box, Use the Border-radius to turn it into an arc, and then add the Rotate property with the Transfrom style to rotate its angle, with the solid circle and into a magatama. Make three Yu Yuding to the corresponding position after making three Magatama by position absolute positioning.

The third step is to animate the Magatama by adding the Transfrom and transition properties to the long corner.

Although the time to realize this effect is very simple, but the process of thinking and adjusting the value of rotate and position also took a lot of time, but after completion, still have a little sense of accomplishment!

Learn about css3<border-radius> and <transfrom> styles and simply try to use them.