This article is for advanced knowledge point HTML5 learning, for my own notes while learning, but also for beginners. Your favorite friends can watch out and follow up with JavaScript, TypeScript, vue2.0, vue3.0 and a series of front-end learning articles such as the uni framework. (strong people don't like to detour, my heart is fragile, don't spray)
Now that we have learned HTML and CSS, it is no problem for us to make a static page, but with the advent of CSS3, we can now further beautify our static page. In this post, we'll look at what's new in CSS3 compared to CSS, and explain each of these points and learn how to use them.
1. New selectors for CSS3
1. Property selector
The new attribute selector makes it easier for us to select specific elements, and it's easy to use by listing a table for everyone 👇
| Selector | brief introduction |
| Element Name [Attribute Name] | Select an element with an attribute |
| Element Name [Attribute Name='val'] | Select an element with an attribute name and an attribute value equal to value |
| Element Name [Attribute Name ^='val'] | Match an element of an attribute name starting with value value |
| Element Name [Attribute Name $='val'] | Match an element of an attribute name ending with value value |
| Element Name [Attribute Name*="val"] | Matches an element of an attribute name with a value of value in the attribute name |
If you're not sure, let's run through this case to see the various attribute selectors for the tables above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Must be input but must also have the value attribute to select this element */
input[value]{
color: skyblue;
}
/* Element focus that selects an attribute whose value is equal to a value*/
input[type="text"]{
color: powderblue;
}
/* Select the section attribute, then some elements that have a class attribute and begin with a specific attribute value */
section[class^=icon]{
color: red;
}
/* Select the section attribute, then some elements that have a class attribute and end with a specific attribute value */
section[class$=data]{
color: rgb(114, 250, 250);
}
/* Select the section attribute, then some elements that have a class attribute and contain specific attribute values */
section[class*=na]{
color: seagreen;
}
</style>
</head>
<body>
<input type="text" value="enter one user name">
<input type="password">
<section class="icon1">Small Icon 1</section>
<section class="icon2">Small Icon 2</section>
<section class="icon3">Small Icon 3</section>
<section class="icon4">Small Icon 4</section>
<section class="icon5">Small Icon 5</section>
<section class="icon1-data">small icons</section>
<section class="icon2-data">small icons</section>
<section class="icon3-ico">small icons</section>
<section class="iconat1">small icons</section>
<section class="iconat2">small icons</section>
<section class="icon3-ico">small icons</section>
</body>
</html> 2. Structural Pseudo Class Selector
Say nothing and look directly at the table 👇
| Selector | brief introduction |
| Element name: first-child | Select the first child element in the parent element |
| Element name: last-child | Select the last child element in the parent element |
| Element name: nth-child(n) | Select the nth child element in the parent element |
| Element name: first-of-type | Specify the first of the type element names |
| Element name: last-of-type | Specifies the last of the type element names |
| Element name: nth-of-type(n) | Specify the nth of the type element name |
It is important to note that N in nth-child(n) can be either a number or a formula.
N keyword: even even, odd odd. The formula for n can be written in this way: 2n, 2n+1, 5n, n+5...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1. Select the first li in ul */
ul li:first-child {
background-color: skyblue;
}
/* 2. Select the last li in ul */
ul li:last-child {
background-color: skyblue;
}
/* 3. Select one of the li */
ul li:nth-child(4){
background: skyblue;
}
ul li:nth-child(even){
background-color: #ccc;
}
ul li:nth-child(n){
background-color: pink;
}
ul li:nth-child(2n+1){
background-color: #ccc;
}
/*All children will be sorted before matching a class name that does not match*/
section div:nth-child(2){
background-color: red;
}
/*Judgment of the preceding classes before sorting begins, and similar statements have last-of-type, first-of-type*/
section div:nth-of-type(1){
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>First Child</li>
<li>Second child</li>
<li>Third Child</li>
<li>Fourth child</li>
<li>5th Child</li>
<li>Sixth child</li>
<li>7th Child</li>
<li>Eighth child</li>
</ul>
<section>
<p>123456</p>
<div>qwert</div>
<div>!@#$%$#^%</div>
</section>
</body>
</html>3. Pseudo Element Selector (Focus)
What are pseudo elements? Refers to the newly created element that cannot be found in the document tree and is therefore called a pseudo element. The pseudo element selector simplifies the HTML structure by using CSS to create new tag elements without requiring HTML tags.
| Selector | brief introduction |
| ::before | Insert content before element |
| ::after | Insert content after an element |
Be careful:
before and after create an element, but are in-line elements
Both before and after must have content classes
Before creates the element before the parent element content, after creates the element after
Pseudo element selector and label selector have weights of 1
Syntax: element::before {}, as described earlier, clearing floating by after pseudo element, review again today
.clearfix:after{
content: "" ; #Pseudo Element Required
display:block ; #Convert to Block Level Elements
height:0 ; #Not shown, height 0
clear:both ; #Clear floating core code
visibility:hideen ; #Do not display
}2. Box model for CSS3
Previously, when you set the width and height of a box and continued using attributes such as margin, padding, etc., the box was opened, but now CSS3 can specify the box model through box-sizing, which has two values, content-box, border-box
- box-sizing:content-box When this is the value, the box size is width+padding+border (previously defaulted)
- box-sizing:border-box When this is the value, the box size is directly width
Know it, you can experience the difference between the two box models through actual combat.
3. CSS3 Transition (Key)
transition is one of the most disruptive features of CSS3 and can add effects to elements without using flash or js, often in conjunction with hover.
transition: the properties to be transitioned, the time spent, the curvilinear motion, and when to start;
- Attribute: The css attribute you want to change is either wide or high background color, or write all if all changes
- Time spent: Unit must be seconds
- Motion curve: Default ease, omitted (linear uniform, ease slower, ease-in faster, ease-out slower, ease-in-out faster, ease-out slower first, then slower)
- When to start: Unit must be seconds, delay trigger time can be set, default is 0 seconds, can be omitted
Remember the transition trick: who has made the transition to whom, and commas if there are multiple attribute changes.
(There are still good-looking cases in my computer, but I can't find orz, so don't give an example here.)
4. CSS3-2D Conversion
transform is one of the disruptive features of CSS3, which allows elements to shift, rotate, scale, and so on.
Deformation can be simply understood
1. Move translate: Change the position of elements on the page
Syntax: transform: translate(x,y);
transform: translateX(n) ;
transform: translateY(n) ;
Important: Defining the movement in a 2D transformation will not affect the location of other elements, similar to positioning
No effect on inline labels
Percentage units in translate are for the element itself
2. Rotate rotate:
Syntax: transform: rotate (degrees)
Important: rotate and degree, in deg
Angle is clockwise and counterclockwise
The default center of rotation is the center point of the element
2D conversion center point: transform-origin:x y;
3. 2D zoom scale:
Syntax: transform:scale (x, y);
transform:scale(1,1) equals no zoom in, (2,2) means twice the width and height, write only one parameter and default two parameters are the same
You can set the zoom-out center point without affecting the layout of other boxes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: bisque;
transform:translate(10px,10px);
}
img{
width: 150px;
}
img:hover{
transform:rotate(3600deg);
transition: all,1s;
}
.div1{
background-color: blue;
width: 200px;
height: 200px;
margin:100px auto;
transform-origin: left bottom;
transition: all,0.5s;
}
.div1:hover{
transform:translate(100px,100px)rotate(720deg)scale(2,2)
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>5. CSS3 Animation
Animation is one of the disruptive features of CSS3. It can precisely control one or a group of animations by setting up multiple nodes, often to achieve complex animation effects. Compared to transitions, animations can achieve more changes, more control, continuous autoplay and other effects.
Basic use of animation:
- Define Animation First
- 0% is the beginning of the animation and 100% is the end of the animation, so the rule is the animation sequence
- By specifying a CSS style in @keyframes, you can create an animation that changes from the primary key of the current style to the new style
- Animation is the effect of moving elements from one style to another, changing any number of styles and times
- Re-invoke Animation
Short for animation: animation: Name duration Curved motion when it starts playing Whether it starts or ends in the opposite direction
Common attributes include the following:
| attribute | describe |
| @keyframes | Specify animation |
| animation | Short Properties for All Animation Properties |
| animation-name | Specify the animation name for @keyframes |
| animation-duration | Set the time required to complete the animation |
| animation-timing-function | Specify the speed curve of the animation |
| animation-delay | Specify when the animation starts |
| animation-iteration-count | Set number of times to play |
| animation-direction | Specifies whether the animation is played backwards in the next cycle |
| animation-play-state | Specifies whether the animation should be paused or run |
| animation-fill-mode | Status after regulation ends |
Take a comprehensive chestnut:
(css section)
.wall{
background: url("../bg.jpg");
background-size: cover;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
body{
background-color: #000;
text-align: center;
}
body::before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.scene {
display: inline-block;
vertical-align: middle;
perspective: 5px;
perspective-origin: 50% 50%;
position: relative;
}
.wrap{
position: absolute;
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
transform-style: preserve-3d;
animation: move 15s infinite linear;
}
.wrap:nth-child(2){
animation: move 12s infinite linear;
}
.wall{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
animation: fade 3s infinite linear;
}
.wall-right{
transform: rotateY(90deg) translateZ(500px);
}
.wall-left{
transform: rotateY(-90deg) translateZ(500px);
}
.wall-top{
transform: rotateX(90deg) translateZ(500px);
}
.wall-bottom{
transform: rotateX(-90deg) translateZ(500px);
}
.wall-back{
transform: rotateX(180deg) translateZ(500px);
}
@keyframes move{
0% {
transform: translateZ(-500px) rotate(0deg);
}
100% {
transform: translateZ(500) rotate(0deg);
}
}
@keyframes fade{
0%{
opacity: 0;
}
25%{
opacity: 1;
}
50%{
opacity: 1;
}
100%{
opacity: 0;
}
}(html section)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hyperspace Animation</title>
<link rel="stylesheet" href="css/space-time.css">
<meta http-equiv="refresh" content="3;url=Special effect interface.html">
</head>
<body>
<div class="scene">
<div class="wrap">
<div class="wall wall-right"></div>
<div class="wall wall-left"></div>
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
<div class="wall wall-back"></div>
</div>
<div class="wrap">
<div class="wall wall-right"></div>
<div class="wall wall-left"></div>
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
<div class="wall wall-back"></div>
</div>
</div>
</body>
</html>Background picture 👇
It works like this (gif is not recorded, dynamic looks better)
6. CSS3-3D Conversion
1. 3D Displacement: translate3d(x,y,z)
The 3D movement adds an additional Z-axis direction to the 2D movement.
The syntax is: transform: translate3d(x,y,z): the moving distance in three directions.
2. 3D Rotation: rotate3d(x,y,z)
Refers to the ability to rotate an element along an x,y,z or custom axis in a three-dimensional plane.
Supplement: transform: rotate3d(x,y,z,deg) (just understand)
3. Perspective:perspective
You can make a Web page 3D, in pixels, written on the parent box, translate3dZ on the child elements
4. 3D rendering: transfrom-style
Controls whether a child element opens a three-dimensional stereo environment
transform-style:flat subelement does not turn on 3d stereo default
transform-style:preserve-3d, child elements open stereo space
The code is written on the parent, but the child elements are affected
Take a case and feel it 👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
transform-style: preserve-3d;
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all,1s;
}
.front,.back{
position: absolute;
top:0;
left: 0;
border-radius: 50%;
width: 100%;
height: 100%;
font-size: 30px;
line-height: 300px;
}
.front{
background-color: cyan;
z-index: 1;
}
.back{
background-color: red;
transform: rotateY(180deg);
}
.box:hover{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">blue</div>
<div class="back">gules</div>
</div>
</body>
</html>This is the end of all knowledge of HTML+CSS. Although you now have the knowledge to make static pages, a really useful web page is more than static, so in order to make pages interactive, the next step is to learn about JavaScript. This part of the content will be much more than the full knowledge of HTML+CSS, the author will update slowly, I hope readers can learn after reading the article, friends interested in leave a comment 😀 Slide