Detailed description of new features in CSS3 (2)

The previous blog article mainly introduced static features in new features of CSS3, such as new selector, multi-background image, shadow, and gradient. This article mainly introduces the new dynamic features in CSS3, such as excessive, animation, and deformation. Transitian:-webkit-transition: all 0.5 s linear 0.3 s; excessive effect, also called gradient. However, this gradient refers to the process of adding a visible View to the dynamic effect, which must be separated from the gradient of the color in the previous article. Do not forget the prefix mentioned above. In this example, only the prefix of the browser for testing is added to save time. Transition: four parameters in total: 1. gradient attributes, including none: Stop gradient, all: default value. The gradient effect is executed when any attribute value changes. Generally, all and indent are used to specify a property value of an element. 2. duration of the gradient process. The default value is 0. 3. change Rate, slow: gradually slow down, linear: uniform speed, slow-in: acceleration, slow-out: Slow down, slow-in-out: acceleration first, slow down, cubic-bezr: custom; each attribute can be set with its specific bésel curve value. However, in general, it is enough to use linear at a constant speed, which is too non-mainstream. 4. The delay time of the change. In the previous article about CSS pseudo-classes, you have pasted the GIF with the gradient sample. Write the following code: copy the code div {width: 100px; height: 100px; background-color: red;} div: hover {background-color: blue;} to copy the Code: add gradient: copy the code div {width: 100px; height: 100px; background-color: red;-webkit-transition: all 0.5 s linear 0.3 s;} div: hover {background-color: blue;} copying Code results: note that transition can not only produce excessive effects on color changes, it can also lead to excessive effect on attributes such as size and position. This effect can be triggered by mouse clicking, getting focus, being clicked, or changing any element, and the CSS attribute values can be smoothly changed with the animation effect. Keyframes: the built-in animation feature of CSS3. You can complete some simple animation effects without using JS. But here I have to say that keyframes is not very useful. The excessive effects of JavaScript and CSS3 with slightly more complex animations are always the most ideal. Copy the code @-webkit-keyframes divMove {from {top: 0; left: 0 ;}to {top: 200px; left: 200px ;}}div {width: 100px; height: 100px;-webkit-border-radius: 50px; position: absolute; background-color: forestgreen;-webkit-animation: divMove 2 s infinite linear;} copy the code to create an animation rule first, start with @, followed by the browser prefix, followed by keyframes, followed by your own animation name. From indicates the starting state, to indicates the ending state, and CSS styles are written in braces. After defining the animation rule, add the animation to the element you want to add the animation. There are four parameters in total: 1. Custom Animation name 2. animation completion time 3. infinite indicates loop playback animation 4. change rate, the same as transition. Effect: when defining an animation rule, you can also write the following code: Copy code 0% {background-color: red;} 25% {background-color: blue;} 50% {background-color: green ;} 75% {background-color: yellow;} 100% {background-color: #8a2be2;} copy the code to subdivide the animation process by the expected percentage of time. In the preceding example, The from field corresponds to 0%, to corresponds to 100%. In short, due to its limited nature, the animation features in CSS3 are not widely used in practice. Transform: deformation, which includes five conversion methods:-rotating rotate-twisting skew-scaling scale-moving translate-matrix deformation matrix where there are many rotating and moving applications. Here we will mainly introduce it here. Distortion and scaling may cause distortion of graphics, images, and other elements, which is rarely used in practical scenarios. So here we will just explain the writing method without adding an example. If you are interested, try it yourself. Rotate rotation: a div is added with a Rotation Transformation: div {-webkit-transform: rotate (30deg);} enter the Rotation Degree in the brackets after rotate, unit: angle (deg ). If the value is regular clockwise rotation, if it is negative, it is clockwise rotation. Effect: transform-origin (X, Y) is also mentioned here. It is used to define the base point of an element, that is, the base point of an element transformation, in this rotation example, it is about which point to rotate. X and Y can be specific values, percentages, or top center bottom left right. If not set, it is the geometric center of the element by default. Translate move: The black box contains a green box move: # demo {width: 100px; height: 100px; background-color: seagreen;-webkit-transform: translate (150px, 0 )} effect: You can also write it as translateX (x) translateY (y), which means to move horizontally or vertically only. There is only one parameter in the brackets. Scale: scale (X, Y). X and Y indicate the horizontal and vertical scaling multiples. The base value is 1. If the value is greater than 1, the image is enlarged. If the value is smaller than 1, the image is scaled down. If the value is scale (0.8, 2.5), the image is scaled down to 0.8 times and the image is scaled down to 2.5 times. Similar to translate, zooming can also be in one direction: scaleX (x) & scaleY (y ). Skew distortion: Write method: skew (X, Y), X indicates horizontal distortion angle, and Y indicates vertical distortion angle. For example, skew (30deg, 10deg ). Same as above, single-direction distortion: skewX (x) & skewY (y ). # Demo {width: 100px; height: 100px; background-color: seagreen;-webkit-transform: skewX (30deg);} How can this kind of thing be used on a webpage? The psychology of the bloggers is distorted.