How browsers render

  • The browser requests the HTML document to the server and then begins to parse it. The product is DOM. If there is CSS, the CSS object model will be generated according to CSS, and then the rendering tree will be generated by combining DOM and CSSDOM. This is the layout, and finally the nodes are drawn to the browser.
  • Parse HTML build A DOM tree, parse CSS build a CSS tree —- build a render tree —- layout render tree —- Draw a render tree

Summary of CSS3 knowledge

CSS 3 border

Border attribute

  1. border-radius

  2. box-shadow

  3. border-image

    .div1{ border: 2px solid red; height: 60px; width: 60px; border-radius: 25px; box-shadow:10px 10px gray; }

The range of 2 d transformation

With cSS3 transformations, we can move, scale, and rotate elements

  • The transform:rotate () method rotates an element at an Angle, allowing negative values

    .div1{ border: 2px solid gold; width: 60px; height: 60px; transform: rotate(30deg); }

    Colorful rural

Rotate (30deg) rotates elements 30° clockwise

  • Translate () method: The element moves from its current position, based on the given X and y coordinates

    .div1{ border: 2px solid gold; width: 60px; height: 60px; transform: translate(50px,100px); }

    Colorful rural

  • The transform:scale() method increases or decreases the size of an element

Div {transform: scale (2, 4)}

Scale (2,4) stretches the element twice its width and four times its height

  • Skew () method: Elements are flipped at a given Angle

div{ transform:skew(30deg,20deg); }

The value skew(30deg,20deg) flips elements 30 degrees around the X-axis and 20 degrees around the Y-axis

CSS 3 3 d conversion

  • With the rotateX() and rotateY() methods, an element is transformed around its X/Y axis at a given degree

div{transform:rotateX(120deg); }

Div is rotated 120° about its X-axis

CSS 3 transition

To change an element from one style to another, two things must be specified: 1. To which CSS attribute the effect is to be added 2. Specify the duration of the effect

<style>    .div1{        width: 60px;        height: 60px;        border: 2px tomato dotted;        transition: all 3s;    }    .div1:hover{        transform: translate(100px,80px);    }</style><body>    <div class="div1"></div></body>
Copy the code

When you hover over a div, it will move 100px to the right and 80px down in 3 seconds

  • Trasition: Short for four properties
  • Transition-propertity: name of the CSS property that defines the application transition
  • Transition-duration: the duration of transition
  • Transition-timing-function: time curve for transition effects, default ease
  • Transition-delay: When does the transition start

CSS animations

@keyFrames is used to create animations. By specifying a CSS style in @KeyFrames, you can create animations that gradually change from the current style to the new style.

<style> #div1{ border: 1px solid green; width: 40px; height: 40px; animation:div1 2s infinite alternate; } @keyframes div1{ from{background: green; } to{background: red; } }</style><body> <div id="div1"></div></body>Copy the code

CSS animation properties:

  • @keyframes: Required animation
  • Animation: Short for the owning animation property
  • Animation-name :@keyframes Specifies the animation name
  • Animation-duration: the time it takes for an animation to complete a cycle
  • Animation-timing-function: animation speed curve
  • Animation-delay: indicates how long the animation is delayed to start
  • Animation-rotund-count: the number of times an animation is played. The default is 1

The value can be n: n times

Infinite: indicates an infinite number of plays

  • Animation-direction: indicates whether the animation is played backward in the next cycle. The default value is normal

Values: alternate/alternate – reverse/normal/reverse/inherit

Animation: myFirst 5s Linear 2s infinite alternate;

CSS is added