Range of new features

Article content: notes, feeling and experience in the process of learningCopy the code

CSS3 new selector

1. Child selector

Element writing syntax for selecting elements with a specific parent element: element1 > element2

.box > p {
            background-color: cyan;
        }
Copy the code

Note: Element2 elements are not selected if they are not direct children of the parent element element1.

2. Sibling selector

(1) Adjacent sibling selectors

Use to select a sibling element immediately after another element that has the same parent element writing syntax: element1+element2

h2 + p {
            background-color: royalblue;
        }
Copy the code

(a) select element element2 (b) select element element2 (C) select element element2 (D) select element element2 (D)

(2) Other sibling selectors

Matches all element2 elements after element1 in the same parent element writing syntax: element1~element2

h2 ~ p {
            background-color: yellow;
        }
Copy the code

Note: a) all element2 elements that appear after the selection of element1 elements b) both elements must have the same parent element, but element2 does not have to be immediately followed by element1 c) Spaces can be added after the ~ symbol

3. Structure pseudo-class selector

Child (n) (1) the NTH –

• N can be a number, keyword, or formula
• If it’s a number, it’s the NTH one
• The common keywords even, odd odd
• Common formulas are as follows (calculate from 0, 0, 1, 2, 3.. Increasing all the way)

Note: the 0th element or the number of excess elements is ignored

(2) Differences

E:nth-child(n) : matches if the NTH child of the parent element is E, and two conditions are met :nth-of-type(n) : matches the NTH sibling element E of the same type, and ignores other elements of the same type

4. Pseudo-element selector

Note:

• Pseudo-elements can only be added to double tags, not single tags
• Pseudo-element colons cannot be preceded by Spaces
• The pseudo-element must have the property content:” “;
• Before and after create an element that belongs to the inline element
• You can’t see the element you just created in the DOM, so it’s called a pseudo-element

5. Property selector

Selector weight

• Basic selectors: ID selector > Class selector > label selector > *
• Pseudo-class selectors and attribute selectors have weights equal to class selectors
• The weight of the pseudo-element selector is equal to the label selector

CSS3 box model

Box-sizing specifies the box model

CSS3 new attributes

1. Common attributes

(1) Border rounded -radius

Note: The property value is PX or percentage. Percentage refers to the percentage of the overall width and height of the box.

.box {
            width: 200px;
            height: 200px;
            padding: 30px;
            /* border-radius: 100px/50px; * /
            /* The width is half of the box */
            /* All four angles are the same */
            /* border-radius: 130px; * /
            /* border-bottom-right-radius: 130px; * /
            /* border-bottom-left-radius: 130px; * /
            /* border-top-right-radius: 130px; * /
            /* border-top-left-radius: 130px; * /
            /* Upper left upper right lower right lower left */
            /* border-radius: 10px 20px 30px 40px; * /
            /* Upper left upper right and lower left lower right/upper left and lower right upper right and lower left */
            /* border-radius: 50px 100px 20px / 40px 60px; * /
            border-radius: 50%;
            background-color: plum;
        }
Copy the code

Note: Internet Explorer 8 and below do not support this property

(2) Text-shadow

.word {
            margin: 50px;
            font: bold 30px/60px Microsoft Yahei;
            /* Text shadow: horizontal position positive right negative left vertical position positive bottom negative top blur color */
            /* text-shadow: 3px 3px 5px #f00; * /
            /* Multilayer shadows */
            text-shadow: 3px 3px #f00.6px 6px #0f0.9px 9px #00f;
        }
Copy the code

(3) Box-shadow

.box {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid #0ff;
            margin: 50px;
            background-color: plum;
            /* Border shadow: horizontal position vertical position blur extent expand size color whether inner border shadow */
            /* Note: External border shadows do not need to be set to the default */
            /* box-shadow: 20px 20px 5px 20px #f00 inset; * /
            box-shadow: 20px 20px 5px #f00.40px 40px 5px #0f0.60px 60px 5px #00f;
        }
Copy the code

2. Transition properties

You can animate A tween using Transition without using Flash or JavaScript, and you can animate A smooth transition between A and B as long as the current element has two states when its “properties” change. To see the effect easily, we use :hover toggle state.

Transition-timing-function Time curve

Transition is supported by IE10, Firefox, Chrome, and Opera. Safari requires the prefix webkit. Note: IE9 and earlier versions do not support transition

3. 2D transform transform

Move, scale, rotate, stretch, or stretch elements. With the transition and upcoming animation knowledge, you can replace a lot of effects that were previously only possible with Flash

(1) Translate ()

.box img {
			/* Horizontal and vertical displacement */
            /* transform: translate(100px,50px); * /
            /* There is only one value representing the horizontal displacement */
            transform: translate(-100px);
        }
Copy the code

(2) Scale ()

.box img {
            /* Scaling changes multiples of the width and height of the element, respectively */
            / * the transform: scale (1.5, 2); * /
            /* Width and height are also scaled */
            / * the transform: scale (0.5); * /
            /* Change the element width */
            transform: scaleX(0.5);
            /* Change the element height */
            transform: scaleY(0.5);
        }
Copy the code

Rotate (3) rotate()

.box img {
            /* Rotate positive number clockwise negative number counterclockwise */
            /* transform: rotate(30deg); * /
            /* 先旋转后位移 */
            transform: rotate(30deg) translate(150px);
            /* 先位移后旋转 */
            transform: translate(150px) rotate(30deg);
        }
Copy the code

Note: After the rotation of the element, the coordinate axis will also change, and the transformation effect will be different due to the different writing order of the transform.

(4) Skew ()

.box img {
            width: 316px;
            height: 170px;
            /* Tilt horizontal and vertical tilt Angle the second value is not written. Default is 0 */
            / * the transform: skew (0, 30 deg); * /
            transform: skew(30deg);
        }
Copy the code

(5) Datum transform-origin

.box img {
            width: 316px;
            height: 170px;
            /* Set the base point horizontal and vertical */
            /* Level: left, center, right, px, percentage */
            /* Vertical: top, center, bottom, px, % */
            transform-origin: left top;
            Rotate the * / / *
            transform: rotate(30deg);
        }
Copy the code

4. 3D conversion

(1) Perspective

Set it to the observation position of the z-axis focus of view to render a 2D plane 3D effect during the conversion process. Property Value The further the observation point is from the z-axis origin feature: Near, large, far and small Note: The perspective property needs to be set to the parent of the 3D changing element

.box {
            width: 450px;
            height: 300px;
            border: 1px solid # 000;
            margin: 150px auto;
            / * * / in perspective
            perspective: 500px;
        }
        .box img {
            transition: all 1s ease;
        }
        .box img:hover {
            /* Rotate along the x axis */
            /* transform: rotateX(60deg); * /
            /* Rotate along the y axis */
            /* transform: rotateY(-60deg); * /
            /* Rotate along the z axis */
            /* transform: rotateZ(-60deg); * /
            /* Move along the x axis */
            /* transform: translateX(200px); * /
            /* Move along the Y-axis */
            /* transform: translateY(-200px); * /
            /* Move along the z axis */
            /* transform: translateZ(200px); * /
            /* Rotation and displacement can be set at the same time. But the order is different, resulting in different effects */
            transform: translateX(200px) rotateY(60deg);
        }
Copy the code

(2) the transform – style

Use to set the nested child element to appear in the parent element’s 3D space. The child element retains its own 3D transformation axis. Note: Generally set to the parent element of 3D transform graphics. IE10, Firefox, and Opera support the transform attribute. Chrome and Safari require the -webkit- prefix, and IE9 requires the -ms- prefix.

.stage {
			position: relative;
			width: 200px;
			height: 200px;
			border: 1px solid # 000;
			/* Set the inner child elements to display flat in 3D space and all child elements to display flat in 2D */
			transform-style: preserve-3d;
			/* Perspective the z-axis to see the 3D effect */
			perspective: 5000px;
			/ * * /
			transition: all 4s ease;
		}
Copy the code

5, animation,

(1) @keyframes rule

Used to create animations to create effects that gradually change from one style to another, changing as many styles as you want as many times. Using percentages to specify when the change occurred, or using keywords from and to, is equivalent to 0% and 100%, where 0% is the start of the animation and 100% is the completion of the animation.

(2) the animation

Bind the animation created in @KeyFrames to a selector otherwise no animation will occur

.box {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 200px auto;
            background-color: skyblue;
            /* Add binding animation animation name transition time speed curve animation times delay time first two must be set */
            /* animation: move 1s linear 3 2s; * /
            animation: move2 3s linear infinite;
        }
        /* Customize the animation process */
        @keyframes move {
            /* Start from scratch, preferably with the same state as the default style */
            from {
                transform: translateY(0);
            }
            /* to end position */
            to {
                transform: translateY(150px); }}/* Percentage defines animation details */
        @keyframes move2 {
            0% {
                transform: translateY(0); 
            }
            25% {
                transform: translateY(150px);
            }
            50% {
                transform: translateY(0px);
            }
            75% {
                transform: translateY(-150px);
            }
            100% {
                transform: translateY(0px);
            }
Copy the code

A single attribute

IE10, Firefox, and Opera support the @Keyframes rule and animation property. Chrome and Safari require the -webkit- prefix. IE9 and earlier versions do not.