05 css3 gradient and 2d conversion

css3 gradient and 2d conversion
gradient
introduction
In css3, through the gradient attribute to achieve the gradient effect that can only be achieved through pictures, the
linear gradient mode is mainly the color transition from one direction to another direction, and the radial gradient is based on a point. The base point (center of the circle), with a point gradient to the surroundings. The shape of the gradient is a circle, and the repeating gradient is divided into repeating linear gradient and repeating radial gradient, which is a repeating mode for the previous two gradients.
Linear Gradient
Syntax
linear-gradient:point| angle color percentage
point means direction, angle means angle.
Direction keywords
to left from right to left
to right from left to right
to bottom from
top to bottom to top from bottom to top
to left top from bottom right to top left
to right top from bottom left to top right
to left bottom from top right to bottom left
to right bottom From top left to bottom right, the
angle
is positive, it changes clockwise. If it changes
negative, it changes counterclockwise.
Color represents the color, generally divided into start color, transition color, and end color.
Percentage represents the percentage, and generally represents the color gradation process. Percentage.
Tip
We set the gradient is actually equivalent to set the background-image, which is
the linear gradient of the background image ie
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
startColorstr indicates the start color
endColorstr indicates the end color
GradientType value 1 indicates the value from left to right 0 means from top to bottom
. The default direction is from top to bottom, including the start and end colors.
Radial gradient
Radial gradient is somewhat like radioactive, radiating from a point to the surrounding.
Syntax
background: radial-gradient(center, shape size, start-color, …, last-color);
shape,
circle, circle,
ellipse, ellipse
direction. It
should be noted that when setting the gradient direction, you cannot add to
but directly use the form of direction keywords
and add browser prefixes
such as
background: -webkit -radial-gradient(left,red,blue,pink);
starting position
Set length to indicate the starting position.
For example,
background: -webkit-radial-gradient(140px 300px,red,blue,pink);
gradient percentage
Set the gradient percentage
background by percentage : -webkit-radial-gradient(red 20%, blue 30%, lightblue 50%);
set the horizontal and vertical radius of the
radial gradient background: -webkit-radial-gradient(100px 100px,200px 300px,red,lightblue);
Set the size of the gradient circle by keywords.
closest-side: nearest side;
farthest-side: farthest side;
closest-corner: nearest corner;
farthest-corner: farthest corner.
Repeat the gradient
when we are at one When the gradient needs to be repeated in the element, you can use the repeated gradient. Repeating gradients are divided into repeating linear gradients and repeating radial gradients. The usage is very simple, just add repeating in front of the gradient attribute.
For example,
background: -webkit-repeating-radial-gradient(100px 100px ,closest-side,blue,lightblue);
transition
In css3, through transition, the animation changes of elements can be slowed down, which has a better look and feel.
Syntax
transition: property duration timing-function delay;
transition is a shorthand property
after splitting
transition-property predetermined excessive application css attribute name
attribute value
none not
all All
Property (css property name, separated by commas)
Transition-DURATION defined transition effect takes time
unit S | MS
Transition-Timing-function predetermined time transition effects curve , The default is "ease"
transition speed curve
cubic-bezier (n,n,n,n) Bezier curve
can be obtained online
https://cubic-bezier.com/
linear specifies the transition effect starting to the end at the same speed ( Equal to cubic-bezier(0,0,1,1))
ease specifies a transition effect that starts slowly, then becomes faster, and then ends slowly (cubic-bezier(0.25,0.1,0.25,1))
ease-in is specified as Slow start transition effect (equal to cubic-bezier(0.42,0,1,1))
ease-out Slow end transition effect equal to cubic-bezier(0,0,0.58,1)
ease-in-out stipulated to be slow Fast start and end transition effects (equal to cubic-bezier(0.42,0,0.58,1))
transition-delay delay
s|ms
to set transitions for different properties
Transition: width 2s 1s, height 2s 2s, background-color 3s 1s;
css3 2d
Introduction
Through 2d related properties, we can achieve effects such as displacement, rotation, scaling, and bevel.
Related attributes
transform 2D /3D conversion attributes
Attribute value
translate(x,y) Move the element along xy/ translateX(n) translateY(n) The first is the horizontal movement distance for displacement, similar to the relative positioning without departing from the standard document flow
scale (x,y) zoom to change the width and height of the element, change the width to the original x times, the height to the original y times/ scaleX(n) change the width scaleY(n) change the height
rotate(angle) rotate
skew(x -angle,y-angle) Define 2D tilt transformation along the x-axis and y-axis / skewX(angle) transform along the x-axis skewY(angle) along the y-axis
tip
2D effect is mainly aimed at the x-axis and y in the page A series of element changes made by the axis.
transform-origin changes the element rotation base point
x
left
right
center
length
%
y
top
bottom
center
length
%
The z
length
tip
element will affect the effect of the element change once the base point is changed