Summary of HTML5&CSS3 Features

What's New in HTML5

The new features of HTML5 are mainly aimed at the previous deficiencies, adding some new tags, new forms and new form attributes.

These new features have compatibility issues, and are basically supported by browsers of IE9+ and above. If compatibility issues are not considered (for example, mobile terminals), these new features can be used in large quantities.

Semantic tags

Before layout, we basically used div to do it. div has no semantics for search engines.

 <div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

<header> : header tag
<nav> : Navigation tab
<article> : Content label
<section> : defines an area of the document
<aside> : sidebar label
<footer> : tail label

Notice:

This semantic standard is mainly for search engines
These new tab pages can be used multiple times
In IE9, these elements need to be converted to block-level elements
In fact, we prefer to use these tags on mobile
HTML5 also adds a lot of other tags, we will learn later

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增语义化标签</title>
    <style>
        header, nav {
            height: 120px;
            background-color: pink;
            border-radius: 15px;
            width: 800px;
            margin: 15px auto;
        }

        section {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<header>头部标签</header>
<nav>导航栏标签</nav>
<section>某个区域</section>
</body>
</html>

Multimedia Tab

The newly added multimedia tags mainly include two:

Audio: <audio>
Video: <video>

Using them can easily embed audio and video in the page without using flash and other browser plug-ins.

video

HTML5 can also natively support the playback of video format files without using plug-ins. Of course, the supported formats are limited.

Currently the <video> element supports three video formats: try to use mp4 format.

HTML <video> tag

grammar:

 <video src="文件地址" controls="controls"></video>
<video controls="controls" width="300"> 
    <source src="move.ogg" type="video/ogg"> 
    <source src="move.mp4" type="video/mp4"> 
    您的浏览器暂不支持 <video> 标签播放视频
</ video >

Attributes	value	describe
autoplay	autoplay	If present, the video plays as soon as it is ready.
controls	controls	If present, displays controls, such as a play button, to the user.
height	pixels	Sets the height of the video player.
loop	loop	If this attribute is present, playback starts again when the media file finishes playing.
muted	muted	If this property is present, the audio output of the video is muted.
poster	URL	Specifies the image to display while the video is downloading until the user clicks the play button.
preload	auto metadata none	If this attribute is present, the video loads when the page loads and is ready to play. This property is ignored if "autoplay" is used.
src	URL	URL of the video to play.
width	pixels	Sets the width of the video player.

audio

HTML5 can also natively support the playback of audio format files without using plug-ins. Of course, the supported formats are limited.

Currently the <audio> element supports three audio formats: try to use mp3 format.

browser	MP3	wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

grammar:

 <audio src="文件地址" controls="controls"></audio>
<audio controls="controls">
    <source src="happy.mp3" type="audio/mpeg">
    <source src="happy.ogg" type="audio/ogg">
    您的浏览器暂不支持 <audio> 标签。
</audio>

Attributes:

Attributes	value	describe
autoplay	autoplay	If this property is present, the audio is played as soon as it is ready.
controls	controls	If present, displays audio controls (such as a play/pause button) to the user.
loop	loop	If present, restart playback whenever the audio ends.
muted	muted	If this property is present, the audio output is muted.
preload	auto metadata none	Specifies whether and how audio is loaded by default when the page loads.
src	URL	Specifies the URL of the audio file.

Multimedia Tab Summary

Browser support varies
Google Chrome blocks audio and video autoplay
We can add the muted attribute to the video tag to play the video muted, but not the audio (this can be solved by JavaScript)
The video tag is the focus, we often set autoplay, don't use controls, loop and set size properties

input type

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<!-- 我们验证的时候必须添加form表单域 -->
<form action="">
    <ul>
        <li>邮箱: <input type="email"/></li>
        <li>网址: <input type="url"/></li>
        <li>日期: <input type="date"/></li>
        <li>时间: <input type="time"/></li>
        <li>数量: <input type="number"/></li>
        <li>手机号码: <input type="tel"/></li>
        <li>搜索: <input type="search"/></li>
        <li>颜色: <input type="color"/></li>
        <!-- 当我们点击提交按钮就可以验证表单了 -->
        <li><input type="submit" value="提交"></li>
    </ul>
</form>
</body>

</html>

input form attribute

Modify the placeholder font color

 input::placeholder {
    color: hotpink;
}

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增表单属性</title>
    <style>
        input::placeholder {
            color: hotpink;
        }
    </style>
</head>
<body>
<form action="">
    <input type="search" name="sear" id="one" required="required" placeholder="pink老师" autofocus="autofocus"
           autocomplete="off">
    <input type="file" name="" id="two" multiple="multiple">
    <input type="submit" value="提交">
</form>

</body>
</html>

CSS3 new features

The newly added CSS3 features have compatibility issues, only supported by IE9+, and mobile support is better than PC support.

Add selector

attribute selector

Attribute selectors can select elements based on element-specific attributes. This eliminates the need to resort to classes or id selectors.

selector	Introduction
`E[att]`	Select the E element with the att attribute
`E[att="val"]`	Selects E elements with att attribute and attribute value equal to val
`E[att^="val"]`	matches E elements with att attribute whose value starts with val
`E[arr$="val"]`	matches E elements with att attribute whose value ends with val
`E[att*="val"]`	matches E elements with att attribute with val in the value

Note: Class selectors, attribute selectors, and pseudo-class selectors have a weight of 10.

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增属性选择器</title>
    <style>
        /* 必须是 input 同时具有 value 这个属性选择这个元素[] */
        /*input[value] {*/
        /*    color: hotpink;*/
        /*}*/

        /* 只选择 type=text 文本框的 input 选取出来 */
        input[type=text] {
            color: hotpink;
        }

        /* 选择首先是 div 然后具有 class 属性，并且属性值必须是 icon 开头的这些元素 */
        div[class^=icon] {
            color: red;
        }

        /* 选择首先是 section 然后具有 class 属性，并且属性值必须是 data 结尾的这些元素 */
        section[class$=data] {
            color: blue;
        }

        /* 类选择器 属性选择器 伪类选择器 权重都是 10 */
        div.icon1 {
            color: skyblue;
        }
    </style>
</head>
<body>
<!-- 1. 利用属性选择器就可以不用借助于类或者 id 选择器 -->
<!--<input type="text" value="请输入用户名">-->
<!--<input type="text">-->
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握 -->
<input type="text" name="" id="one">
<input type="password" name="" id="two">
<!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>

</body>
</html>

Structural pseudo-class selector

The structure pseudo-class selector mainly selects elements according to the document structure, and is often used to select its child elements according to the parent.

n can be numbers, keywords and formulas
If n is a number, it selects the nth child element, and the number starts from 1...
n can be a keyword: even even, odd odd
n can be a formula: common formulas are as follows (if n is a formula, the calculation starts from n = 0, but the 0th element and the number of elements beyond are ignored)

formula	value
`2n`	Even numbers (2, 4, 6, ...)
`2n+1`	Odd numbers (1, 3, 5, ...)
`5n`	5 10 15...
`n+5`	From the 5th (inclusive) to the end
`-n+5`	Top 5 (including the 5th)

The structure pseudo-class selector mainly selects elements according to the document structure, and is often used to select its child elements according to the parent.

Selector	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)`	Matches 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

nth-child(n) Select one or more specific child elements of a parent element (emphasis).

n can be numbers, keywords and formulas
If n is a number, it selects the nth child element, and the number starts from 1...
n can be a keyword: even even, odd odd
n can be a formula: common formulas are as follows (if n is a formula, the calculation starts from n = 0, but the 0th element and the number of elements beyond are ignored)

formula	value
`2n`	Even numbers (2, 4, 6, ...)
`2n+1`	Odd numbers (1, 3, 5, ...)
`5n`	5 10 15...
`n+5`	From the 5th (inclusive) to the end
`-n+5`	Top 5 (including the 5th)

the difference:

nth-child Sort and select all children in the parent element (the serial number is fixed) First find the nth child, and then see if it matches E
nth-of-type sorts and selects the specified child elements in the parent element. First go to match E, and then find the nth child according to E

summary:

Structural pseudo-class selectors are generally used to select the first few children in the parent
nth-child Sort and select all children in the parent element (the serial number is fixed) First find the nth child, and then see if it matches E
nth-of-type sorts and selects the specified child elements in the parent element. First go to match E, and then find the nth child according to E
If the parent elements are all of the same type of label (such as a list), nth-child is preferred, otherwise only nth-of-type can be used
Class selectors, attribute selectors, pseudo-class selectors with a weight of 10

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增结构伪类选择器</title>
    <style>
        /* 1. 选择 ul 里面的第一个孩子 小 li */
        ul li:first-child {
            background-color: pink;
        }

        /* 2. 选择 ul 里面的最后一个孩子 小 li */
        ul li:last-child {
            background-color: pink;
        }

        /* 3. 选择 ul 里面的第 2 个孩子 小 li */
        ul li:nth-child(2) {
            background-color: skyblue;
        }

        /* 3. 选择 ul 里面的第 6 个孩子 小 li */
        ul li:nth-child(6) {
            background-color: skyblue;
        }
    </style>
</head>
<body>
<ul>
    <li>我是第1个孩子</li>
    <li>我是第2个孩子</li>
    <li>我是第3个孩子</li>
    <li>我是第4个孩子</li>
    <li>我是第5个孩子</li>
    <li>我是第6个孩子</li>
    <li>我是第7个孩子</li>
    <li>我是第8个孩子</li>
</ul>
</body>
</html>

Pseudo-element selector

Pseudo-element selectors can help us create new tag elements with CSS without requiring HTML tags, thereby simplifying the HTML structure.

Selector	Introduction
`::before`	Insert content before element content
`::after`	Insert content after element content

Notice:

before and after create an element, which is an inline element
This newly created element cannot be found in the document tree, so we call it a pseudo-element
Syntax: element::before{}
before and after must have content attribute
before creates the element before the content of the parent element, after creates the element after the content of the parent element
Pseudo-element selectors are the same as tag selectors, with a weight of 1

(1) Pseudo-element selector usage scenario 1: Pseudo-element font icon

 p::before {
    position: absolute;
    right: 20px;
    top: 10px;
    content: '\e91e';
    font-size: 20px;
}

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素选择器使用场景-字体图标</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?1lv3na');
            src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?1lv3na') format('truetype'),
            url('fonts/icomoon.woff?1lv3na') format('woff'),
            url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\e91e';
            color: red;
            font-size: 18px;
        }
    </style>
</head>

<body>
<div></div>
</body>

</html>

(2) Pseudo-element selector usage scenario 2: imitation potato effect

 /* 当我们鼠标经过了 土豆这个盒子，就让里面 before 遮罩层显示出来 */
.tudou:hover::before {
    /* 而是显示元素 */
    display: block;
}

(3) Pseudo-element selector usage scenario 3: Pseudo-element clearing float

The extra labeling method, also known as the partition wall method, is a W3C recommended practice
Add the overflow attribute to the parent
The parent adds the after pseudo-element
The parent adds a double pseudo-element

The extra labeling method, also known as the partition wall method, is a practice recommended by the W3C.

Note: This new empty tag is required to be a block-level element.

The latter two pseudo-element clearing floats are an upgrade and optimization of the first additional labeling method.

 .clearfix:after {
    content: "";            /* 伪元素必须写的属性 */
    display: block;            /* 插入的元素必须是块级 */
    height: 0;                /* 不要看见这个元素 */
    clear: both;            /* 核心代码清除浮动 */
    visibility: hidden;        /* 不要看见这个元素 */
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;            /* 转换为块级元素并且一行显示 */
}

.clearfix:after {
    clear: both;
}

box model

In CSS3, the box model can be specified by box-sizing. There are 2 values: it can be specified as content-box and border-box, so that the way we calculate the size of the box has changed.

It can be divided into two cases:

box-sizing: content-box box size is width + padding + border (previously default)
box-sizing: border-box box size is width

If we change the box model to box-sizing: border-box, then the padding and border will not make the box bigger (the premise is that the padding and border will not exceed the width)

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3盒子模型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            box-sizing: content-box;
        }

        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* css3 盒子模型 盒子最终的大小就是 width 200 的大小 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div>
    小猪乔治
</div>
<p>
    小猪佩奇
</p>
</body>
</html>

transition

Transitions are one of the game-changing features in CSS3, where we can add effects to elements as they transition from one style to another without using Flash animations or JavaScript.

Transition animation: It is a gradual transition from one state to another.

It can make our pages look better and more dynamic. Although low-version browsers do not support them (under IE9), they will not affect the page layout.

We now often use it with :hover .

grammar:

 transition: 要过渡的属性 花费时间 运动曲线 何时开始;

Attributes: CSS attributes that you want to change, such as width and height, background color, and inner and outer margins. If you want all attributes to change and transition, write a all can
Time spent: the unit is seconds (the unit must be written) such as 0.5s
Motion curve: The default is ease (can be omitted)
When to start: The unit is seconds (the unit must be written) The delay trigger time can be set. The default is 0s (can be omitted)

Remember the formula for transition: whoever makes the transition will add it!

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: black;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化，属性写 all 就可以了 */
            /* transition: height .5s ease 1s; */
            /* 谁做过渡，给谁加 */
            transition: all 0.5s;
        }

        div:hover {
            width: 400px;
            height: 200px;
            background-color: gray;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

Other features

Picture becomes blurry

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片模糊处理filter</title>
    <style>
        img {
            /* blur 是一个函数 小括号里面数值越大，图片越模糊 注意数值要加 px 单位 */
            filter: blur(15px);
        }

        img:hover {
            filter: blur(0);
        }
    </style>
</head>
<body>
<img src="images/pink.jpg" alt="">
</body>
</html>

Calculate the width of the box width:calc function

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3属性calc函数</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: black;
        }

        .son {
            /* width: 300px; */
            /* width: calc(500px - 100px); */
            width: calc(100% - 100px);
            height: 200px;
            background-color: salmon;
        }
    </style>
</head>
<body>
<!-- 需求：我们的子盒子宽度永远比父盒子小 100 像素 -->
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

CSS3 improvements

2D conversion

Transforms are one of the game-changing features of CSS3. It can realize the displacement, rotation, scaling and other effects of elements.

Transform (transform) you can simply understand as deformation.

move: translate
Rotate: rotate
zoom: scale

2D coordinate system

2D transformation is a technique for changing the position and shape of a label on a 2D plane. Let's learn about the 2D coordinate system first.

mobile translate

grammar:

 transform: translate(x, y); 
/* 或者分开写 */
transform: translateX(n);
transform: translateY(n);

Focus:

Defines movement in 2D transformations, moving elements along the X and Y axes
The biggest advantage of translate: does not affect the position of any other elements (preferable to positioning)
The percentage unit in translate is relative to its own element translate: (50%, 50%);
Has no effect on inline elements

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2D转换之移动translate</title>
    <style>
        /* 移动盒子的位置：定位、盒子的外边距、2D转换移动 */

        div {
            width: 200px;
            height: 200px;
            background-color: hotpink;
            /* x就是x轴上移动位置，y就是y轴上移动位置，中间用逗号分隔 */
            /* transform: translate(x, y); */
            /* transform: translate(100px, 100px); */
            /* 1. 只移动x坐标 */
            /* transform: translate(100px, 0); */
            /* transform: translateX(100px); */
            /* 2. 只移动y坐标 */
            /* transform: translate(0, 100px); */
            /* transform: translateY(100px); */
        }

        div:first-child {
            transform: translate(30px, 30px);
        }

        div:last-child {
            background-color: black;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

Case 2: Center a box horizontally

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>让一个盒子水平居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: hotpink;
            /* 1. 我们 tranlate 里面的参数是可以用 % */
            /* 2. 如果里面的参数是 % 那么移动的距离是以盒子自身的宽度或者高度来对比的 */
            /* 这里的 50% 就是 250px 因为盒子的宽度是 500px */
            /* transform: translateX(50%); */
        }

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: black;
            /*
            在前面的定位中使用直接减去自身宽度与高度的一半，此种方式的缺点在于不能随盒子大小的变化而变化
            margin-top: -100px;
            margin-left: -100px;
            */
            transform: translate(-50%, -50%);
        }

        span {
            /* translate 对于行内元素是无效的 */
            transform: translate(300px, 300px);
        }
    </style>
</head>

<body>
<div>
    <p></p>
</div>
<span>123</span>
</body>

</html>

rotate rotate

2D rotation refers to rotating an element clockwise or counterclockwise in a 2-dimensional plane.

grammar:

 transform: rotate(度数)

Focus:

rotate is followed by degrees, the unit is deg, such as rotate(45deg)
When the angle is positive, it is clockwise; when it is negative, it is counterclockwise
The center point of the default rotation is the center point of the element

Example: Rotate the picture 360 degrees

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2D转换之旋转rotate</title>
    <style>
        img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 0.5s;
        }

        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
<img src="media/pic.jpg" alt="">
</body>

</html>

Case: Rotate Arrow

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋转三角</title>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }

        /* 三角可以通过盒子来制作，不一定非得字体图标 */
        /* 让一个旋转45度的正方形（菱形）的两个边框显示出来 */
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }

        /* 鼠标经过 div 里面的三角旋转 */
        div:hover::after {
            transform: translate(0%,50%) rotate(225deg);
        }
    </style>
</head>

<body>
<div></div>
</body>

</html>

Transform the center point transform-origin

We can set the center point of the element transition.

grammar:

 transform-origin: x y;

Focus:

Note that the following parameters x and y are separated by spaces
The center point of the xy default transformation is the center point of the element (50% 50%)
You can also set pixels or positional nouns for xy (top bottom left right center)

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transform-origin</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 1.可以跟方位名词 */
            /* transform-origin: left bottom; */
            /* 2. 默认的是 50% 50% 等价于 center center */
            /* 3. 可以是 px 像素 */
            transform-origin: 25px 25px;
        }

        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
<div></div>
</body>

</html>

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋转中心点</title>
    <style>
        div {
            /* 溢出隐藏 */
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 10px;
            float: left;
        }

        div::before {
            content: "黑马";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.4s;
        }

        /* 鼠标经过 div 里面的 before 复原 */
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
<div></div>
<div></div>
<div></div>
</body>

</html>

zoom scale

Zoom, as the name suggests, zooms in and out. Just add this property to an element to control whether it will zoom in or out.

grammar:

 transform: scale(x, y);

Notice:

Note that x and y are separated by commas
transform: scale(1, 1) : Double the width and height, which is equivalent to no enlargement
transform: scale(2, 2) : both width and height are enlarged by 2 times
transform: scale(2) : write only one parameter, the second parameter is equal to the first parameter by default, which is equivalent to scale(2, 2)
transform: scale(0.5, 0.5) : zoom out
The biggest advantage of scale scaling: you can set the base point for scaling (the default is to scale with the center point); and the scaling will not affect the position of other boxes (the above two features cannot be achieved by directly setting width and height)

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2D转换之缩放</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* 可以设置缩放的中心点 */
            /* transform-origin: left bottom; */
        }
        
        div:hover {
            /* 1. 里面写的数字不跟单位 就是倍数的意思， 1 就是 1 倍；2 就是 2 倍 */
            /* transform: scale(x, y); */
            /* transform: scale(2, 2); */
            /* 2. 修改了宽度为原来的 2 倍，高度不变 */
            /* transform: scale(2, 1); */
            /* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法以下是宽度修改了 2 倍，高度默认和第一个参数一样 */
            /* transform: scale(2); */
            /* 4. 我们可以进行缩小，小于 1就是缩小 */
            /* transform: scale(0.5, 0.5); */
            /* transform: scale(0.5); */
            /* 5. scale 的优势之处：不会影响其他的盒子，而且可以设置缩放的中心点 */
            /*
            直接设置宽高时无法做到以上优点的！
            width: 300px;
            height: 300px;
            */
            transform: scale(2);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

Case: Image enlargement

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片放大案例</title>
    <style>
        div {
            width: 225px;
            height: 137px;
            overflow: hidden;
            float: left;
            margin: 10px;
        }

        div img {
            transition: all .4s;
        }

        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
<div>
    <a href="#"><img src="media/scale.jpg" alt=""></a>
</div>
<div>
    <a href="#"><img src="media/scale.jpg" alt=""></a>
</div>
<div>
    <a href="#"><img src="media/scale.jpg" alt=""></a>
</div>
</body>
 
</html>

Comprehensive writing

Notice:

Using multiple transforms simultaneously, the format is: transform: translate() rotate() scale() ...etc
Its order affects the effect of the transition. (Rotate first will change the direction of the coordinate axis)
When we have displacement and other properties at the same time, remember to put the displacement first

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 1s;
        }

        div:hover {
            /* transform: rotate(180deg) translate(150px, 50px); */
            /* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
            transform: translate(150px, 50px) rotate(180deg) scale(1.2);
        }
    </style>
</head>

<body>
<div></div>
</body>

</html>

Summarize

The biggest advantage of 2D moving translate(x, y) is that it does not affect other boxes. The parameters inside are calculated in % relative to their own width and height.
2D rotate rotate (degrees) to rotate elements, the unit of degrees is deg
The parameters in 2D scaling sacle(x, y) are numbers, not units, and can be decimals. The biggest advantage is that it does not affect other boxes
Set the transformation center point transform-origin : xy; the parameter can be a percentage, a pixel or a position noun
When we are writing comprehensively and have displacement and other attributes at the same time, remember to put the displacement first

animation

Animation (animation) is one of the subversive features in CSS3. It can precisely control one or a group of animations by setting multiple nodes , and is often used to achieve complex animation effects.

Compared with transition, animation can achieve more changes, more control, continuous automatic playback and other effects.

basic use

Creating an animation is a two-step process:

Define the animation first
Reuse (call) animation

Define animations with keyframes (similar to defining class selectors)

 @keyframes 动画名称 {
   0% {
        width: 100px;
   }  
   100% {
        width: 200px;
   }
}

animation sequence

0% is the start of the animation and 100% is the end of the animation. Such rules are animation sequences
Specify a CSS style in @keyframes to create an animation that gradually changes from the current style to the new style
Animation is the effect of gradually changing an element from one style to another. You can change the styles as many times as you want
Please use a percentage to specify when the change occurs, or use the keywords "from" and "to", which are equivalent to 0% and 100%

Elements use animation

 div {
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin: 100px auto;
    /* 调用动画 */
    animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间;
}

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3动画的基本使用</title>
    <style>
        /* 我们想页面一打开，一个盒子就从左边走到右边 */
        /* 1. 定义动画 */
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

<body>
<div></div>
</body>

</html>

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画序列</title>
    <style>
        /* from to 等价于 0% 和 100% */
        /*
        @keyframes move {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(1000px, 0);
            }
        }
        */

        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframe 关键帧 */
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总的时间（我们这个案例 10s）的划分 25% * 10 = 2.5s */

        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0)
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
<div>

</div>
</body>

</html>

Animation common properties

Attributes	describe
@keyframes	prescribed animation
animation	Shorthand property for all animation properties, except the animation-play-state property
animation-name	Specifies the name of the @keyframes animation (required)
animation-duration	Specifies the seconds or milliseconds it takes for the animation to complete a cycle, the default is 0 (required)
animation-timing-function	Specifies the speed curve of the animation, the default is "ease"
animation-delay	Specifies when the animation should start, default is 0
animation-iteration-count	Specifies the number of times the animation is played, the default is 1, and infinite
animation-direction	Specifies whether the animation is played in reverse in the next cycle, the default is "normal", alternate is reversed
animation-play-state	Specifies whether the animation is running or paused. Default is "running", and "paused"
animation-fill-mode	Specify the state after the animation ends, keep forwards and return to the starting backwards

animation shorthand property

animation: animation name, duration, when the motion curve starts to play, and whether the animation starts or ends in the opposite direction.

 animation: myfirst 5s linear 2s infinite alternate;

Shorthand properties do not contain animation-play-state
Pause animation: animation-play-state: puased; often used in conjunction with other mouse overs
Want the animation to walk back instead of jumping back directly: animation-direction: alternate
After the box animation ends, stop at the end position: animation-fill-mode: forwards

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画属性</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            /* animation-duration: 2s; */
            /* 运动曲线 */
            /* animation-timing-function: ease; */
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数 iteration 重复的 conut 次数 infinite 无限 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放 默认的是 normal 如果想要反方向 就写 alternate */
            /* animation-direction: alternate; */
            /* 动画结束后的状态 默认的是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards */
            /* animation-fill-mode: forwards; */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* animation: move 2s linear 0s 1 alternate forwards; */
            /* 前面 2 个属性 name duration 一定要写 */
            /* animation: move 2s linear alternate forwards; */
        }

        div:hover {
            /* 鼠标经过 div 让这个 div 停止动画，鼠标离开就继续动画 */
            animation-play-state: paused;
        }
    </style>
</head>

<body>
<div>

</div>
</body>

</html>

Example: Heat Map

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大数据热点图</title>
    <style>
        body {
            background-color: #333;
        }

        .city {
            position: absolute;
            top: 100px;
            left: 100px;
            color: #fff;
        }

        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }

        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        
        .city div.pulse2 {
            animation-delay: 0.4s;
        }

        .city div.pulse3 {
            animation-delay: 0.8s;
        }

        @keyframes pulse {
            0% {
            }
            70% {
                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
<div class="map">
    <div class="city">
        <div class="dotted"></div>
        <div class="pulse1"></div>
        <div class="pulse2"></div>
        <div class="pulse3"></div>
    </div>
</div>
</body>

</html>

speed curve

animation-timing-function: Specifies the speed curve of the animation, the default is "ease".

value	describe
linear	The speed of the animation is the same from beginning to end (constant speed)
ease	default. Animation starts at low speed, then speeds up, slows down before ending
ease-in	Animation starts at low speed
ease-out	Animation ends at low speed
ease-in-out	Animation starts and ends at low speed
steps()	specifies the number of intervals (steps) in the time function

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>速度曲线步长</title>
    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了 steps 就不要在写 ease 或者 linear 了 */
            animation: w 4s steps(10) forwards;
        }

        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
<div>我在这里等你</div>
</body>

</html>

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>奔跑的熊大案例</title>
    <style>
        body {
            background-color: #ccc;
        }

        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画，用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }

        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
<div></div>
</body>

</html>

Case: Running Bear

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>奔跑的熊大案例</title>
    <style>
        body {
            background-color: #ccc;
        }

        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画，用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }

        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
<div></div>
</body>

</html>

3D transformation

The environment we live in is 3D, and a photograph is an example of a 3D object represented on a 2D plane.

What are the characteristics

near big far small
The occlusion behind the object is not visible

When we build 3D effects on web pages, we can produce 3D effects by referring to these characteristics.

3D coordinate system

x-axis: horizontal to the right (note: the right of x is positive, the left is negative)
y-axis: vertically downward (note: y is positive below, negative above)
z-axis: vertical screen (note: positive values to the outside, negative values to the inside)

3D Transformations We mainly study 3D displacement and 3D rotation which are most commonly used in work.

Main knowledge points

3D displacement: translate3d(x, y, z)
3D rotation: rotate3d(x, y, z)
Perspective: perspective
3D rendering: transfrom-style

3D mobile translate3d

3D movement adds a moveable direction on the basis of 2D movement, which is the z-axis direction.

transform:translateX(100px): just move on the X axis
transform:translateY(100px): just move on the Y axis
transform:translateZ(100px): just move on the Z axis (note: translateZ is generally in px units)
transform:translate3d(x, y, z): where x, y, z respectively refer to the distance in the direction of the axis to be moved

Because the z-axis is a vertical screen, pointing from the inside to the outside, the default is to not see elements moving in the direction of the z-axis (with the help of perspective).

perspective perspective

In the 2D plane, the near big and far small visual stereo is generated, but the effect is only two-dimension

Summary of HTML5&CSS3 Features

What's New in HTML5

Semantic tags

Multimedia Tab

video

audio

Multimedia Tab Summary

input type

input form attribute

CSS3 new features

Add selector

attribute selector

Structural pseudo-class selector

Pseudo-element selector

box model

transition

Other features

Picture becomes blurry

Calculate the width of the box width:calc function

CSS3 improvements

2D conversion

2D coordinate system

mobile translate

rotate rotate

Transform the center point transform-origin

zoom scale

Comprehensive writing

Summarize

animation

basic use

Define animations with keyframes (similar to defining class selectors)

Elements use animation

Animation common properties

animation shorthand property

speed curve

3D transformation

3D coordinate system

3D mobile translate3d

perspective perspective

IT小马

引用和评论

PHP5.1~8.2特性详解

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了