阅读 198

CSS基础(六)(HTML5+CSS3)

1. HTML5

1.1 HTML5 提高-新增语义化标签

HTML5 新特性有兼容性问题吗?IE 多少版本以上的浏览器才能支持?

  • HTML5 的新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持;

  • 如果不考虑兼容性问题,可以大量使用这些新特性。

HTML5 新增的语义化标签有什么好处?

  • 有利于搜索引擎搜索和网站的 SEO(Search Engine Optimization,搜索引擎优化)。

有哪些 HTML5 的语义化标签?分别可以用在布局的什么位置?

序号标签描述
1header头部标签,通常包含一组介绍性的或是辅助导航的实用元素
2nav导航标签,在当前文档或其他文档中提供导航链接
3article内容标签,表示文档、页面、应用或网站中的独立结构
4section定义文档的某个区域,没有更具体的语义
5aside侧边栏标签,表示一个和其余页面内容几乎无关的部分
6footer尾部标签,表示页脚
<!DOCTYPE html> <html> <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>1. HTML5 提高-新增语义化标签</title>     <style>         body {             position: relative;             width: 500px;             height: 400px;         }         header,         nav,         footer{             width: 500px;             height: 50px;             background-color: aqua;             margin-top: 10px;             border-radius: 10px;             text-align: center;             line-height: 50px;         }         article {             position: absolute;             top: 110px;             width: 245px;             height: 200px;             text-align: center;             line-height: 200px;             background-color: aqua;             margin-top: 10px;             border-radius: 10px;         }         section {             position: absolute;             top: 140px;             right: 45px;             width: 150px;             height: 50px;             line-height: 50px;             background-color: rgb(255, 255, 255);             border-radius: 10px;         }         aside {             position: absolute;             top: 120px;             right: 0px;             width: 245px;             height: 200px;             text-align: center;             line-height: 200px;             background-color: aqua;             border-radius: 10px;         }         footer {             position: absolute;             bottom: 20px;                   }     </style> </head> <body>     <header>头部标签</header>     <nav>导航标签</nav>     <article>内容标签         <section>定义文档的某个区域</section>     </article>     <aside>侧边栏标签</aside>     <footer>尾部标签</footer> </body> </html> 复制代码

image.png

1.2 HTML5 新增视频标签

HTML5 主要新增了哪两个多媒体标签?

  • video 视频标签

  • audio 音频标签

video 标签支持几种视频格式?推荐使用哪一种格式?

image.png

  • 推荐使用 mp4 格式的视频

video 标签是单标签还是双标签?img 标签呢?

  • video 是双标签,可以针对不同浏览器提供不同格式的视频;

  • img 是单标签,指定 src 既可以显示图像,不存在浏览器兼容问题。

   <video width="320" height="240" controls>        <source src="movie.mp4" type="video/mp4" />        <source src="movie.ogg" type="video/ogg" />           您的浏览器不支持 video 标签。    </video> 复制代码

video 标签提供了哪些控制播放的属性?

属性描述
srcurl要播放的视频的 URL。
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。(谷歌浏览器需要添加 muted 属性来解决自动播放问题)
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放(循环播放)。
mutedmuted如果出现该属性,视频的音频输出为静音
posterURL规定视频正在下载时显示的图像,直到用户点击播放按钮。
preloadauto none如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用,"autoplay",则忽略该属性。
widthpixels设置视频播放器的宽度。
heightpixels设置视频播放器的高度。

video 标签的宽高属性可以通过 CSS 控制吗?

  • 可以

1.3 HTML5 新增音频标签

audio 标签支持几种音频格式?推荐使用哪一种格式?

image.png

  • 推荐使用 mp3 格式的音频

audio 标签是单标签还是双标签?img 标签呢?

  • audio 是双标签,可以针对不同浏览器提供不同格式的音频;

  • img 是单标签,指定 src 既可以显示图像,不存在浏览器兼容问题。

     <audio controls>         <source src="horse.ogg" type="audio/ogg" />         <source src="horse.mp3" type="audio/mpeg" />           您的浏览器不支持 audio 元素。      </audio> 复制代码

audio 标签提供了哪些控制播放的属性?

属性描述
srcurl规定音频文件的 URL。
autoplayautoplay如果出现该属性,则音频在就绪后马上播放(谷歌浏览器禁止自动播放)。
controlscontrols如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。
looploop如果出现该属性,则每当音频结束时重新开始播放。
mutedmuted如果出现该属性,则音频输出为静音。
preloadauto / none规定当网页加载时,音频是否默认被加载以及如何被加载。

audio 标签的使用和 video 标签的使用有什么共同点?应该如何记忆和使用?

  1. 音频标签和视频标签使用方式基本一致

  2. 浏览器支持情况不同

  • 视频使用 mp4 格式

  • 音频使用 mp3 格式

  1. 谷歌浏览器禁用了音频和视频的自动播放

  • 视频标签添加 muted 属性来静音播放视频

  • 音频不可以(可以通过 JavaScript 解决)

  1. 视频标签是重点,我们经常设置自动播放,不使用 controls 控件,循环和设置大小属性。

<!DOCTYPE html> <html> <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>2. HTML5 新增音频/视频标签</title>     <style>     </style> </head> <body>     <video src="./media/mi.mp4" autoplay controls loop muted poster="./media/mi9.jpg" width="500px" height="100%"></video>     <audio controls>         <source src="./media/music.mp3" type="audio/mpeg">     </audio> </body> </html> 复制代码

1.4 HTML5 新增 input 表单

HTML5 为什么新增很多的表单 input 类型?

  • 方便程序员的开发,与表单域联用,不同的 input 类型能够自动添加校验功能;

  • 方便移动端的开发,不同的 input 类型,键盘的弹出方式不同。

需要重点记忆那三个 input 类型?

  • 需要重点记忆:numbertelsearch 三个 input 类型;

  • 常用输入类型:textpasswordradiocheckboxbuttonfilehiddensubmitreset

类型属性值描述
输入number限制用户必须输入数字类型
输入tel手机号码
输入search搜索框
输入email限制用户必须输入电子邮件类型
输入url限制用户必须输入网址类型
选择date限制用户必须输入日期类型
选择time限制用户必须输入时间类型
选择month限制用户必须输入类型
选择week限制用户必须输入星期类型
选择color弹出窗口选择颜色
<!DOCTYPE html> <html> <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>4.HTML5 新增 input 表单</title>     <style>         form {             width: 300px;             height: 500px;             background-color: rgb(66, 198, 216);         }         li {             list-style: none;             margin-top: 10px;         }         .div {             text-align: center;         }     </style> </head> <body>     <form action="#">         <ul>             <li>数量: <input type="number" /></li>             <li>号码: <input type="tel" /></li>             <li>搜索: <input type="search" /></li>             <li>邮箱: <input type="email" /></li>             <li>网址: <input type="url" /></li>             <li>日期: <input type="date" /></li>             <li>时间: <input type="time" /></li>             <li>月份: <input type="month" /></li>             <li>星期: <input type="week" /></li>             <li>颜色: <input type="color" /></li>           </ul>           <div>             <input type="submit" value="提交" />           </div>          </ul>     </form> </body> </html> 复制代码

效果图:

image.png

1.5 HTML5 新增表单属性

HTML5 新增了哪几个表单属性?分别有什么用处?

属性描述
requiredrequired表单拥有该属性表示内容不能为空,必填
placeholder提示文本表单的提示信息,存在内容将不显示
autofocusautofocus自动聚焦属性
autocompleteon / off是否应该启用自动完成功能。默认已经打开,需要放在表单内,同时加上 name 属性,同时成功提交过
multiplemultiple可以多选文件提交

HTML5 新增的表单属性哪些最常用?

  • placeholdermultiplerequired

如何修改 palceholder 的样式?

    input::placeholder {       color: pink;     } 复制代码

2. CSS3 选择器

2.1 CSS3 新增属性选择器(上)

新增的 CSS3 特性有兼容性问题吗?在开发中要使用吗?

image.png

  • CSS3 的新特性都有兼容性问题,IE9+ 以上版本的浏览器才支持;

  • 在开发中要使用,这是因为移动端支持优于 PC 端

选择器?

  • 属性选择器

  • 结构伪类选择器

  • 伪元素选择器

属性选择器的作用是什么?一定要记住的语法是什么?

  • 可以根据元素属性来选择元素。

  • 属性选择器语法

  • 可以根据元素属性来选择元素。

  • 属性选择器语法

    选择符描述
    E[att]选择具有 att 属性的 E 元素
    E[att="val"] ☆选择具有 att 属性且值等于 val 的 E 元素
    E[att^="val"]选择具有 att 属性且值以 val 开头的 E 元素
    E[att$="val"]选择具有 att 属性且值以 val 结尾的 E 元素
    E[att*="val"]选择具有 att 属性且值包含 val 的 E 元素

2.2 CSS3 新增属性选择器(下)

选择器权重
继承或 *0,0,0,0
标签选择器0,0,0,1
类选择器 / 属性选择器 / 伪类选择器0,0,1,0
id 选择器0,1,0,0
行内样式1,0,0,0
!important
<!DOCTYPE html> <html> <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>5. CSS3 新增属性选择器</title> </head> <style>     h4 {         color: rgb(43, 255, 0);     }     input[type] {         border: 1px solid red;     }     input[type="password"] {         background-color: cyan;     }     div[class^="i"] {         color: darkgreen;     }     section[class$="a"] {         color: red;     }     section[class*="3"] {         color: deepskyblue;     } </style> <body>     <h4>1. 利用属性选择器就可以不用借助于类或者id选择器</h4>     <input type="text" value="请输入用户名" />     <input type="text" />     <h4>2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的</h4>     <input type="text" name="" id="" />     <input type="password" name="" id="" />     <h4>3. 属性选择器可以选择属性值开头的某些元素</h4>     <div>小图标1</div>     <div>小图标2</div>     <div>小图标3</div>     <div>小图标4</div>     <div>我是打酱油的</div>     <h4>4. 属性选择器可以选择属性值结尾的某些元素</h4>     <section>我是安其拉</section>     <section>我是哥斯拉</section>     <section>哪我是谁</section> </body> </html> 复制代码

效果图:

image.png

2.3 CSS3 新增结构伪类选择器-选择第 n 个元素

结构伪类选择器的作用是什么?

  • 根据文档结构来选择器元素,常用于选择父级选择器里面的子元素

选择符描述
E:first-child匹配父元素中的第一个子元素 E
E:last-child匹配父元素中的最后一个子元素 E
E:nth-child(n) 匹配父元素中的一个或特定多个子元素 E
E:first-of-type匹配类型 E 的第一个
E:last-of-type匹配类型 E 的最后一个
E:nth-of-type(n)匹配类型 E 的第 n 个
n 可以是数字关键字公式

nth-child 的 n 是数字是从 0 开始还是从 1 开始?

  • 从 1 开始,数字是几就选择第几个孩子。

<!DOCTYPE html> <html> <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>6. 体会选择第 n 个元素的基本使用</title>     <style>         li {             list-style: none;         }         /* 匹配父元素中的第一个子元素 E */         ul li:first-child {             background-color: rgb(251, 255, 0);         }         /* 匹配父元素中的最后一个子元素 E */         ul li:last-child {             background-color: greenyellow;         }         /* 匹配父元素中的一个或特定多个子元素 E */         ul li:nth-child(4) {             background-color: grey;         }         /* 匹配类型 E 的第一个 */         ul li:first-of-type {             color: hotpink;         }         /* 匹配类型 E 的最后一个 */         ul li:last-of-type {             color: ivory;         }         /* 匹配类型 E 的第 n 个 */         ul li:nth-of-type(3) {             background-color: mediumspringgreen;         }     </style> </head> <body>     <ul>         <li>体会选择第 1 个元素的基本使用</li>         <li>体会选择第 2 个元素的基本使用</li>         <li>体会选择第 3 个元素的基本使用</li>         <li>体会选择第 4 个元素的基本使用</li>         <li>体会选择第 5 个元素的基本使用</li>     </ul> </body> </html> 复制代码

效果图:

image.png

2.4 CSS3 新增 nth-child 选择器(上)

nth-child 的 n 的可以使用哪些关键字?分别代表什么含义?

  • even 偶数

  • odd 奇数

nth-child 中可以使用 n 吗?表示什么含义?能用其他字母吗?

  • 直接使用 n 会选择所有孩子

  • n 表示从 0 开始,每次加 1,依次向后面计算,超出范围的元素会被忽略。

<!DOCTYPE html> <html> <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>7. 选择奇数元素和偶数元素的基本使用</title>     <style>         ul li:nth-child(even) {             background-color: grey;         }         ul li:nth-child(odd) {             color: springgreen;             list-style: none;         }         ol li:nth-child(n) {             color: red;         }     </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>         <li>第9选择奇数元素和偶数元素的基本使用</li>     </ul>     <ol>         <li>第1选择奇数元素和偶数元素的基本使用</li>         <li>第2选择奇数元素和偶数元素的基本使用</li>         <li>第3选择奇数元素和偶数元素的基本使用</li>         <li>第4选择奇数元素和偶数元素的基本使用</li>     </ol> </body> </html> 复制代码

效果图:

image.png

2.5 CSS3 新增 nth-child 选择器(下)

公式取值
2n偶数
2n + 1奇数
5n5、10、15...
n + 5从第 5 个开始(包含第 5 个)一直到最后
-n + 5前 5 个(包含第 5 个)
<!DOCTYPE html> <html> <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>8. 使用公式选择元素的基本使用</title>     <style>         ul li:nth-child(2n) {             background-color: rgb(230, 191, 191);         }         ul li:nth-child(2n+1) {             color: rgb(0, 153, 255);             list-style: none;         }         ul li:nth-child(5n) {             border: 3px dashed rgb(43, 255, 0);         }         ul li:nth-child(-n+3) {             border: 2px dashed rgb(255, 0, 170);             margin-top: -2px;         }     </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>         <li>第9使用公式选择元素的基本使用</li>         <li>第10使用公式选择元素的基本使用</li>         <li>第11使用公式选择元素的基本使用</li>         <li>第12使用公式选择元素的基本使用</li>     </ul> </body> </html> 复制代码

效果图:

image.png

2.6 nth-child 和 nth-of-type 的区别

nth-child 和 nth-of-type 有什么区别?

E:nth-child(n)

  • 会先把所有的盒子都排列序号

  • 首先根据 :nth-child(n) 找到孩子,再去看前面的 E 是否匹配。

E:nth-of-type(n)

  • 会把指定元素 E 的盒子排列序号

  • 首先看 E 指定的元素,之后再去看 :nth-of-type 的第几个孩子。

nth-child 和 nth-of-type 哪一个用的多?为什么?

  • nth-child

  • 开发时,结构伪类选择器大多用于无序列表 ul 或有序列表 ol

2.7 CSS3 新增伪元素选择器使用场景和由来

伪元素选择器的作用是什么?

  • 伪元素选择器可以利用 CSS 创建新标签元素,而不需要 HTML 标签,从而简化 HTML 结构

伪元素是真正意义的元素吗?

  • 伪元素不是真正意义的元素,是通过 CSS 创建的。

我们重点要学习哪两个伪元素?伪元素和伪类在语法上有什么区别?

::before 和 ::after

从语法结构上看

  • 伪元素使用 :: 开头,关键字内容

  • 伪类使用 : 开头,关键字状态

::before 和 ::after 属于行内元素吗?

  • 属于

::before 和 ::after 属于行内元素吗?

2.8 CSS3 新增伪元素选择器基本使用

::before 和 ::after 会在什么位置创建元素?

  • ::before 在父元素内容的前面插入元素;

  • ::after 在父元素内容的后面插入元素。

::before 和 ::after 必须要指定什么属性?

  • content 属性

伪元素选择器的权重是多少?

伪元素选择器的权重是 1

选择器权重
继承或 *0,0,0,0
标签选择器 / 伪元素0,0,0,1
类选择器 / 属性选择器 / 伪类选择器0,0,1,0
id 选择器0,1,0,0
行内样式1,0,0,0
!important
<!DOCTYPE html> <html> <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>9. CSS3 新增伪元素选择器基本使用</title>     <style>         div {             width: 296px;             height: 200px;             background-color: rgb(51, 255, 0);             text-align: center;         }         div::after {             display: inline-block;             content: "+基本使用";             width: 100px;             height: 50px;             background-color: red;         }         div::before {             display: inline-block;             content: "CSS3 新增+";             width: 100px;             height: 50px;             background-color: red;         }     </style> </head> <body>     <div>伪元素选择器</div> </body> </html> 复制代码

效果图: image.png

2.9 伪元素选择器使用场景 1-配合字体图标

<!DOCTYPE html> <html> <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>10. 伪元素选择器使用场景 1-配合字体图标</title>     <link rel="stylesheet" href="//at.alicdn.com/t/font_2824245_9x5s8cae03a.css">     <style>         div {             position: relative;             width: 400px;             height: 50px;             border: 1px solid red;         }         div::before {             position: absolute;             top: 15px;             right: 10px;             font-family: "iconfont";             content: "\e665";             color: red;             font-size: 18px;         }     </style> </head> <body>     <div></div> </body> </html> 复制代码

效果图: image.png

2.10 伪元素选择器使用场景 2-仿土豆效果

<!DOCTYPE html> <html> <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>11. 土豆案例</title>     <style>         .tudou {             position: relative;             width: 440px;             height: 320px;             background-color: #ccc;             margin: 30px auto;         }         .tudou img {             width: 100%;             height: 100%;         }         .tudou::before {             display: none;             position: absolute;             content: "";             top: 0;             left: 0;             width: 100%;             height: 100%;             background: rgba(0, 0, 0, 0.4) url(images/arr.png) no-repeat center;         }         .tudou:hover::before {             display: block;         }     </style> </head> <body>     <div>         <!-- <div></div> -->         <img src="./images/tudou.jpg" alt="">     </div> </body> </html> 复制代码

效果图:

image.png

2.11 伪元素选择器使用场景 3-伪元素清除浮动本质

四种清除浮动的方式

  1. 额外标签法也称为隔墙法,是 W3C 推荐的做法;

  2. 父级添加 overflow 属性;

  3. 父级添加 after 伪元素;

  4. 父级添加双伪元素。

清除浮动:在末尾添加一个块级元素,并增加 clear: both; 属性。

两种伪元素清除浮动的原理

两种伪元素清除浮动算是第一种额外标签法的一个升级优化

单伪元素

image.png

双伪元素清除浮动 image.png

3. CSS3 盒子模型

CSS3 中可以哪一个属性来指定盒子模型?

  • box-sizing

(重要)box-sizing 属性有几个值,设置了哪一个值之后,设置 paddingborder 不会影响盒子的大小?

  • content-box:盒子大小为 width + padding + border(以前默认的);

  • border-box:盒子大小为 width,设置 paddingborder 不会影响盒子的大小。

使用 CSS3 盒子模型可以避免布局中导航跳的情况。

  • 导航盒子和下方盒子挨在一起,鼠标经过 :hover 设置盒子的下边框。

  • padding 和 border 不要超过 width / height

<!DOCTYPE html> <html> <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>12. CSS3 盒子模型</title>     <style>         * {             margin: 0;             padding: 0;         }         div {             width: 400px;             height: 400px;             padding: 30px;             background-color: seagreen;             border: 4px solid red;             box-sizing: border-box;         }     </style> </head> <body>     <div>CSS3 盒子模型</div> </body> </html> 复制代码

效果图:

image.png

4. CSS3 其他特性

4.1 CSS3 图片模糊处理

CSS3 中给图片增加滤镜是哪一个属性?

  • filter 属性

这个属性的哪一个函数可以对图片做模糊处理?语法格式是什么?

  • blur 函数

语法:filter: blur(5px);

  • 数值越大越模糊

  • 数值为 0 最清晰(不做模糊处理)

<!DOCTYPE html> <html> <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>13. CSS3 图片模糊处理</title>     <style>         img {             filter: blur(5px);         }     </style> </head> <body>     <img src="./images/pink.jpg" alt=""> </body> </html> 复制代码

效果图:

image.png

4.2 计算盒子宽度 calc 函数

CSS3 可以使用哪一个函数计算盒子的宽度?应用场景是什么?

calc 函数;

  • width: calc(100% - 80px); 可以让子盒子永远比父盒子的宽度小 80px

  • 类似京东商城的商品列表下方的水平滚动条的宽度,可以用这种方法处理。

<!DOCTYPE html> <html> <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>14. 计算盒子宽度calc函数</title>     <style>         .f {             width: 200px;             height: 200px;             border: 2px solid red;                      }         .s {             width: calc(100% - 50px);             height: 30px;             margin: 20px auto;             border: 2px solid rgba(72, 255, 0, 0.301);         }     </style> </head> <body>     <div>         <div></div>     </div> </body> </html> 复制代码

效果图:

image.png

4.3 CSS3 新增属性过渡(上 / 下)

CSS3 中可以通过哪一个属性实现过渡动画效果?

  • transition

过渡动画的应用场景是什么?经常和什么一起搭配使用?

  • 是从一个状态渐渐的过渡到另外一个状态,从一个属性值,过渡到另外一个属性值;

  • 经常和 :hover 一起搭配使用,让页面更好看,且动感十足。

过渡动画的语法是什么?初期最应该记住哪一个?

transition: 要过渡的属性 动画时间 运动曲线 何时开始; 复制代码

  • 要过渡的属性:想要变化的 css 属性,可以是:宽度、高度、背景颜色、内外边距等(all 可以让所有能动画的属性一起过渡变化)

  • 动画时间:单位是(必须写单位),例如:0.5s

  • 运动曲线:默认是 ease(可以省略)

  • 何时开始:单位是(必须写单位),动画延迟触发时间,默认是 0s(可以省略)

使用过渡动画的口诀是什么?

  • 谁做过渡给谁加

4.4 CSS3 过渡练习

<!DOCTYPE html> <html> <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>15. CSS3 过渡练习.html</title>     <style>         .box {             width: 300px;             height: 200px;             background-color: chartreuse;             transition: background-color 1s ease 1s, width 0.5s, height ;         }         .box:hover {             width: 500px;             height: 500px;             background-color:crimson;         }     </style> </head> <body>     <div>             </div> </body> </html> 复制代码

4.5 CSS3 课堂作业 —— 小米 Logo

广义的 H5(了解)

  • 广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript。

  • 这个集合有时称为 HTML5 和朋友,通常缩写为 HTML5。

  • 虽然 HTML5 的一些特性仍然不被某些浏览器支持,但是它是一种发展趋势。

MDN 参考链接:developer.mozilla.org/zh-CN/docs/…。


作者:卡耐
链接:https://juejin.cn/post/7028732131111075871


文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐