Front knowledge

aThe pseudo-class selector for the tag

The a label has multiple states. The default state is blue, the long press state is red, and the access state is purple

The pseudo-class selector for the A tag is used to modify the styles of the different states of the A tag

Best practices:

  1. After setting upaThe style of the label’s pseudo-class selector is then set
  2. aAre row elements whose width and height are set in label selectors rather than pseudo-class selectors when converted to block elements
  3. Both text and background are used in pseudo-class selectors
a:link{ /* Change the default style, the rest can be seen by name */
    background-color:;color:;text-decoration:; }a:visited{
    color:; }a:hover{
    color:;background-color:; }a:active{
    color:; }/* As shown above, there are four state styles, all of which can be customized and omitted, but they must be set strictly in order, otherwise they may not work */
/* Love, hate: link, visited, hover, active must appear */
Copy the code
/* If the default color is the same as the accessed color, it can be abbreviated as */
a{
    color:; }a:hover{
    color:;background-color:; }a:active{
    color:; }/* However, if default and access have special Settings, the a format is not a substitute for hover and active */
Copy the code

supplement

Notice:

  1. In the same selector (surprise on the 99-reverse menu), properties with the same name will be overwritten by properties with the same name
  2. Use Spaces instead of commas to separate values of the same selector from the concatenation of family attributes
  3. Opacity is used for animations, while display: None is used in animations. And display: block; Don’t fit

The transition

Three elements of transition:

  1. Properties on which transition effects occur
  2. Transition before and after the state is different, generally combined with :hover pseudo-class selector after setting the state
  3. Duration of transition effect

Transiton attribute group

This family of hover selectors is set in the style before the animation: the hover selector can be used not only for the A tag, but also for all tags, but cannot set the width and height of a row element until it is converted to a block element or removed from the label. This is where the CSS3 transition module comes in

Property and duration are mandatory, speed changes and delayed startup are optional

/* Four attributes of the transition module */

selector{ /* Set the front state style */
    /* Tells the system which attribute to perform the transition effect, usually width and height */
	transition-property: property1(,property2)(,property3)(... There can be more than one);/* Tells the system how long the transition effect lasts */
    transition-duration: propertyDurationTime1(,propertyDurationTime2) (,propertyDurationTime3) (... There can be more than one, corresponding to the transition-property value);/* Tells the system how the speed of the transition animation's motion changes */
    /* Optional attributes, values can be linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) */
    transition-timing-function:;/* Optional property that tells the system how many seconds to delay before the transition animation begins */
    transition-delay: delayTime;
}
Copy the code
/* Transition module */
selector{
    transition: property1 duration1 (timing-function1) (delay1) (,property2 durationTime2 (timing-function2) (delay2)) (... There can be more than one); }/* Code short layout is difficult to fine */
selector{
    transition: all duration;
}
Copy the code

Write best practices for transitions

  1. Forget about transitions, write the basic interface first
  2. Modify properties that we think need to be modified
  3. Go back and add a transition to the element whose attribute is being modified

conversion

The 2 d transformation

  1. rotating
  2. translation
  3. The zoom

Note: the 2D transformation module modifies the coordinate system of elements

Values of the transform property

The thing about this property that makes people uncomfortable is that the property value has to be evaluated. This is not unique to the transform property, however, and the cubi-Bezier (n,n,n,n) value of the transition-duration property is also required

/* Write separately */

selector{
	transform: rotate( deg); /* deg = degree */
    transform: translate( px, px); /* Two values, in px, that specify the horizontal and vertical distances */
    /* Two values, with no units and a default value of 1, specifying both horizontal and vertical stretching times
    transform: scale(,); }Copy the code
/ * * / ligatures

selector{
	transform: rotate( deg) translate( px, px) scale( , )  
}

selector{
	transform: none; /* Clear transition */
}
Copy the code
/* transform-origin sets the deformation center */ 

/* By default, all elements are rotated by reference to their center point. You can use transform-origin to change the reference point of the corresponding element */

selector{
    transform-origin: px px; 
    /* Two values, 0 and 0 starting at the top left, have three forms: specific pixel, percentage, and special keyword (left center right) */
}
/* Changing the center of the deformation has an impact on rotation, translation, and scaling, but the most important thing to consider in actual development is the impact on rotation
Copy the code
/* Rotation axis */

selector{
	transform: rotateZ( deg); /* deg = degree */
}
selector{
	transform: rotateX( deg);
}
selector{
	transform: rotateX( deg);
}
Copy the code

Perspective properties

Transform: rotateX(DEG); Or transform: rotateX(deg); It’s going to be bigger and smaller

/* The perspective property is px, which means how far from the screen the rotated element is viewed. The closer the perspective is, the more obvious the effect will be. This property should be placed in the parent or ancestor element selector of the element that needs to be displayed

selector{
	transform: rotateZ( deg); /* deg = degree */
    perspective:; } selector{transform: rotateX( deg);
    perspective:; } selector{transform: rotateX( deg);
    perspective:; }Copy the code

3 d conversion

3D is thicker than 2D.

Transform-style: preserve-3d; preserve-3d; preserve-3d; preserve-3d; preserve-3d; preserve-3d

Transform-style: preserve-3d; Transform: rotate translate scale; One operation, you can make ugly very simple 3D blocks

animation

Three elements of animation:

  1. The property on which the animation effect occurs
  2. The state is different before and after the animation
  3. Duration of animation effect

Animation three states:

  1. Perform before
  2. Execution time
  3. After performing

Transitions are actually animations, but they are a little different: transitions need to be started manually, such as hover, whereas animations are executed when loaded

Animation attributes clan

The core attributes

/* This set of elements can be combined to create a set of animation effects, not one of the three elements is missing */

selector{
    animation-name: xxx; /* Define the name of this animation */
    animation-duration:;/* Specifies the animation completion time, in s */
}
@keyframes xxx{
    from{
        propertyName: propertyValue;
    }
    to{ propertyName: propertyValue; }}Copy the code

Optional attribute

/* Other optional attributes */

selector{
    animation-name: xxx;
    animation-duration:;/* Optional attribute */
    animation-delay:;/* Specifies the delay for starting, in s */
    animation-iteration-time:;/* Specifies the number of times the animation can be played. The default is 1, and there is no unit
    /* Tells the system how the speed of the transition animation's motion changes */
    /* The value can be linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) */
    animation-timing-function:;animation-direction:;/* the value of normal or alternate */
}
@keyframes xxx{ /* This is a minimalist version of only the start and end frames */
    from{
        propertyName: propertyValue;
    }
    to{ propertyName: propertyValue; }}/* the values of running and paused are normally placed in the hover pseudo-class selector
selector:hover{
    animation-state: ;
}
Copy the code

The advanced

Although it is very cool, but the enterprise development used less

selector{
    animation-name: xxx; /* Define the name of this animation */
    animation-duration:;/* Specifies the animation completion time, in s */
    
    /* Special optional property, this property should be used with multi-frame animation (not only from and to are called multi-frame) */
    animation-fill-mode:;None. Default value: None forward means fetching the last frame towards the end. Backwards means fetching the first frame towards the end
}
@keyframes xxx{ /* The percentage indicates the phase, and the value can be customized */
    0%{ /* is called the first frame */
        propertyName: propertyValue; /* We can use the transform property */
    }
    25%{
        propertyName: propertyValue;
    }
    50%{
        propertyName: propertyValue;
    }
    75%{
        propertyName: propertyValue;
    }
    100%{ /* called the last frame */propertyName: propertyValue; }}Copy the code

ligatures

selector{
    /* Animation name, animation duration, animation speed, delay time, number of times to execute animation round trip; Note: only the animation name, animation duration and animation content are required */
    animation: animation-name animation-duration (animation-timing-function) 
        (animation-delay) (animation-iteration-time) (animation-derection) (animation-fill-mode);
}
@keyframes xxx{
    from{
        propertyName: propertyValue;
    }
    to{
        propertyName: propertyValue;
    }
Copy the code

Animation properties note:

  1. If an animation has a property with the same name as the default style, the same property in the default style will be overridden
  2. When writing an animation, write the fixed values first and the values that need to be changed later (otherwise it would be magical).