HTML5与CSS3的新特性。

HTML5与CSS3的新特性

1、HTML5新特性

1.1、新特性的兼容问题

HTML5的新增特性主要是针对以前的不足,增加了一些新的标签、新的表单新的表单属性等。

这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。

1.2、HTML5新增的语义化标签

以前布局,我们基本使用div来做,div对于搜索引擎来说,是没有语义的。例如:

<!--指明导航链接, 头部, 以及尾部等,以前都是我们自定义,没有语义-->
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

所以为了使元素能够清楚的描述其意义给浏览器和开发者,HTML5新增了语义元素,也叫语义化标签。常用的有以下几个:

  1. <header>:头部标签
  2. <nav>:导航标签
  3. <article>:内容标签
  4. <section>:定义文档某个区域
  5. <aside>:侧边栏标签
  6. <footer>:尾部标签
    在这里插入图片描述

例如:

<!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>
        header,nav {
            width: 900px;
            height: 90px;
            background-color: rgb(120, 185, 21);
            border-radius: 15px;
            margin: 10px auto;
        }
        section {
            width: 500px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
<body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>某个区域</section>
</body>
</html>

效果图:
在这里插入图片描述
注意:

  • 这种语义化标签主要是针对搜索引擎
  • 这些新标签页面中可以使用多次
  • 在IE9中,需要把这些元素转换为块级元素,因为在IE9中新标签默认不是块级元素
  • 其实,我们一定端更喜欢使用这些标签
  • HTML5中还增加了很多其他的标签,以后接触到时,可自行学习

更多可查看菜鸟教程:https://www.runoob.com/html/html5-intro.html

1.3、HTML5新增的多媒体标签

新增的多媒体标签主要包含如下两个:

  1. <video>视频
  2. <audio>音频

使用它们可以很方便的在页面中嵌入音频和视频,而不是再去使用flash和其他浏览器插件。

HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然支持的格式是有限的。

1、视频<video>标签的使用:

<video> 标签定义视频,比如电影片段或其他视频流。

目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。
在这里插入图片描述

  1. MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
  2. WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
  3. Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

语法:

<video src="文件地址" controls="controls"></video>

<!--也可以这样书写,先看浏览器支不支持mp4,不支持再看ogg,在不支持就显示您的浏览器不支持 video 标签。 元素。-->
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

可选属性:

属性描述
autoplayautoplay视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controlscontrols向用户显示播放控件
widthpixels(像素)设置播放器宽度
heightpixels(像素)设置播放器高度
looploop播放完是否继续播放该视频,循环播放
preloadauto(预先加载视频)
none(不应加载视频)
规定是否预加载视频(如果有了autoplay 就忽略该属性)
srcurl视频URL地址
posterimgrul加载等待的画面图片
mutedmuted静音播放

使用示例:小米官网小米11视频。

<!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>
        video {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <video 
      src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11/section2-1.mp4" 
      autoplay="autoplay" 
      muted="muted"
      controls="controls"
      loop="loop"
      poster="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11/section2-1.png"
    ></video>
</body>
</html>

2、音频<audio>标签的使用:

<audio>·标签定义声音,比如音乐或其他音频流。

目前,<audio>元素支持的3种文件格式:MP3、Wav、Ogg。
在这里插入图片描述
语法:

<audio src="文件地址" controls="controls"></audio>

<!-- 另一种写法,依次判断浏览器支持的格式 -->
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

提示:可以在 <audio></audio>之间放置文本内容,这些文本信息将会被显示在那些不支持 <audio>标签的浏览器中。

常见属性:

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

注意:谷歌浏览器吧音频和视频自动播放禁止了。

案例:

<!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>
</head>
<body>
    <!--注意此标签是行内元素-->
    <audio 
      src="https://webfs.yun.kugou.com/202103031105/0e19f0d587042c37572df689e419d9ef/KGTX/CLTX001/f8784ebfbae36b324ec1e3441b6156b4.mp3"
      autoplay="autoplay"
      controls="controls"
    ></audio>
    <audio 
      src="https://webfs.yun.kugou.com/202103031105/0e19f0d587042c37572df689e419d9ef/KGTX/CLTX001/f8784ebfbae36b324ec1e3441b6156b4.mp3"
      autoplay="autoplay"
      controls="controls"
    ></audio>
</body>
</html>

效果图:
在这里插入图片描述
多媒体标签总结:

  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频或音频标签添加muted属性来静音播放视频或音频。
  • 视频标签是重点,我们经常设置自动播放,不使用controls控件,循环和设置大小属性。

1.4、HTML5新增的 input 类型

在小米官网中搜索框里的type类型变成了search,在 HTML5中, <input>添加了几个属性,并且添加了对应的值。

更多属性可查看菜鸟教程:https://www.runoob.com/tags/tag-input.html
在这里插入图片描述
例如:新增加常用的属性值有

属性值说明
type=“email”限制用户输入必须为Email类型
type=“url”限制用户输入必须为URL类型
type=“date”限制用户输入必须为日期类型
type=“time”限制用户输入必须为时间类型
type=“month”限制用户输入必须为月类型
type=“week”限制用户输入必须为周类型
type=“number”限制用户输入必须为数字类型
type=“tel”手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单

案例:测试以上属性值

<!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>
        ul li {
            list-style: none;
        }
    </style>
</head>
<body>
    <!-- 我们验证的时候必须添加 form 表单域 -->
    <form action="#" method="get">
        <ul>
            <li>
                邮箱:<input type="email">
            </li>
            <li>
                URL:<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="number">
            </li>
            <li>
                搜索:<input type="search">
            </li>
            <li>
                颜色表:<input type="color">
            </li>
            <li>
                手机号码:<input type="tel">
            </li>
            <!-- 当我们提交时,即可验证输入类型是否正确 -->
            <li>
                <input type="submit" value="提交"></input>
            </li>
        </ul>
    </form>
</body>
</html>

验证条件:

  1. 在form表单域内
  2. 提交时才会看到验证效果

在这里插入图片描述

1.5、HTML5新增的表单属性

属性说明
requiredrequired表单拥有该属性表示其内容不能为空,必填
placeholder提示文本表单的提示信息,存在默认值将不显示
autofocusautofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
autocompleteoff / on当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
默认已经打开,如autocomlete="on",关闭autocomlete="off"需要放在表单内,同时加上name属性,同时成功提交
multiplemultiple可以多选文件提交
/* 可以通过以下设置方式修改placeholder里面的字体颜色 */
input::placeholder {
    color: blue;
}

测试:

<!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>
        input::placeholder {
            color: blue;
        }
    </style>
</head>
<body>
    <form action="" method="get">
        <!-- 
            required: 输入框内容必须书写 
            placeholder: 提示文本 
            autofocus: 自动获取聚焦
        -->
        <input type="search" required="required" placeholder="手机" autofocus="autofocus" autocomplete="off">
        <input type="file" multiple="multiple">
        <input type="submit" value="提交">
    </form>
</body>
</html>

效果图:
在这里插入图片描述

2、CSS3新特性

2.1、CSS3的现状

首先需要注意的一点就是CSS3已完全向后兼容,所以我们就不必改变现有的设计。浏览器将永远支持CSS2。其次新增的CSS3特性有兼容性问题,IE9+的浏览器才支持。

CSS3被拆分为 “模块”。旧规范已拆分成小块,还增加了新的特性。

一些最重要CSS3新特性如下:

  • 选择器
  • 盒子模型
  • 背景和边框
  • 文字特效
  • 2D/3D转换
  • 动画
  • 多列布局
  • 用户界面

2.2、CSS3新增的选择器

CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。

  1. 属性选择器
  2. 结构伪类选择器
  3. 伪元素选择器

2.2.1、属性选择器

属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或者id选择器。

语法:

选择符描述
E[attr]选择具有 attr属性 的 E 元素
E[attr=“value”]选择具有 attr属性 且属性值等于value的 E 元素
E[attr^=“value”]匹配具有 attr属性 且值以value开头的 E 元素
E[attr$=“value”]匹配具有 attr属性 且值以value结尾的 E 元素
E[attr*=“value”]匹配具有 attr属性 且值中含有value的 E 元素

注意:类选择器、属性选择器、伪类选择器,权重为10。

使用测试:

<!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>
        /* 属性选择器写法,选择input标签有value属性的元素 */
        input[value] {
            background-color: skyblue;
        }
        /* 选择input标签type属性等于password的元素 */
        input[type="password"] {
            color: red;
        }
        /* 选择div标签class属性值以icon开头的元素 */
        div[class^="icon"] {
            color: red; /* 统一设置为红色 */
        }
    </style>
</head>
<body>
    <!-- 1.利用书写选择器可以不用借助于类或者id选择器 -->
    <input type="text" value="hello">
    <input type="text"><br>
    <!-- 2.属性选择器还可以选择属性 = 值的某些元素 -->
    <input type="text">
    <input type="password" placeholder="密码">
    <!-- 3.属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
    <!-- 可以自己测试 -->
</body>
</html>

效果图:
在这里插入图片描述

2.2.2、结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素,常用于根据父级元素里面的子元素。

语法:

选择符描述
E:first-child匹配父元素中的第一个子元素 E
E:last-child匹配父元素中最后一个子元素 E
E:nth-child(n)匹配父元素中的第 N 个子元素 E
E:first-of-type指定类型 E 的第一个
E:last-of-type指定类型 E 的最后一个
E:nth-of-type(n)指定类型 E 的第 N 个

关于first-childlast-childnth-child(n)的测试:

<!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>
        /* 选择ul里的第1个子元素 */
        ul li:first-child {
            color: red;
        }
        /* 选择ul里的最后一个子元素 */
        ul li:last-child {
            color: blue;
        }
        /* 选择ul里的第3个子元素 */
        ul li:nth-child(3) {
            color: chartreuse;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是ul的第1个孩子</li>
        <li>我是ul的第2个孩子</li>
        <li>我是ul的第3个孩子</li>
        <li>我是ul的第4个孩子</li>
        <li>我是ul的第5个孩子</li>
    </ul>
</body>
</html>

效果图:
在这里插入图片描述
nth-child(n)选择某个父元素的一个或多个特定的子元素。

  • n 可以是数字,关键字和公式
  • n 如果是数字,就是选择第n个子元素,里面数字从1开始。
  • n 可以是关键字!例如even代表所有偶数,odd代表所有奇数。
  • n 可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
公式取值
2n偶数
2n + 1奇数
5n5 10 15 …
n + 5从第5个开始(包含第5个)到最后
-n + 5前5个(包含第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、选择ul里的偶数子标签 */
        ul li:nth-child(even) {
            background-color: rgb(207, 202, 202);
        }
        /* 2、选择ul里的奇数子标签 */
        ul li:nth-child(odd) {
            background-color: rgb(167, 157, 157);
        }
        /* 3、nth-child(2n) 等效于 nth-child(even) 从0开始每次加1往后面计算。这里面必须是n 不能是其他的字母 */
        ol li:nth-child(2n) {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是ul的第1个孩子</li>
        <li>我是ul的第2个孩子</li>
        <li>我是ul的第3个孩子</li>
        <li>我是ul的第4个孩子</li>
        <li>我是ul的第5个孩子</li>
    </ul>
    <ol>
        <li>我是ul的第1个孩子</li>
        <li>我是ul的第2个孩子</li>
        <li>我是ul的第3个孩子</li>
        <li>我是ul的第4个孩子</li>
        <li>我是ul的第5个孩子</li>
    </ol>
</body>
</html>

效果图:
在这里插入图片描述
关于first-of-typelast-of-typenth-of-type(n)的测试:

值得注意的是。如果子元素类型都相同first-of-typelast-of-typenth-of-type(n)first-of-typelast-of-typenth-of-type(n)最终呈现的效果是一样的。但是实现的方式有所区别。

<!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>
        /* nth-child(n) 会把所有的盒子都排列序号。执行的时候首先看是第几个"孩子",之后回去看指定的元素div */
        section div:nth-child(1) {
            background-color: red;
        }
        /* nth-of-type(n):会把指定元素(div)的盒子排列序号。执行的时候首先看指定的元素div,之后回去看是第几个"孩子" */
        section div:nth-of-type(1) {
            background-color: springgreen;
        }
    </style>
</head>
<body>

    <section>
        <p>Java</p>
        <div>Python</div>
        <div>C/C++</div>
    </section>
</body>
</html>

效果图:
在这里插入图片描述
小结:

  • 结构伪类选择器一般用于选择父级里面的第几个孩子
  • nth-child对付元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和 E 匹配
  • nth-of-type对父元素里面指定子元素进行排序选择。先去匹配 E ,然后再根据 E找第 n 个孩子
  • 关于 nth-child(n)我们要知道 n 是从0开始计算的,要记住常用的公式。
  • 如果是无序列表,我们肯定用nth-child更多
  • 类选择器、属性选择器、伪类选择器、权重为10

2.2.3、伪元素选择器(重点)

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

常见的选择符:

选择符描述
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容

注意:

  • beforeafter创建一个元素,但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的,所以我们称之为伪元素
  • 语法:element::before { /* 样式 */}
  • beforeafter必须有content属性
  • before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
  • 伪元素选择器标签选择器一样,权重为1

伪元素选择器的基本使用

<!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: skyblue;
        }
        div::before {
            content: "Java"; /* content属性必须要写 */
            color: red;
        }
        div::after {
            content: "JavaScript";
            color: blue;
        }
    </style>
</head>
<body>
    <div>hello</div>
</body>
</html>

效果图:
在这里插入图片描述
伪元素选择器使用场景1:伪元素字体图标
在这里插入图片描述
代码实现:

<!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>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?7mwi7k');
            src: url('fonts/icomoon.eot?7mwi7k#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?7mwi7k') format('truetype'),
                url('fonts/icomoon.woff?7mwi7k') format('woff'),
                url('fonts/icomoon.svg?7mwi7k#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid black;
            margin: 50px auto;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 18px;
            font-family: 'icomoon';
            /* content: ""; */
            content: "\e900";
        }
    </style>
</head>

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

</html>

伪元素选择器使用场景2:仿土豆遮罩层效果。
在这里插入图片描述
代码实现:

<!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 {
            position: relative;
            width: 402px;
            height: 224px;
            margin: 100px auto;
        }
        .box img {
            width: 100%;
            height: 100%;
        }
        .box::before {
            content: "";
            position: absolute;
            display: none; /* 隐藏遮罩层 */
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5) url('./images/arr.png') no-repeat center;
        }
        /* 当鼠标经过这个盒子,就让里面的遮罩层显示出来 */
        .box:hover::before {
            display: block; /* 鼠标经过显示元素 */
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="https://m.ykimg.com/054F010160226EA4047BD7AA7DE68228?x-oss-process=image/resize,w_490/crop,x_0,y_0,w_490,h_276" alt="熊出没">
    </div>
</body>
</html>

伪元素选择器使用场景3:伪元素清除浮动

清除浮动的方法回顾:

  1. 父级添加 overflow属性
  2. 父级添加after伪元素
  3. 父级添加双伪元素
  4. 额外标签法也称为隔墙法,是W3C推荐的做法

使用伪元素清除浮动与额外标签法清除浮动的原理是一样的,伪元素法算是额外标签法的一个升级与优化。

/* 单冒号是照顾低版本浏览器 */
.clearfix:after {
	content: "";
	display: block; /* 插入的元素必须是块级的 */
	height: 0; /* 隐藏元素 */
	clear: both; /* 核心代码 */
	visibility: hidden; /* 隐藏元素 */
}

2.3、CSS3盒子模型

在CSS3之前,我们声明的盒子如果加了borderpadding,都会撑大我们的盒子!此时我们需要适当的减去borderpadding才能保证我们盒子原来的大小,这一过程非常的麻烦!
在这里插入图片描述

所以在css3中有了新的盒子模型去解决这一问题。

CSS3中可以通过box-sizing来指定盒子模型,有2个值:

  1. content-box
  2. border-box

这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况:

  1. box-sizing: content-box;盒子大小为 width + padding + border (以前默认的就是需要减去border与padding的方式)
  2. box-sizing: border-box;盒子大小为width

如果盒子模型我们改为了box-sizing: border-box,那padding和border就不会撑大盒子了(前提是padding和border相加不会超过width宽度)

例如:

<!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>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            border: 20px solid red;
            padding: 10px;
            box-sizing: content-box; /* 默认方式 */
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            border: 20px solid red;
            padding: 10px;
            box-sizing: border-box; /* 指定border-box方式,即width就是盒子大小 */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <hr>
    <div class="box2"></div>
</body>
</html>

效果图:
在这里插入图片描述

2.4、CSS3图片模糊处理(了解)

css3中过滤属性filter

filter css属性将模糊或颜色偏移等图形效果应用于元素。

语法:

filter: 函数(); /* 例如:filter: blur(5px); blur模糊处理,数值越大越模糊*/

更多可使用函数可查看菜鸟教程:https://www.runoob.com/cssref/css3-pr-filter.html

例如:图片的模糊处理我们可以使用blur()函数
在这里插入图片描述
代码实现:

<!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 img {
            filter: blur(3px); /* 图片模糊处理,数值越大越模糊 */
        }
    </style>
</head>
<body>
    <h5>处理前:</h5>
    <img src="./image/c.jpg" alt="">
    <h5>处理后:</h5>
    <div>
        <img src="./image/c.jpg" alt="">
    </div>
</body>
</html>

2.5、计算盒子宽度calc()函数

calc()此css函数让你在声明css属性值时执行一些计算。

例如:

width: calc(100% - 80px);

括号里可以使用+ - * /来进行计算。

例如:有这样一个需求子盒子宽度永远比父盒子小30像素!我们就可以使用calc()函数去计算子盒子的宽度。

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

2.6、CSS3过渡(重点)

过渡(transition)是css3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或者 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画:是从一个状态渐渐的过渡到另外一个状态。

可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持(IE9以下的版本),但是不会影响页面布局。

我们先在经常和:hover一起搭配使用。

例如:在小米官网中的小米logo,当鼠标经过时会有一个过渡动画!
在这里插入图片描述
transition的使用语法:

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

/* 默认值 */
transition: all 0 ease 0; /* 注意不可以继承 */
  1. 属性:想要变化的 css 属性,宽度高度 背景颜色 内外边距都可。如果想要所有的属性都变化过渡,写一个 all就可以了。
  2. 花费时间:单位是秒(必须填写单位)比如 0.5s
  3. 运动曲线:默认是ease(可以省略)
  4. 何时开始:单位是秒(必须填写单位)可以设置延迟触发时间默认是 0s(可以省略)

那么过渡要加在哪里呢?记住一个口诀:谁做过渡给谁加

案例:将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 200px 到 400px。

<!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: 100px;
            background-color: skyblue;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            transition: width 0.5s; /* 后面两个可以省略 */
        }
        div:hover {
            width: 400px;
        }
    </style>
</head>
<body>
    <div>

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

如果需要同时改变多个属性,可以这样书写(使用逗号隔):

div {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
    transition: width 0.5s,height 0.5s;
    /* transition: all 0.5s */
}
div:hover {
    width: 400px;
    height: 200px;
}

过渡(transition)的使用案例:实现进度条效果。

在这里插入图片描述
代码实现:

<!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>
        .bar {
            width: 200px;
            height: 10px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px 0;
        }
        .bar .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            transition: width 0.7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in">

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

3、CSS3 新特性之动画属性

3.1、CSS3 2D转换

转换transform)是css3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。
在这里插入图片描述
当然所谓的转换我们也可以理解为变形,具体的变形属性有:

  1. 移动(translate)
  2. 旋转(rotate)
  3. 缩放(scale)

3.1、什么是2D转换?

2D转换是改变标签在二维平面上的位置和形状的一种技术,在这之前我们先要了解二维坐标系

所谓的二维坐标系又与我们数学中的坐标系有点不一样!
在这里插入图片描述
2、2D 转换之移动(translate)

2D 移动是 2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位
在这里插入图片描述
语法:

transform: translate(x,y);
/* 或者分开写 */
transform: translateX(n); /* n 也可以是百分比单位(相对于自身而言)*/
transform: translateY(n);

实例:

/* 
    移动一个盒子我们有三种选择方案:
        1.定位
        2.盒子的外边距
        3.2D转换-移动
*/
.box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform: translate(100px,50px); /* x轴方向移动 100px,y轴方向移动 50px*/
    
    /* 1.如果我们只移动 x坐标 */
    transform: translate(20px,0);
    /* 或者 */
    transform: translateX(20px);
    /* 2.移动 y坐标同理 */
}

小结:

  1. 定义 2D 转换中的移动,沿着 x 和 y 轴移动元素
  2. translate最大的优点:不会影响到其他元素的位置
  3. translae中的百分比单位是相对于自身元素的。如transform: translate(50%,50%);
  4. 对行内标签没有效果

例如:

<!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;
        }
        div:first-child {
            transform: translate(30px,30px);
            background-color: springgreen;
        }
        div:last-child {
            background-color: violet;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

效果图:
在这里插入图片描述
3、2D 转换之旋转

2D旋转指的是让元素在2维平面内顺时针旋转或逆时针旋转
在这里插入图片描述
语法:

transform: rotate(ndeg); /* 旋转n度,deg为旋转单位 */

实例:

<!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 {
            width: 200px;
            height: 200px;
            /* 顺时针旋转 45度,负值就是逆时针 */
            transform: rotate(45deg);
            margin: auto;
        }
        .box img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./image/pig.jpeg" alt="">
    </div>
</body>
</html>

效果:
在这里插入图片描述
配合过渡属性,我们可以做出意想不到的效果:

<!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 {
            width: 200px;
            height: 200px;
            /* 顺时针旋转 45度,负值就是逆时针 */
            transform: rotate(45deg);
            margin: auto;
        }
        .box img {
            width: 100%;
            height: 100%;
            border: 2px solid purple;
            border-radius: 50%;
        }
        .box:hover img {
            transform: rotate(360deg);
            /* 过渡写到本身上,谁做动画给谁加 */
            transition: all 0.5s;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <img src="./image/pig.jpeg" alt="">
    </div>
</body>
</html>

鼠标移动图片上(旋转360度):
在这里插入图片描述
小结:

  1. rotate里面跟度数,单位是deg 比如 rotate(45deg)
  2. 角度为正时,顺时针。负值时,为逆时针。
  3. 默认旋转的中心点是元素的中心点。

实例:不使用字体图标实现盒子内的小三角形(设置下边框和右边框、旋转45度)
在这里插入图片描述
代码实现:

<!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 {
            position: relative;
            width: 200px;
            height: 30px;
            border: 1px solid #000;
        }
        .box::after {
            position: absolute;
            content: "";
            top: 6px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
        }
        /* 鼠标经过时,小三角倒转 */
        .box:hover::after {
            /* transition: all 0.5s; */
            transform: rotate(225deg);
        }
    </style>
</head>
<body>
    <div class="box">

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

4、设置旋转中心点(transform-origin)

经过上面的学习,2D旋转元素是,默认中心点就是元素的中心点,但是我们也可以通过transform-origin属性设置元素旋转的中心点!

语法:

transform-origin: x y;

注意:

  1. 参数 x 和 y 是用空格隔开
  2. x y 默认转换的中心点是元素的中心点 (50% 50%)
  3. 还可以给 x y 设置像素、方位名词(top bottom left right center)

实例1:把旋转中心点设置成左下角。

<!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 {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            margin: auto;
            transition: all 0.5s;
            /* 1.可以是方位名词 */
            transform-origin: left bottom; /* 左下角 */
            /* 2.默认是 50% 50%等价于 center center */
            /* 3.还可以是像素 */
        }
        .box:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="box">

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

实例2:鼠标移到盒子后,实现动态切换效果。
在这里插入图片描述
代码实现:

<!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 {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid rebeccapurple;
            margin: auto;
        }
        .box::after {
            content: "alex";
            display: block;
            width: 100%;
            height: 100%;
            background-color: royalblue;
            transform-origin: left bottom;
            transform: rotate(180deg);
            transition: all 0.5s;
        }
        .box:hover::after {
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div class="box">

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

5、2D 转换之缩放 scale

缩放,顾明思议,可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法:

transform: scale(x,y);

注意:

  1. 参数 x 和 y 用逗号分隔
  2. transform: scale(1,1)宽和高都放大一倍,相对于没有放大。
  3. transform: scale(2,2)宽和高都放大了2倍
  4. transform: scale(2);只写一个参数,第二个参数则和第一个参数一样,相当于scale(2,2)
  5. transform: scale(0.5,0.5);缩小
  6. scale锁放最大的优势,可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子

实例1:

<!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 {
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            margin: auto;
        }
        .box:hover {
            /* 1.transform: scale(x,y); 里面写的数字不跟单位,就是倍数的意思 */
            transform: scale(2); /* 等价于 transform: scale(2,2);*/
            /* 2.修改了宽度为原来的2倍,高度不变 */
            /* transform: scale(2,1); */
            /* 3.我们可以进行缩小,小于1就是缩放 */
            /* transform: scale(0.5,0.5); 或者 transform: scale(0.5); */
            /* 
            4.scale()的优点: 
                1.不会影响其他的盒子
                2.可以设置缩放的中心点
            */

        }
    </style>
</head>
<body>
    <div class="box">

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

实例2:鼠标经过后实现图片的缩放效果

<!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 {
            /* overflow: hidden; */
            width: 100px;
            height: 100px;
            float: left;
            margin: 10px;
        }
        div img {
            width: 100%;
            height: 100%;
            border: 1px solid rebeccapurple;
        }
        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div>
        <img src="./image/pig.jpeg" alt="">
    </div>
    <div>
        <img src="./image/pig.jpeg" alt="">
    </div>
    <div>
        <img src="./image/pig.jpeg" alt="">
    </div>
</body>
</html>

实例3:分页按钮
在这里插入图片描述
代码实现:

<!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>
        ul li {
            float: left;
            width: 30px;
            height: 30px;
            list-style: none;
            border: 2px solid green;
            border-radius: 50%;
            font-size: 20px;
            margin: 10px 10px;
            text-align: center;
            line-height: 30px;
        }
        ul li:hover {
            transform: scale(1.1);
        }
    </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>
    </ul>
</body>
</html>

6、2D 转换综合写法

综合写法注意点:

  1. 同时使用多个转换,其格式为transform: translate() rotate() scale()
  2. 其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
  3. 当我们同时有位移和其他属性的时候,记得要将位移放到最前

例如:

<!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 {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            transition: all 0.5s;
            margin: auto;
        }
        .box:hover {
            /* 我们同时有位移和其他属性,我们需要把位移放在最前面 */
            transform: translate(150px,50px) rotate(180deg) scale(1.2);
        }
    </style>
</head>
<body>
    <div class="box">

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

2D 转换总结:

  1. 转换transform我们简单理解就是变形有 2D 和 3D之分
  2. 我们暂且学了三个分别是 位移、旋转、缩放
  3. 2D移动translate(x,y)最大的优势是不影响其他盒子,里面参数用%,是相对于自身宽度和高度来计算的
  4. 可以分开写比如translateX(x)translateY(y)
  5. 2D转换rotate(度数),可以实现旋转元素,度数的单位是deg
  6. 2D缩放sacle(x,y),里面参数是数字 不跟单位、可以是小数,最大的优势不影响其他盒子
  7. 设置转换中心点transform-origin: x y;参数可以百分比,像素或者是方位名词
  8. 当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前。

3.2、CSS3动画

动画(animation)也是css3中具有颠覆性的特征之一,可通过设置多个节点精确控制一个或一组动画,常用来实现复杂的动画效果。

相较于过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

3.2.1、动画的基本使用

制作动画分为两步:

  1. 先定义动画
  2. 在使用(调用)动画

语法(定义):使用keyframes定义动画(类似于定义类选择器)

@keyframes 动画名称 {
	0% {
		width: 100px; /* 0%:动画序列(总时间的划分) */
	}
	100% {
		width: 200px; /* 也可以使用 from to 代替*/
	}
}

语法(使用):元素使用动画

div {
	/* 调用动画 */
	animation-name: 动画名称;
	/* 持续时间 */
	animation-duration: 持续时间;
}

动画序列:

  1. 0%是动画的开始100%是动画的完成。这样的规则就是动画序列。
  2. @keyframes中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果
  3. 动画是使元素从一种样式逐渐变化为另一种样式的效果、我们可以改变任意多的样式任意多的次数
  4. 请用百分比来规定变化发生的时间,或用关键字fromto,等同于0%100%

实例1:

<!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>
        /* 我们想页面一打开,一个盒子就从左边走到右边 */
        /* 定义动画 */
        @keyframes move {
            /* 开始状态 */
            from {
                transform: translate(0px,0px);
            }
            /* 动画结束状态 */
            to {
                transform: translate(1200px,0px);
            }
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

实例2:

<!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.可以做多个状态的变化 keyframe 译为 关键帧 */
        /* 2.里面的百分比,必须是整数 */
        /* 3.里面的百分比就是 总时间(我们这个案例10s) 的划分 */
        @keyframes move {
            0% {
                transform: translate(0px,0px);
            }
            25% {
                transform: translate(1200px,0px);
            }
            50% {
                transform: translate(1200px,500px);
            }
            75% {
                transform: translate(0px,500px);
            }
            100% {
                transform: translate(0px,0px);
            }
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            /* 动画名称 */
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3.2.2、动画的基本属性

1、常用属性

属性描述
@keyframes规定动画
animation所有动画属性的简写属性 ,除了animation-play-state
animation-name规定@keyframes动画的名称(必须的)
animation-duration规定动画完成一个周期所花费的秒或毫秒,默认是0(必须的)
animation-timing-function规定动画的速度曲线,默认是ease
animaton-delay规定动画何时开始,默认是0
animation-iteration-count规定动画被播放的此时,默认是1,还有infinite
animation-direction规定动画是否在下一个周期逆向播放,默认是normalalternate是逆播放
animation-play-state规定动画是否正在运行或暂停,默认是running,还有paused
animation-fill-mode规定动画结束后保持状态,保持forwards回到起始backwards

如:

<!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>
        @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>

2、简写属性

语法:

/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向播放 动画起始或者结束的状态;
/* 前面两个属性一定要写 */

如:

animation: myfirst 5s linear 2s infinite alternate;

注意:

  1. 简写属性里不包含animation-play-state
  2. 暂停动画:animation-play-state: puased;经常和鼠标经过等其他配合使用
  3. 想要动画回来,而不是直接跳回来:animation-direction: alternate
  4. 盒子动画结束后,停在结位置:animation-fill-mode: forwards

实例:热点图
在这里插入图片描述
代码实现:

<!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>
        body {
            background-color: rgb(78, 76, 76);
        }
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url("image/map.png") no-repeat;
            margin: auto;
        }
        .map .city {
            position: absolute;
            top: 227px;
            right: 192px;
            color: #fff;
        }
        .map .city .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        .map .city div[class^="pulse"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #09f;
            border-radius: 50%;
            animation: pulse 1s linear infinite;
        }
        @keyframes pulse {
            0% {

            }
            70% {
                width: 40px;
                height: 40px;
                opacity: 1; /* 透明度 */
            }
            100% {
                width: 60px;
                height: 60px;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2" style="animation-delay: 0.4s;"></div>
            <div class="pulse3" style="animation-delay: 0.8s;"></div>
        </div>
    </div>
</body>
</html>

3、速度曲线细节

animation-timing-function: 规定动画的速度曲线;默认是ease

描述
linear动画从头到尾的速度是相同的。匀速
ease默认。动画以低速开始,然后加快,在结束前变慢
ease-in动画以低速开始
ease-out动画以低速结束
ease-in-out动画以低速开始和结束
steps()指定了时间函数中的间隔数量(步长)

如:

<!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 {
            width: 0;
            height: 30px;
            background-color: blueviolet;
            font-size: 20px;
            /* steps 就是分几步来完成我们的动画,有了steps 就不要在写 ease 或者 linear了 */
            animation: w 4s steps(10) forwards;
            overflow: hidden;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
        }
        @keyframes w {
            0% {

            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="box">我是乘风破浪的程序员</div>
</body>
</html>

实例1:奔跑的大熊。

素地址:https://gitee.com/xiaoqiang001/html_css_material/blob/master/CSS3%E8%BF%9B%E9%98%B6%E7%B4%A0%E6%9D%90-%E5%8C%85%E5%90%AB%E5%B0%8F%E7%86%8A%E5%8A%A8%E7%94%BB.rar
在这里插入图片描述
代码实现:

<!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>
        body {
            background-color: #ccc;
        }
        .box {
            position: absolute;
            width: 200px;
            height: 100px;
            margin: 100px auto;
            background: url("image/bear.png") no-repeat;
            /* 我们元素可以添加多个动画,用逗号分隔 */
            animation: run 2s steps(8) infinite,move 3s forwards;
        }
        @keyframes run {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        @keyframes move {
            from {
                left: 0;
            }
            to {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>
<body>
    <div class="box">

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

3.3、CSS3 3D转换

我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。

3D特点:

  1. 近大远小
  2. 物体后面遮挡不可见

当我们在网页上构建3D效果的时候参考这些特点就能制作出3D效果。3D转换我能主要学习工作中最常见的 3D位移和3D旋转,在此之前我们先要了解三维坐标系。

3.3.1、三维坐标系

三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的:

  1. x轴:水平向右。注意:x右边是正直,左边是负值
  2. y轴:垂直向下。注意:y下面是正直,上面是负值
  3. z轴:垂直屏幕。注意:往外面是正直,往里面是负值

在这里插入图片描述

3.3.2、3D位移 translate3d(x,y,z)

3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向:

  1. transform: translateX(100px);仅仅是在x轴上移动
  2. transform: translateY(100px);仅仅是在y轴上移动
  3. transform: translateZ(100px);仅仅是在z轴上移动(注意:translateZ 一般用px单位)
  4. transform: translate3d(x,y.z);其中x,y,z分别指要移动的轴的方向的距离。

如:

<!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 {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            transform: translateX(100px) translateY(100px) translateZ(100px);
            /* 1. translateZ() 沿着z轴移动 */
            /* 2. translateZ() 后面的单位我们一般跟px*/
            /* 3. translateZ() 向外移动100px */
            /* 4. 3D移动的简写方法: transform: translate3d(x,y,z); xyz是不能省略的,如果没有就写0 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3.3.3、3D旋转 rotate3d(x,y,z)

3D旋转指可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转。

语法:

transform: rotateX(45deg); /* 沿着x轴正方向旋转45度*/
transform: rotateY(45deg); /* 沿着y轴正方向旋转45度*/
transform: rotateZ(45deg); /* 沿着Z轴正方向旋转45度*/
transform: rotate3d(x,y,z,deg); /* 沿着自定义轴旋转 deg 为角度(了解即可)*/

实例1:沿着x轴旋转

<!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 {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            perspective: 200px;
        }
        .box img {
            width: 100%;
            height: 100%;
            transition: all 1s;
        }
        .box:hover img {
            transform: rotateX(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="image/pig.jpeg" alt="">
    </div>
</body>
</html>

对于元素旋转的方向的判断,我们需要先学习一个左手准则

左手准则:

  1. 左手的手拇指指向x轴的正方向
  2. 其余手指的弯曲方向就是该元素沿着 x轴旋转 的方向

左手准则
实例2:沿着y轴旋转

我们的钢管舞就是沿着y轴旋转
在这里插入图片描述
旋转方向的判定还是遵循左手准则,不过在这里大拇指需要指向三维坐标系的y轴!

实例3:沿着z轴旋转,z轴的旋转与2D的旋转一样。
在这里插入图片描述

3.3.4、透视 perspective

在2D平面产生近大远小视觉立体,但是效果只是二维的:

  1. 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
  2. 模拟人类的视觉位置,可以认为安排一只眼睛去看。
  3. 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
  4. 距离视觉点越近的在电脑平面成像越大,越远成像越小
  5. 透视的单位是像素

在这里插入图片描述
注意:透视属性写在被观察元素的父盒子上面

  1. d就是视距,视据就是一个距离人的眼睛到屏幕的距离
  2. z就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大

例如:

<!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>
        body {
            /* 透视写到被观察元素的父盒子上面 */
            perspective: 500px; /* 透视也称视距,值越小,盒子就越大 */
        }
        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: greenyellow;
            transform: translate3d(100px,50px,100px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果就是,盒子因为视距的改变而撑大了盒子
在这里插入图片描述

3.3.5、3D 呈现 transform-style

transform-style CSS属性指定元素的子元素是定位在3d空间中还是在元素平面中被平铺。如果扁平化,子元素将不会在三维空间中独立存在。

  1. 控制子元素是否开启三维立体环境
  2. transform-style: flat;子元素不开启3d立体空间默认值
  3. transform-style: preserve-3d;子元素开启立体空间
  4. 代码写给父级,但是影响的是子盒子
  5. 这个属性和重要,后面必用

实例1:子元素开启立体空间
在这里插入图片描述
代码实现:

<!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 {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            perspective: 500px;
            transform-style: preserve-3d; /* 子元素开启立体空间 */
            transition: all 1s;
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: greenyellow;
        }
        .box div:last-child {
            transform: rotateX(60deg);
            background-color: rebeccapurple;
        }
        .box:hover {
            transform: rotateY(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
</html>

End

Thank you for watching

End

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页