A simple summary and effect of the two-dimensional 3D and gradient process in CSS 3 (animation is not good), css gradient

A simple summary and effect of the two-dimensional 3D and gradient process in CSS 3 (animation is not good), css gradient
1. implicate, changes within the region (essentially producing an image)

/* Gradient

1 gradient of a rectangle first defines the width and height of the rectangle (it is best to add a border for good observation)/* direction color position */use background-image:-webkit-linear-gradient (right top, red 50%, blue 50%); 2 large and small circles color first make a large circle/* change the center from inside to outside fill color */background-image: -webkit-radial-gradient (50% 50%, yellow 20%, red 50%, pink 55%, blue 100%);/* You can also use a circular gradient in the rectangle */3 reflection

. Testb {

Background-image: url (img/5.jpg );

Height: 200px;

/* Gradient of the direction spacing */

/* Put the below under the upper-left directory */

/* 1 the reflection does not occupy the space level of the Document Stream. It is higher than the document stream.

2. Reflection is for labels (width and height */

-Webkit-box-reflect: abve 20px-webkit-linear-gradient (top, rgba (0%, 0.5) 100%, rgba (, 0 );

}

The four borders are relatively wide and the four borders have different colors. Different triangles are formed at the corner of the encounter. (After the content is 0, you can create beans ,)

 

5 border-radius: 50px 0 50px 50px; used to cut rounded corners

Creation of an ellipse

. TextG {

Width: 200px;

Height: 100px;

Border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;

 

 

}

2. Movement in a two-dimensional plane

. Test {transform: rotate (0deg) translate (0px, 0px) scale (1); (rotating Pan scaling)

Transition: all 3 s procedures. 5 s; (Change Process )}

. Test: hover {transform: rotate (720deg) translate (500px, 300px) scale (2 );}

 

Three effects can also be separately used for billing, and the effect varies in different order.

 

3. animation effect in 3D space

Body {perspective: 1000px;}/* Add a pivot point to the body */

. Parent tag {transform-style: preserve-3d;}/* 3D effect in parent tag */

. Test {transform: rotate (0deg) translate (0px, 0px) scale (1); (rotation and translation) (the initial value before the animation, can be left blank, with a default value)

Transition: all 3 s procedures. 5 s; (the change process must exist )}

. Test: hover {transform: rotate (720deg) translate (500px, 300px) scale (2) ;}( location after change)

/* Set the Z axis effect in 3D mode */

 

4. Frame Animation

@ Keyframes animation name (self-Fetch ){

0% (from) {transform :...}

? % {Transform :...}

? % {Transform :...}

100% (to) {transform :...}

 

 

}

. Test: hover {

 

/* The Assignment Method of the animation effect is the same as that of the transition */

Animation: movet 1 s seconds;

/* Infinite loop of the number of words executed by the animation */

Animation-iteration-count: infinite;

}