CSS3 series notes of Web

Time:2021-6-11

CSS3 series notes of Web

CSS3 property selector

Property selector list

Selectors brief introduction
E[att] Select the E element with ATT attribute
E[att=”val”] Select the E element with ATT attribute and val attribute value
E[att^=”val”] Match the E element with ATT attribute and val as its value
E[att$=”val”] Match the E element with ATT attribute and val as its debit
E[att*=”val”] Match the E element with ATT attribute and val in the value
  • For example:

    button {
      cursor: pointer;
    }
    button[disabled] {
      cursor: default
    }
  • for example

    input[type=search] {
      color: skyblue;
    }
    
    span[class^=black] {
      color: lightgreen;
    }
    
    span[class$=black] {
      color: lightsalmon;
    }
    
    span[class*=black] {
      color: lightseagreen;
    }

Structure pseudo class selector

Property list

Selectors brief introduction
E:first-child Matches the first child element E in the parent element
E:last-child Matches the last e element in the parent element
E:nth-child(n) Match the nth child element E in the parent element
E:first-of-type Specifies the first of type E
E:last-of-type Specifies the last of type E
E:nth-of-type(n) Specifies the nth of type E
  • for example

    ul li:first-child {
      background-color: lightseagreen;
    }
    
    ul li:last-child {
      background-color: lightcoral;
    }
    
    ul li:nth-child(3) {
      background-color: aqua;
    }
    
    /************************************************/
    
      /*Even number*/
      ul li:nth-child(even) {
        background-color: aquamarine;
      }
    
      /*Odd number*/
      ul li:nth-child(odd) {
        background-color: blueviolet;
      }
    
      /*N is the formula, starting from 0*/
      ul li:nth-child(n) {
        background-color: lightcoral;
      }
    
      /*Even number*/
      ul li:nth-child(2n) {
        background-color: lightskyblue;
      }
    
      /*Odd number*/
      ul li:nth-child(2n + 1) {
        background-color: lightsalmon;
      }
    
      /*How to choose 0 5 10 15*/
      ul li:nth-child(5n) {
        background-color: orangered;
      }
    
      /*N + 5 is to choose from the fifth*/
      ul li:nth-child(n + 5) {
        background-color: peru;
      }
    
      /*- N + 5 top five*/
      ul li:nth-child(-n + 5) {
        background-color: tan;
      }

Pseudo element selector

Selectors brief introduction
::before Insert content before the inside of an element
::after Insert content after the inside of an element
  • Notes on pseudo class selector
    • beforeandafterThere must becontentattribute
    • beforeBefore the content, after is after the content
    • beforeandafterAn element is created, but it belongs to an in-line element
    • The created elements are in theDomIt is called pseudo element because it cannot be found in
    • Pseudo elements, like tag selectors, have a weight of 1

Translate of 2D conversion

2Dtransformation

  • 2DConversion is to change the position and shape of the label on the two-dimensional plane
  • Mobile:translate
  • Rotation:rotate
  • Zoom:scale

translategrammar

  • X is the horizontal movement on the X axis
  • Y is the horizontal movement on the Y axis
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
  • Key knowledge points

    • 2DThe movement of the main refers to the horizontal and vertical direction of the movement
    • translateThe biggest advantage is that it doesn’t affect the position of other elements
    • translate100% of the units in are calculated relative to their width and height
    • In line labels have no effect
  • For example:

    div {
      background-color: lightseagreen;
      width: 200px;
      height: 100px;
      /*Translation*/
      /*Horizontal and vertical movement 100px*/
      /* transform: translate(100px, 100px); */
    
      /*Horizontal movement 100px*/
      /* transform: translate(100px, 0) */
    
      /*Vertical movement 100px*/
      /* transform: translate(0, 100px) */
    
      /*Horizontal movement 100px*/
      /* transform: translateX(100px); */
    
      /*Vertical movement 100px*/
      transform: translateY(100px)
    }

2D conversion rotate

  1. Rotate

    • 2DRotation refers to the rotation of an element clockwise or counterclockwise in a two-dimensional plane
  2. rotategrammar

    /*Unit: DEG*/
    Transform: rotate (degree) 
    
    /**/
    div{
          transform: rotate(0deg);
    }
  3. Key knowledge points

    • rotateIt’s in degrees. It’s in degreesdeg
    • When the angle is positive, clockwise, when the angle is negative, counterclockwise
    • The default center point of rotation is the center point of the element
  4. Code demonstration

    img:hover {
      transform: rotate(360deg)
    }

Set the element rotation center (transform origin)

  1. transform-originBasic grammar

    transform-origin: x y;
  2. Important knowledge points

    • Note that the following parameters X and y are separated by spaces
    • By default, the center point of X Y rotation is the center of the element (50% 50%), equivalent tocenter center
    • You can also set pixels or orientation nouns for X and y(topbottomleftrightcenter)

2DTransformationscale

  1. scaleThe role of

    • Used to control the enlargement and reduction of elements
  2. grammar

    transform: scale(x, y)
  3. Knowledge points

    • Note that X and y are separated by commas
    • transform: scale(1, 1): double the width and height, equivalent to no magnification
    • transform: scale(2, 2)The width and height are doubled
    • transform: scale(2): if only one parameter is written, the second parameter is consistent with the first parameter
    • transform:scale(0.5, 0.5): shrink
    • scaleThe biggest advantage: you can set the conversion center point scaling, the default center point scaling, and does not affect other boxes
  4. Code demonstration

div:hover {
    /*Note that numbers are multiples, so there is no need to add units*/
    /* transform: scale(2, 2) */

    /*Achieve proportional scaling, while modifying the width and height*/
    /* transform: scale(2) */

    /*Less than 1 equals scaling*/
    transform: scale(0.5, 0.5)
}

Animation

  1. What is animation

    • Animation isCSS3One of the most subversive features in animation is to set multiple nodes to accurately control one or a group of animations, so as to achieve complex animation effects
  2. Basic use of animation

    • Define animation first
    • After calling the defined animation
  3. Syntax format (define animation)

    @Keyframes animation name{
        0% {
            width: 100px;
        }
        100% {
            width: 200px
        }
    }
  4. Syntax format (using animation)

    div {
    	/*Call animation*/
        Animation name: animation name;
     	/*Duration*/
     	Animation duration: duration;
    }
  5. Animation sequence

    • 0% is the beginning of animation, 100% is the completion of animation, such a rule is animation sequence
    • If you specify a CSS style in @ keyframes, you will gradually change the current style to a new style animation effect
    • Animation is the effect of changing elements from one style to another. It can change any number of styles and times
    • Use percentages to specify when changes occur, or use percentagesfromandto, equivalent to 0% and 100%
  6. Code demonstration

    div {
          width: 100px;
          height: 100px;
          background-color: aquamarine;
          animation-name: move;
          animation-duration: 0.5s;
        }
    
        @keyframes move{
          0% {
            transform: translate(0px)
          }
          100% {
            transform: translate(500px, 0)
          }
        }

Common attributes of animation

attribute describe
@keyframes Prescribed animation
animation Short for all animation attributes, except the animation play state attribute.
animation-name Specifies the name of the @ keyframes animation
animation-duration Specifies the number of seconds or milliseconds an animation takes to complete a cycle. The default value is 0
animation-timing-function Specifies the speed curve of the animation
animation-delay Specifies when the animation starts. The default is 0
animation-iteration-count Specifies the number of times the animation is played. The default is 1. There is also infinite
animation-direction Specifies whether the animation will play backward in the next cycle. The default is “normal” and alternate will play backward
animation-play-state Specifies whether the animation is running or suspended. Default “running” and “paused”
animation-fill-mode Specify the state after the end of the animation and keep the forwards back to the original backwards
  • For example:

    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      /*Animation name*/
      animation-name: move;
      /*Animation takes time*/
      animation-duration: 2s;
      /*Animation speed curve*/
      animation-timing-function: ease-in-out;
      /*How long does the animation wait to execute*/
      animation-delay: 2s;
      /*Specify the number of animation playback infinite: infinite loop*/
      animation-iteration-count: infinite;
      /*Do you want to play backward*/
      animation-direction: alternate;
      /*The state after the end of the animation*/
      animation-fill-mode: forwards;
    }
    
    div:hover {
      /*Specifies whether the animation is suspended or played*/
      animation-play-state: paused;
    }

    Introduction to animation

    /*Animation: animation name duration motion curve when to start playing times is opposite start and end state*/
    animation: name duration timing-function delay iteration-count direction fill-mode

    Knowledge points

    • Short attributes do not containanimation-paly-state
    • Pause animationanimation-paly-state: paused; It is often used with mouse and other tools
    • To get the animation back, rather than directly back:animation-direction: alternate
    • After the box animation, stop at the end position:animation-fill-mode: forwards

Speed curve details

animation-timing-function: Specifies the speed curve of the animation. The default isease

value describe
linear The speed of the animation is the same from beginning to end. Uniform speed
ease Default. The animation starts low, then speeds up, and slows down before it ends.
ease-in The animation starts at a low speed.
ease-out The animation ends at a low speed.
ease-in-out The animation starts and ends at a low speed.
strps() Specifies the number of intervals (steps) in the time function
  • for example

    div {
      width: 0px;
      height: 50px;
      line-height: 50px;
      white-space: nowrap;
      overflow: hidden;
      background-color: aquamarine;
      animation: move 4s steps(24) forwards;
    }
    
    @keyframes move {
      0% {
        width: 0px;
      }
    
      100% {
        width: 480px;
      }
    }

3D conversion

3DKey points of knowledge transformation

  • 3DDisplacement:translate3d(x, y, z)
  • 3DRotation:rotate3d(x, y, z)
  • Perspective:perspctive
  • 3DRendering ` transfrom style“

“3Dmovetranslate3d`

  • 3DMobile is in2DOn the basis of moving, we add another direction that we can move, which is the z-axis direction
  • transform: translateX(100px): just moving on the x-axis
  • transform: translateY(100px): just moving on the y-axis
  • transform: translateZ(100px): just moving on the z-axis
  • transform: translate3d(x, y, z)Where x, y and Z are the distances in the direction of the axis to be moved respectively
  • Note: the corresponding values of X, y and Z cannot be omitted, and it is unnecessary to fill in them with 0
transform: translate3d(x, y, z)
 
 /*******************************/
transform: translate3d(100px, 100px, 100px)
/*Note: the corresponding values of X, y and Z cannot be omitted, and it is unnecessary to fill in them with 0*/
transform: translate3d(100px, 100px, 0)

perspectiveperspective

Knowledge point explanation

  • If you want to create a web page3DThe effect needs perspective3DProjection of objects2D(on the plane)
  • In fact, imitating the human visual position can be regarded as arranging the eyes to see all the time
  • Perspective is also called sight distance. The so-called sight distance is the distance from the human eye to the screen
  • The closer to the visual point, the bigger the image is in the computer plane, and the farther the image is, the smaller the image is
  • The unit of perspective is pixels

Knowledge points

  • Perspective needs to be written on the parent box of the inspected element

    body {
      perspective: 1000px;
    }

translateZ

translateZAndperspecitveThe difference between

  • perspecitveSet the parent,translateZSet different sizes for child elements

3DrotaterotateX

3D rotation means that elements can be rotated along the X, y, Z or custom axes in the 3D plane

  • grammar

    • transform: rotateX(45deg)–Rotate 45 degrees in the positive direction of the x-axis
    • transform: rotateY(45deg)–Rotate 45 degrees in the positive direction of the y-axis
    • transform: rotateZ(45deg)–Rotate 45 degrees in the positive Z direction
    • transform: rotate3d(x, y, z, 45deg)–Rotate 45 DEG along the custom axis
  • for example

    div {
      perspective: 300px;
    }
    
    img {
      display: block;
      margin: 100px auto;
      transition: all 1s;
    }
    
    img:hover {
      transform: rotateX(-45deg)
    }
    
    /*
    -The thumb of the left hand points in the positive direction of the x-axis
    
    -The other fingers bend in the direction that the element rotates along the X axis
    */

3DrotaterotateY

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateY(180deg)
}
/*
-The thumb of the left hand points in the positive direction of the y-axis

-The rest of the fingers bend in the direction that the element rotates along the y-axis (positive value)
*/

3DrotaterotateZ

  1. Code demonstration

    div {
      perspective: 500px;
    }
    
    img {
      display: block;
      margin: 100px auto;
      transition: all 1s;
    }
    
    img:hover {
      transform: rotateZ(180deg)
    }
  2. rotate3d

    • transform: rotate3d(x, y, z, deg)–Rotate DEG to angle along the custom axis
    • x. Y, Z is the vector of the rotation axis, which indicates whether you want to rotate along the axis, and the last one indicates the angle of rotation
      • transform: rotate3d(1, 1, 0, 180deg)–Rotate 45DEG diagonally
      • transform: rotate3d(1, 0, 0, 180deg)–Rotate 45DEG along the x-axis

3Dpresenttransform-style

  1. transform-style
    • ☆☆☆☆☆

    • Controls whether the child elements turn on the 3D environment

    • transform-style: flatRepresents that the child element is not turned on3DThree dimensional space, default

    • transform-style: preserve-3dSub elements open three dimensional space

    • The code is written to the parent, but it affects the child box

Recommended Today

The road of high salary, a more complete summary of MySQL high performance optimization in history

preface MySQL for many linux practitioners, is a very difficult problem, most of the cases are because of the database problems and processing ideas are not clear. Before the optimization of MySQL, we must understand the query process of MySQL. In fact, a lot of query optimization work is to follow some principles so that […]