(1) Style implementation

1. Draw a dotted line and set the interval between the midpoints of the dotted line

// Use gradient width: 100%; height: 1px; background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%); background-size: 8px 1px; background-repeat: repeat-x;Copy the code

2. Vedio default style change

video::-webkit-media-controls-fullscreen-button {
display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}
Copy the code

3. Draw a cloud and animate it

A cloud is made up of five circles, set at different positions to form the shape of the cloud

.cloudy { background: #60768D; border-radius: 50%; box-shadow: #60768D 1.5rem 0.2rem 0-0.1rem,#60768D 1.5rem 0.2rem,#60768D 1.5rem 0.2rem 0-0.2rem,#60768D 1.5rem 0.2rem,#60768D 1.5rem 0.2rem 0-0.2rem; // Use a shadow to draw the remaining four circles, height: 1rem; // Draw a circle; width: 1rem; position: absolute; left: .5rem; Top: 1.8 rem; z-index: 5; -webkit-animation: cloudy 5s ease-in-out infinite; -moz-animation: cloudy 5s ease-in-out infinite; } @-webkit-keyframes cloudy {50%; -webkit-transform: translateY(-0.1rem); }} @-moz-keyframes cloudy {50% {-moz-transform: translateY(-0.1rem); }}Copy the code

The halo effect of the moon

@keyframes nucleus { 0% { box-shadow: 0 0 0 transparent; } 50% { box-shadow: 0 0 1rem #FCF0BC; } 100% { box-shadow: 0 0 0 transparent; }}Copy the code

4. Always have seven elements in a row (Grid layout)

(1) Fixed spacing, but not fixed child element size

   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   display: grid;
   column-gap: 60px;
   row-gap: 10px;
Copy the code

(2) The size of the child element is fixed, but the spacing is not fixed

    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px;
    display: grid;
    justify-content: space-between;
Copy the code

(2) Basic knowledge

1.3 d elements

  1. 3dView:

Setting the transform-style of an element to: preserve-3D affects only the child elements of the element (if the grandchild has 3d effects, you must also set preserve-3D for the child elements). In this way, all child elements can be 3D deformed relative to the plane of the parent element. As with 2d deformations, 3D deformations can be set using the Transform property. The elements can be morphed by a formulated function or by a three-dimensional matrix. Properties that render 3d are: Translate3D, Scale3D, rotateX, rotateY, rotateZ, etc. 2. Perspective/Depth of field effect: Perspective (Length) sets the three-dimensional perspective distance of an element. Only the descendants of the element, not the element itself. To put it simply, imagine that when looking at a house, for example, if the house is 200 meters long, the Angle of view is different from that of the house. When perspective<200, we are looking inside the house, and if Perspective >200 or more. It’s like looking from the outside, and the farther you look at the house, the Angle is different

  • When the element is not setperspective(length), all descendant elements are compressed in the same two-dimensional plane, and there is no effect of depth of field. If setperspective(length)After that, you will see the 3d effect. The default perspective is centered on the container
 <section class="container">
        <div id="card">
        </div>
    </section>
Copy the code
.container { width: 200px; height: 260px; position: relative; -webkit-perspective: 700px; -webkit-transform-style: preserve-3d; -moz-perspective: 700px; -moz-transform-style: preserve-3d; } #card { width: 100%; height: 100%; position: absolute; transform: rotateY(70deg); -ms-transform: rotateY(70deg); /* IE 9 */ -moz-transform: rotateY(70deg); /* Firefox */ -webkit-transform: rotateY(70deg); /* Safari and Chrome */ -o-transform: rotateY(70deg); /* Opera */ background-color: red; }Copy the code

2.HSL

Css3 also supports the definition of HSL (hue, saturation, brightness). To use HSL, there should be three parameter values:

  • hue(Tone) : 0(or 360) represents red, 120 represents green, 240 represents blue, of course, other values can be used to determine other colors.
  • Saturation(Saturation) : The value ranges from 0% to 100%.
  • Lightness(Brightness) : The value ranges from 0% to 100%.
Background - color: an HSL (0100%, 50%);Copy the code

HSLA is to add a parameter to control alpha transparency on the basis of HSL. The value is between 0 and 1. The format is as follows:

Background - color: an HSL (0100%, 50%, 0.2);Copy the code

3. Filter

www.runoob.com/cssref/css3…

Use a drop-shadow(such as highlighting the currently clicked icon)

img:focus-within {
      width: 24px;
      height: 26px;
      border-right: 20px solid transparent;
      -webkit-filter: drop-shadow(23px 0 #ccc);
      filter: drop-shadow(23px 0 #ccc);
    }
Copy the code
    .is-active .footerIcon img {
        -webkit-filter: drop-shadow(23px 0 #26528f);
        filter: drop-shadow(23px 0 #26528f);
    }
Copy the code

4.clip-path

The clip-path CSS property creates a clipping area where only part of the element’s area can be displayed. The parts within the area are shown, and the parts outside the area are hidden. The clipping region is either the path defined by the reference embedded URL or the external SVG path, or as a shape such as circle(). The clip-path property replaces the now deprecated clip property.

5. The characteristics of sass

  • Declare a variable
  • Calling variables
  • Nesting of selectors
  • Attributes are nested
  • Pseudo classes nested
  • Mixed macros (with parameters, without parameters, complex macros)
@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
Copy the code