HTML5与CSS3知识点总结
<ul><li>HTML常用标签总结</li>
<li>手摸手带你学CSS</li>
</ul>
<blockquote>
<p><strong>好好学习，天天向上</strong><br>
<br><br>
本文已收录至我的Github仓库<strong>DayDayUP</strong>：github.com/RobodLee/DayDayUP，欢迎Star<br>
<br><br>
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐</p>
<p>原文链接：https://blog.csdn.net/weixin_43461520/article/details/113201713</p>
<p>⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐</p>
</blockquote>
<h2 id="html5新增标签">HTML5新增标签</h2>
<p>HTML5针对以前的不足，新增了一些新的标签、表单以及表单属性等。</p>
<h3 id="语义化标签">语义化标签</h3>
<p>之前在做布局的使用，使用了大量的div，这些div都是没有语义的，我们不能很轻易的就判断出某个div大致是什么内容，所以在HTML5中新增了语义化标签来弥补这个缺陷，现在我们可以根据标签名去推断出其大致内容，方便代码的阅读，而且使用语义化标签也可以提高被搜索引擎检索的概率。</p>
<blockquote>
<p><code><header></code>：头部标签<br>
<code><nav></code>：导航标签<br>
<code><article></code>：内容标签<br>
<code><section></code>：定义文档某个区域<br>
<code><aside></code>：侧边栏标签<br>
<code><footer></code>：尾部标签</p>
</blockquote>
<p><img src="https://img-blog.csdnimg.cn/img_convert/34f163c8c6de0ebcad53dae07163b6d5.png#pic_center"></p>
<h3 id="多媒体标签">多媒体标签</h3>
<p>HTML5原生支持音视频文件的播放，其中音频标签和视频标签的使用方式基本一致 。</p>
<blockquote>
<p><code><autdio></code>：音频</p>
</blockquote>
<p><code><audio></code>标签支持三种音频格式，分别是MP3、Wav以及Ogg，其中MP3格式所有的浏览器都支持。</p>
<pre><code class="language-html">语法：
<audio src="文件地址" controls="controls"></audio>
</code></pre>
<p><code><audio></code>标签常见属性👇</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>autoplay</td>
<td>autoplay</td>
<td>表示音频在就绪后马上播放</td>
</tr>
<tr>
<td>controls</td>
<td>controls</td>
<td>表示向用户显示控件，比如播放按钮</td>
</tr>
<tr>
<td>loop</td>
<td>loop</td>
<td>循环播放，即每当音频结束时重新开始播放</td>
</tr>
<tr>
<td>src</td>
<td>url</td>
<td>要播放的音频的url</td>
</tr>
</tbody>
</table>
<blockquote>
<p><code><video></code>：视频</p>
</blockquote>
<p><code><video></code>标签支持三种视频格式，分别是MP4、WebM以及Ogg，其中MP4格式所有的浏览器都支持。</p>
<pre><code class="language-html">语法：
<video src="文件地址" controls="controls"></video>
</code></pre>
<p>其中<code><video></code>标签有很多属性，比较常见的有👇</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>autoplay</td>
<td>autoplay</td>
<td>视频就绪自动播放(谷歌浏览器不会自动播放，需要添加muted属性来自动播放)</td>
</tr>
<tr>
<td>controls</td>
<td>controls</td>
<td>向用户显示播放控件</td>
</tr>
<tr>
<td>width</td>
<td>pixels(像素)</td>
<td>设置播放器宽度</td>
</tr>
<tr>
<td>height</td>
<td>pixels(像素)</td>
<td>设置播放器高度</td>
</tr>
<tr>
<td>loop</td>
<td>loop</td>
<td>插放完是否继续播放该视频，循环播放</td>
</tr>
<tr>
<td>preload</td>
<td>auto(预先加载视频)<br>none(不加载视频)</td>
<td>规定是否预加载视频 (如果有了 autoplay 就忽略该属性)</td>
</tr>
<tr>
<td>src</td>
<td>url</td>
<td>视频ur地址</td>
</tr>
<tr>
<td>poster</td>
<td>图片的url</td>
<td>加载等待的画面图片</td>
</tr>
<tr>
<td>muted</td>
<td>muted</td>
<td>静音插放</td>
</tr>
</tbody>
</table>
<h3 id="input表单">input表单</h3>
<p>在HTML5中，增加了一些新的input类型，使其语义化更加明显。</p>
<table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>type="email"</td>
<td>限制用户输入必须为Email类型</td>
</tr>
<tr>
<td>type="url"</td>
<td>限制用户输入必须为URL类型</td>
</tr>
<tr>
<td>type="date"</td>
<td>限制用户输入必须为日期类型</td>
</tr>
<tr>
<td>type="time"</td>
<td>限制用户输入必须为时间类型</td>
</tr>
<tr>
<td>type="month"</td>
<td>限制用户输入必须为月类型</td>
</tr>
<tr>
<td>type="week"</td>
<td>限制用户输入必须为周类型</td>
</tr>
<tr>
<td>type="number"</td>
<td>限制用户输入必须为数字类型</td>
</tr>
<tr>
<td>type="tel"</td>
<td>手机号码</td>
</tr>
<tr>
<td>type="search"</td>
<td>搜索框</td>
</tr>
<tr>
<td>type="color"</td>
<td>生成一个颜色选择表单</td>
</tr>
</tbody>
</table>
<p>HTML5中不仅新增了一些input类型，还新增了一些表单属性👇</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>required</td>
<td>required</td>
<td>表单拥有该属性表示其内容不能为空，必填</td>
</tr>
<tr>
<td>placeholder</td>
<td>提示文本</td>
<td>表单的提示信息，存在默认值将不显示</td>
</tr>
<tr>
<td>autofocus</td>
<td>autofocus</td>
<td>自动聚焦属性，页面加载完成自动聚焦到指定表单</td>
</tr>
<tr>
<td>autocomplete</td>
<td>off / on</td>
<td>当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete="on"，关闭autocomplete="off，需要放在表单内，同时加上name属性，并且提交成功过</td>
</tr>
<tr>
<td>multiple</td>
<td>multiple</td>
<td>可以多选文件提交</td>
</tr>
</tbody>
</table>
<h2 id="css3新增选择器">CSS3新增选择器</h2>
<h3 id="属性选择器">属性选择器</h3>
<p>属性选择器可以在不用借助于类或者id选择器的情况下直接<strong>根据元素特定属性来选择元素</strong>，它的<strong>权重为10</strong>。</p>
<blockquote>
<p><code>E</code>：选择具有<strong>att</strong>属性的<strong>E</strong>元素</p>
</blockquote>
<pre><code class="language-html"><!-- 将具有value属性的按钮1中文字颜色修改为红色，按钮2因为不具有value属性，所以文字颜色没有改变 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
color: red;
}
</style>
</head>
<body>
<input type="button" value="按钮1">
<input type="button">
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/fa674ca7cbfb28b598238a959803bf48.png#pic_center"></p>
<blockquote>
<p><code>E</code>：选择具有<strong>att</strong>属性且属性值等于<strong>val</strong>的<strong>E</strong>元素</p>
</blockquote>
<pre><code class="language-html"><!-- 将value属性值为 “按钮2” 的button的文字颜色修改为蓝色 -->
<head>
<style>
input {
color: blue;
}
</style>
</head>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/2aa60a8675a88888168bcd1387ac4c0a.png#pic_center"></p>
<blockquote>
<p><code>E</code>：匹配具有<strong>att</strong>属性且值以<strong>val</strong>开头的<strong>E</strong>元素<br>
<code>E</code>：匹配具有<strong>att</strong>属性且值以<strong>val</strong>结尾的<strong>E</strong>元素<br>
<code>E</code>：匹配具有<strong>att</strong>属性且值中含有<strong>val</strong>的<strong>E</strong>元素</p>
</blockquote>
<h3 id="结构伪类选择器">结构伪类选择器</h3>
<p>结构伪类选择器主要<strong>根据文档结构来选择元素</strong>，常用于<strong>根据父级元素选择里面的子元素</strong>。</p>
<blockquote>
<p><code>E: first-child</code>：匹配父元素中的第一个子元素E<br>
<code>E: last-child</code>：匹配父元素中最后一个E元素<br>
<code>E: nth-child(n)</code>：匹配父元素中的第n个子元素E，n也可以是关键字<strong>even偶数</strong>、<strong>odd奇数</strong>，如果直接写字母n则表示选择所有的子元素</p>
</blockquote>
<pre><code class="language-html"><head>
<style>
ul li:first-child {
background-color: skyblue;
}
ul li:last-child {
background-color: aquamarine;
}
ul li:nth-child(2) {
background-color: blueviolet;
}
</style>
</head>
<body>
<ul>
<li>欢迎关注</li>
<li>微信公众号：</li>
<li>Robod</li>
</ul>
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/98aff0c6c6715d6f2acd40780b6bc2ab.png#pic_center"></p>
<blockquote>
<p><code>E: first-of-type</code>：指定类型E的第一个<br>
<code>E: last-of-type</code>：指定类型E的最后<br>
<code>E: nth-of-type(n)</code>：指定类型E的第n个</p>
</blockquote>
<p>这三个和上面三个使用起来类似，不过还是有一点区别的，<strong>nth-child</strong>是对父元素里面所有子元素排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配；而<strong>nth-of-type</strong>则是对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个子元素。</p>
<pre><code class="language-html"><head>
<style>
ul li:nth-child(1) {
/* 先对ul里的所有子元素排序，找到序号为1的元素，发现是p标签而不是li，所以样式不生效 */
background-color: skyblue;
}
div li:nth-of-type(1) {
/* 先匹配对应的li元素，对li元素进行排序，排序后选择第一个li */
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<p>微信公众号：Robod</p> <!-- 序号是1 -->
<li>欢迎关注</li> <!-- 序号是2 -->
<li>微信公众号：</li>
<li>Robod</li>
</ul>
<div>
<p>p</p>
<li>li1</li> <!-- 序号是1 -->
<li>li2</li> <!-- 序号是2 -->
</div>
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/b4c2827bc51ec6f49bd332dc3e915d30.png#pic_center"></p>
<h3 id="伪元素选择器">伪元素选择器</h3>
<p>有的时候我们只需要一个简单的标签，如果用HTML做的话就会使代码结构变得复杂，这时候就可以用伪元素选择器，它可以帮助我们利用CSS创建新标签元素，从而简化HTML结构。伪元素选择器有两个，分别是<code>::before</code>（在元素内部的前面插入内容）和<code>::after</code>（在元素内部的后面添加内容），需要注意的是它们创建的元素是<strong>行内元素</strong>，而且在文档树里面是找不到的，这两个选择器必须要有<strong>content</strong>属性(可以没有值)，伪元素选择器的<strong>权重是1</strong>，</p>
<pre><code class="language-html"><!--语法：
element::before{}
-->
<head>
<style>
div {
position: relative;
width: 300px;
height: 200px;
background-color: aquamarine;
}
div::before {
content: '微信公众号';
}
div::after {
position: absolute;
font-size: 30px;
content: "Robod";
right: 10px;
}
</style>
</head>
<body>
<div>
:
</div>
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/581c476973fc59fd664f8186d95ff6fd.png#pic_center"></p>
<h2 id="css3新特性">CSS3新特性</h2>
<h3 id="css3盒模型">CSS3盒模型</h3>
<p>之前我们在定义盒子大小的时候，指定了width属性，可是盒子实际的宽度并不是width，padding和border都会将盒子撑大，也就是实际的盒子宽度是<strong>width+padding+border</strong>，而现在可以用<code>box-sizing</code>来指定盒模型，box-sizing属性有以下两个值。</p>
<blockquote>
<p><code>content-box</code>：这个是默认值，盒子的宽度是<strong>width+padding+border</strong></p>
<p><code>border-box</code>：盒子的大小为<strong>width</strong>属性的值</p>
</blockquote>
<pre><code class="language-html"><head>
<style>
.box1 {
width: 400px;
height: 100px;
border: 20px solid red;
background-color: aqua;
padding: 10px;
box-sizing: content-box;
}
.box2 {
width: 400px;
height: 100px;
border: 20px solid green;
background-color: blanchedalmond;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">请小伙伴们给我的文章来个赞！</div>
<div class="box2">欢迎关注微信公众号：Robod</div>
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/d98a8a94981e45cacfe9a10830ce8bff.png#pic_center"></p>
<h3 id="css3滤镜filter">CSS3滤镜filter</h3>
<p>filter属性将模糊或颜色偏移等图形效果应用于元素，通常用于调整图像，背景和边框的渲染。常用的几个函数如下：</p>
<blockquote>
<p><code>filter: blur(5px)</code> 该函数用来对图片进行模糊处理，数值越大图片越模糊<br>
<code>filter: contrast(200%)</code> 调整图像的对比度，0%会全黑，100%图像不变，超过100%更低的对比度<br>
<code>filter: grayscale(80%)</code> 将图像转换为灰度图像，100%完全转为灰度图像，0%图像无变化<br>
<code>filter: hue-rotate(90deg)</code> 给图像应用色相旋转</p>
<p>还有其它的一些可以参考https://developer.mozilla.org/en-US/docs/Web/CSS/filter</p>
</blockquote>
<h3 id="calc函数">calc()函数</h3>
<p>calc()函数可以在声明CSS属性值时执行一些计算，例如：</p>
<pre><code class="language-html">width: calc(100% - 30px); <!-- 表示比父盒子小30像素 -->
</code></pre>
<h3 id="css3过渡">CSS3过渡</h3>
<p>过渡动画是从一个状态渐渐的过渡到另外一个状态，通常和<strong>:hover</strong>一起搭配使用。</p>
<pre><code class="language-css">/*语法：*/
transition:要过渡的属性 花费时间 运动曲线 何时开始
/*参数说明 */
1、属性：想要变化的css属性,宽度高度背景颜色内外边距都可以，如果想要所有的属性都变化过渡,写一个 all 即可
2、花费时间：单位是秒(必须写单位)比如0.5s
3、运动曲线：默认是ease(逐渐慢下来，可以省略)，还可以是linear(匀速)，ease-in(加速)，ease-out(减速)，ease-in-out(先加速后减速)
4、何时开始：单位是秒(必须写单位)，可以设置延迟触发时间默认是0s(可以省略)
</code></pre>
<pre><code class="language-html"><head>
<style>
div {
width: 50px;
height: 50px;
background-color: aqua;
/* 如果要写多个属性，用逗号隔开即可 */
/* transition: width 1s ease-in-out .5s,height 1s ease-in-out .5s; */
/* 如果所有的属性都要过渡，写 all 即可 */
transition: all 1s ease-in-out .5s;
}
div:hover {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>微信公众号：Robod</div>
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/ab46aa1ff4d53e757a017c5b09091061.gif#pic_center"></p>
<h2 id="2d转换">2D转换</h2>
<h3 id="移动translation">移动translation</h3>
<p>2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。</p>
<pre><code class="language-css">/*第一个参数是x方向移动的距离，第二个参数是y方向移动的距离，可以是百分比，值可以为0但不能没有*/
transform: translate(20px,0);
/*也可以分开写，👆的一行等同于👇两行*/
transfrom: translateX(20px);
transform: translateY(30px);
</code></pre>
<p>translate的优点就是<strong>不会影响到其它元素的位置</strong>，如果单位不是px而是百分比的话，表示的就是自身元素的百分比，这种移动方式<strong>对行内标签是没有效果</strong>的。</p>
<pre><code class="language-html"><head>
<style>
div:first-child {
width: 100px;
height: 100px;
background-color: red;
transform: translate(50%,20px);
}
div:last-child {
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/24d5064e56d06b07bb82de52b5b5224a.png#pic_center"></p>
<h3 id="旋转rotate">旋转rotate</h3>
<p>2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转。</p>
<pre><code class="language-html"><!-- rotate中度数的单位是deg，顺时针是正数，逆时针是负数 -->
<!-- transfrom: rotate(度数); -->
<head>
<style>
img {
transition: all 1s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/c0ff79e2a6a3b1cfe95d40a72d281429.gif#pic_center"></p>
<p>现在是以元素的中心为旋转点进行旋转，这也是默认的旋转点，也可以通过<code>transfrom-origin</code>属性更改旋转点。</p>
<pre><code class="language-html"><!-- 两个参数分别是x方向和y方向的位置，可以是像素也可以是方位名词 -->
<!-- transfrom-origin: x y; -->
<head>
<style>
img {
transform-origin: 50px bottom;
transition: all 1s;
}
img:hover {
transform: rotate(90deg);
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/6b9d62ea942261cd8abe689b98e9eedb.gif#pic_center"></p>
<h3 id="缩放scale">缩放scale</h3>
<p>缩放的意思就是可以放大和缩小，可以用<code>scale</code>来设置缩放，这种方式相较于直接修改宽高而言优势就是<strong>不影响其它盒子</strong>，和rotate一样，也可以通过<strong>transform-origin</strong>属性来修改缩放中心。</p>
<pre><code class="language-html"><!-- 第一个参数表示宽缩放为原来的m倍，第二个参数表示高缩放为原来的n倍，如果只填一个参数代表宽高同时缩放为原来的x倍
transform: scale(m,n);
transform: scale(x); -->
<head>
<style>
img {
transition: all 1s;
transform-origin: right bottom;
}
img:hover {
transform: scale(.5);
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
<p>微信公众号：Robod</p>
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/b6d153899b5ce313f4b82e808b556841.gif#pic_center"></p>
<blockquote>
<p>上述的几个转换方式是可以同时使用的，中间用空格隔开即可</p>
<p><code>transform: translate() rotate() scale()...</code></p>
<p>需要注意的是，书写顺序会影响转换的效果，比如先旋转会改变坐标轴方向，所以在同时有位移和其它属性的时候，位移要放在最前面。</p>
</blockquote>
<h2 id="css3-动画">CSS3 动画</h2>
<p>动画(animation)是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果，相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。</p>
<h3 id="动画的基本使用">动画的基本使用</h3>
<ul>
<li>
<p><code>动画序列</code></p>
<p>在学习动画之前，要先明确<strong>动画序列</strong>这个概念👇</p>
<blockquote>
<ul>
<li><strong>0%</strong>是动画的<strong>开始</strong>，<strong>100%</strong>是动画的结束（0%~100%代表不同阶段的动画，都可以设置）。这样的规则就是动画序列。</li>
<li>在<code>@keyframes</code>中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。</li>
<li>动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的<strong>次数</strong>。</li>
<li>请用百分比来规定变化发生的时间，或用关键词 "<strong>from</strong>" 和 "<strong>to</strong>" ，等同于0%和100%。</li>
</ul>
</blockquote>
</li>
<li>
<p><code>1、使用@keyframes定义动画</code></p>
<pre><code class="language-css">@keyframes 自定义的动画名称 {
0% {
xxxxxx；
}
100% {
xxxxxxx；
}
}
</code></pre>
</li>
<li>
<p><code>2、元素使用动画</code></p>
<p>给需要使用动画的元素添加<code>animation-name</code>(调用动画)以及<code>animation-duration</code>(持续时间)这两个属性。</p>
<pre><code class="language-html"><head>
<style>
@keyframes robod_animation {
0% {
transform: rotate(0) scale(1);
}
to {
transform: rotate(90deg) scale(0.5);
}
}
img {
animation-name: robod_animation;
animation-duration: 2s;
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/9c25efeaad092b5755126c80e88e38f9.gif#pic_center"></p>
</li>
</ul>
<h3 id="常用动画属性">常用动画属性</h3>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><strong>@keyframes</strong></td>
<td>规定动画</td>
</tr>
<tr>
<td style="text-align: left"><strong>animation</strong></td>
<td>所有动画属性的简写属性，除了animation-play-state属性</td>
</tr>
<tr>
<td style="text-align: left"><strong>animation-name</strong></td>
<td>规定@keyframes动画的名称（必须）</td>
</tr>
<tr>
<td style="text-align: left"><strong>animation-duration</strong></td>
<td>规定动画完成一个周期所花费的秒或毫秒，默认是0（必须）</td>
</tr>
<tr>
<td style="text-align: left"><strong>animation-timing-funtion</strong></td>
<td>规定动画的速度曲线，默认是 “ease”</td>
</tr>
<tr>
<td style="text-align: left"><strong>animation-delay</strong></td>
<td>规定动画何时开始，默认是0</td>
</tr>
<tr>
<td style="text-align: left"><strong>animation-iteration-count</strong></td>
<td>规定动画被播放的次数，默认是1，还有infinite(无限循环)</td>
</tr>
<tr>
<td style="text-align: left"><strong>animation-direction</strong></td>
<td>规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播放</td>
</tr>
<tr>
<td style="text-align: left"><strong>animation-play-state</strong></td>
<td>规定动画是否正在运行或暂停，默认是 “running”，还有 “paused”</td>
</tr>
<tr>
<td style="text-align: left"><strong>animation-fill-mode</strong></td>
<td>规定动画结束后状态，保持forwards，回到起始backwards</td>
</tr>
</tbody>
</table>
<blockquote>
<p>动画属性也可以采用简写的方式：</p>
<p>animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;</p>
<p>需要注意的是，简写属性里面不包含<strong>animation-play-state</strong></p>
</blockquote>
<h3 id="速度曲线">速度曲线</h3>
<p>上面提到了一个<strong>animation-timing-funtion</strong>属性用来设置动画的速度曲线，该属性的值一共有6个：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>linear</td>
<td>动画从头到尾的速度是相同的，匀速</td>
</tr>
<tr>
<td>ease</td>
<td>默认，动画以低速开始，然后加快，在结束前变慢</td>
</tr>
<tr>
<td>ease-in</td>
<td>动画以低速开始</td>
</tr>
<tr>
<td>ease-out</td>
<td>动画以低速结束</td>
</tr>
<tr>
<td>ease-in-out</td>
<td>动画以低速开始和结束</td>
</tr>
<tr>
<td>steps()</td>
<td>指定了时间函数中的间隔数量（步长）</td>
</tr>
</tbody>
</table>
<p>前面几个都很好理解，这个步长的意思就是整个操作划分为多少步，然后一步一步执行，类似于那种一格一格的进度条的感觉，可以做一些有意思的动画。</p>
<pre><code class="language-html"><head>
<style>
@keyframes steeeep {
from {
width: 0;
}
to {
width: 160px;
}
}
div {
width: 160px;
overflow: hidden;
white-space: nowrap;
font-size: 10px;
background-color: aqua;
animation: steeeep 2s steps(15) backwards;
}
</style>
</head>
<body>
<div>
欢迎关注微信公众号：Robod
</div>
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/c833addb483297dd6b005ca020181862.gif#pic_center"></p>
<h2 id="3d转换">3D转换</h2>
<h3 id="透视-perspective">透视 perspective</h3>
<p>在了解3D转换之前首要要明确一个概念——“<strong>透视</strong>”，电脑屏幕是二维的，我们没办法直接看到立体的东西，如果要想看到物体在Z轴上的变化，就得使用<strong>透视</strong>，透视又称<strong>视距</strong>，其实就是3D的东西投影在2D平面的效果，下图中的<strong>d</strong>就是透视，当物体不变时，透视越大，在屏幕上看到的就越小，透视越小，在屏幕上看到的就越大，所谓<strong>近大远小</strong>。透视的<strong>单位是px</strong>。</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/7ea3e9df5ba0646292d4e5db1a4038b0.png#pic_center"></p>
<h3 id="3d移动-translate3d">3D移动 translate3d</h3>
<p>3D移动和2D移动类似，只不过是多了个Z轴。</p>
<pre><code class="language-css">/*这三个参数分别代表在xyz轴要移动的距离，z轴一般以px为单位*/
transform: translate3d(x , y , z);
/*也可以分开写*/
translate: translateX(x);
translate: translateY(y);
translate: translateZ(z);
</code></pre>
<p>首先给需要移动的元素的父元素添加透视，在透视固定的情况下，改变translateZ的大小，就会改变元素在屏幕上的大小。</p>
<pre><code class="language-html"><head>
<style>
body {
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 0 auto;
transform: translateZ(100px);
}
</style>
</head>
<body>
<div></div>
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/3f066eee6f8db05c6bbb66bddfd44a31.gif#pic_center"></p>
<h3 id="3d旋转-rotate3d">3D旋转 rotate3d</h3>
<p>3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。</p>
<pre><code class="language-css">transform: rotateX(45deg); /*沿x轴正方向旋转45度*/
transform: rotateY(45deg); /*沿y轴正方向旋转45度*/
transform: rotateZ(45deg); /*沿z轴正方向旋转45度*/
transform: rotate3d(1,1,0,45deg); /*沿着x轴与y轴的对角线旋转45度*/
</code></pre>
<p>那么哪一个方向是旋转正方向呢？这里有一个技巧，就是<strong>左手准则</strong>，左手大拇指指向某一个轴的正方向，手指弯曲的方向就是旋转的正方向，反之就是反方向。</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/a3927612cdd2554e6fde70224af7c10e.png#pic_center"></p>
<pre><code class="language-html"><head>
<style>
body {
perspective: 500px;
}
img {
transition: all 1s;
}
img:hover:first-child {
transform: rotateX(45deg);
}
img:hover:nth-child(2) {
transform: rotateY(45deg);
}
img:hover:nth-child(3) {
transform: rotateZ(45deg);
}
img:hover:last-child {
transform: rotate3d(1,1,0,45deg);
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
<img src="./images/robod.png" alt="">
<img src="./images/robod.png" alt="">
<img src="./images/robod.png" alt="">
</body>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/62c103544f6f532bdea34ad2c581385a.gif#pic_center"></p>
<h3 id="3d呈现-transform-style">3D呈现 transform-style</h3>
<p>3D呈现就是用来控制子元素是否开启三维立体环境，默认是<strong>transform-style: flat</strong>(不开启)，如果想开启，可以修改为<code>transform-style: preserve-3d</code>。注意：<strong>代码是写给父元素的，但影响的子元素</strong>。</p>
<pre><code class="language-html"><head>
<style>
body {
perspective: 500px;
}
.box1 {
width: 200px;
height: 200px;
transition: all 2s;
transform-style: preserve-3d; /*和transform-style: flat*/
}
.box2 {
width: 100%;
height: 100%;
background-color: aqua;
transform: rotateX(45deg);
}
.box1:hover {
transform: rotateY(45deg);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</code></pre>
<p>上面代码中的例子，先看一下<strong>transform-style: flat</strong>的效果：</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/4898e3ab6dbf46013cec708c9cc2f0c7.gif#pic_center"></p>
<p>当鼠标移到上面的时候，先是由本来的绕x轴旋转45度的状态转换为普通的平面图，再由平面图绕y轴进行旋转，这显然不是我们想要的效果。</p>
<p>再来看看<strong>transform-style: preserve-3d</strong>的效果👇</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/338dd8c740b1b3204d2e07caf06cb75c.gif#pic_center"></p>
<p>现在就是三维的转换效果了，直接由绕x轴旋转45度的状态直接再绕y轴旋转45度。</p>
<h2 id="浏览器私有前缀">浏览器私有前缀</h2>
<p>浏览器私有前缀是为了兼容老版本的写法，比较新的版本的浏览器无须忝加。</p>
<ul>
<li><code>-moz-</code>：代表 firefox浏览器的私有属性</li>
<li><code>-ms-</code>：代表ie浏览器私有属性</li>
<li><code>-webkit-</code>：代表 safari、chrome私有属性</li>
<li><code>-o-</code>：代表Opera私有属性</li>
</ul>
<p>比如圆角属性就可以这样写👇</p>
<pre><code class="language-css">-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
</code></pre>
<h2 id="总结">总结</h2>
<p>好了，这就是我这段时间学习HTML5和CSS3所总结出来的一些知识点，一方面是怕我自己以后忘了可以拿来复习使用，另一方面也是希望可以帮助到一起学习的小伙伴们！</p>
<blockquote>
<p>码字不易，可以的话，给我来个<code>点赞</code>，<code>收藏</code>，<code>关注</code><br>
<br><br>
如果你喜欢我的文章，欢迎关注微信公众号 <strong>『 <font color="#4285f4">R</font> <font color="#ea4335">o</font> <font color="#fbbc05">b</font> <font color="#4285f4">o</font> <font color="#34a853">d</font> 』</strong><br>
<br><br>
本文已收录至我的Github仓库<strong>DayDayUP</strong>：github.com/RobodLee/DayDayUP，欢迎Star<br>
<br><br>
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐</p>
<p>原文链接：https://blog.csdn.net/weixin_43461520/article/details/113201713</p>
<p>⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐</p>
</blockquote>
<p><img src="https://gitee.com/RobodLee/image_store/raw/master/QRcode2.0.png"></p><br><br>
来源：https://www.cnblogs.com/robod/p/14332916.html
頁:
[1]