likes
comments
collection
share

HTML5&CSS3特性总结

作者站长头像
站长
· 阅读数 19

HTML5的新特性

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

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

语义化标签

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

<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>
  • <header>:头部标签
  • <nav>:导航标签
  • <article>:内容标签
  • <section>:定义文档的某个区域
  • <aside>:侧边栏标签
  • <footer>:尾部标签

注意:

  • 这种语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在 IE9 中,需要把这些元素转换为块级元素
  • 其实,我们移动端更喜欢使用这些标签
  • HTML5 还增加了很多其他标签,我们后面再慢慢学
<!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>

多媒体标签

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

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

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

视频

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

当前 <video> 元素支持三种视频格式:尽量使用 mp4 格式。

HTML <video> 标签

HTML5&CSS3特性总结

语法:

<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 >
属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
mutedmuted如果出现该属性,视频的音频输出为静音。
posterURL规定视频正在下载时显示的图像,直到用户点击播放按钮。
preloadauto metadata none如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
srcURL要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

音频

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

当前 <audio> 元素支持三种音频格式:尽量使用 mp3 格式。

浏览器MP3WavOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

语法:

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

属性:

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

多媒体标签总结

  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频标签添加 muted 属性来静音播放视频,音频不可以(可以通过 JavaScript 解决)
  • 视频标签是重点,我们经常设置自动播放,不使用 controls 控件,循环和设置大小属性

input类型

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

HTML5&CSS3特性总结

input表单属性

HTML5&CSS3特性总结

修改placeholder字体颜色

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新特性

新增的 CSS3 特性有兼容性问题,IE9+ 才支持,移动端支持优于 PC 端。

新增选择器

属性选择器

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

选择符简介
E[att]选择具有 att 属性的 E 元素
E[att="val"]选择具有 att 属性且属性值等于 val 的 E 元素
E[att^="val"]匹配具有 att 属性且值以 val 开头的 E 元素
E[arr$="val"]匹配具有 att 属性且值以 val 结尾的 E 元素
E[att*="val"]匹配具有 att 属性且值中含有 val 的 E 元素

注意:类选择器、属性选择器、伪类选择器,权重都是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>

结构伪类选择器

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

  • n 可以是数字,关键字和公式
  • n 如果是数字,就是选择第 n 个子元素,里面数字从 1 开始……
  • n 可以是关键字:even 偶数,odd 奇数
  • n 可以是公式:常见的公式如下(如果 n 是公式,则从 n = 0 开始计算,但是第 0 个元素和超出了元素的个数会被忽略)
公式取值
2n偶数(2、4、6、……)
2n+1奇数(1、3、5、……)
5n5 10 15...
n+5从第 5 个开始(包含第 5 个)到最后
-n+5前 5 个(包含第 5 个)

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

选择器简介
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 个

nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)。

  • n 可以是数字,关键字和公式
  • n 如果是数字,就是选择第 n 个子元素,里面数字从 1 开始……
  • n 可以是关键字:even 偶数,odd 奇数
  • n 可以是公式:常见的公式如下(如果 n 是公式,则从 n = 0 开始计算,但是第 0 个元素和超出了元素的个数会被忽略)
公式取值
2n偶数(2、4、6、……)
2n+1奇数(1、3、5、……)
5n5 10 15...
n+5从第 5 个开始(包含第 5 个)到最后
-n+5前 5 个(包含第 5 个)

区别:

  1. nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第 n 个孩子,然后看看是否和 E 匹配
  2. nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配 E,然后再根据 E 找第 n 个孩子

小结:

  • 结构伪类选择器一般用于选择父级里面的第几个孩子
  • nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第 n 个孩子,然后看看是否和 E 匹配
  • nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配 E,然后再根据 E 找第 n 个孩子
  • 若父元素内都是同一种标签(如:列表),优先用 nth-child,否则就只能使用 nth-of-type
  • 类选择器、属性选择器、伪类选择器,权重为 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>

HTML5&CSS3特性总结

伪元素选择器

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

选择器简介
::before在元素内容的前面插入内容
::after在元素内容的后面插入内容

注意:

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

(1)伪元素选择器使用场景1:伪元素字体图标

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>

HTML5&CSS3特性总结

(2)伪元素选择器使用场景2:仿土豆效果

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

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

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

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

注意:要求这个新的空标签必须是块级元素。

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

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

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

.clearfix:after {
    clear: both;
}

盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型,有 2 个值:即可指定为 content-box、border-box,这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况:

  1. box-sizing: content-box 盒子大小为 width + padding + border (以前默认的)
  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 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>

HTML5&CSS3特性总结

过渡

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

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

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

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

语法:

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

HTML5&CSS3特性总结

记住过渡的使用口诀:谁做过渡给谁加!

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

其他特性

图片变模糊

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

计算盒子宽度 width:calc 函数

<!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提高

2D转换

转换(transform)是 CSS3 中具有颠覆性的特征之一。可以实现元素的位移、旋转、缩放等效果。

转换(transform)你可以简单理解为变形。

  • 移动:translate
  • 旋转:rotate
  • 缩放:scale

二维坐标系

2D 转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系。

HTML5&CSS3特性总结

移动 translate

语法:

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

重点:

  • 定义 2D 转换中的移动,沿着 X 和 Y 轴移动元素
  • translate 最大的优点:不会影响到任何其他元素的位置(优于定位的地方)
  • translate 中的百分比单位是相对于自身元素的 translate: (50%, 50%);
  • 对行内元素没有效果
<!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>

HTML5&CSS3特性总结

n

案例2:让一个盒子水平居中

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

HTML5&CSS3特性总结

旋转 rotate

2D 旋转指的是让元素在 2 维平面内顺时针旋转或者逆时针旋转。

语法:

transform: rotate(度数)

重点:

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

案例:图片旋转360度

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

HTML5&CSS3特性总结

案例:旋转箭头

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

HTML5&CSS3特性总结

HTML5&CSS3特性总结

转换中心点 transform-origin

我们可以设置元素转换的中心点。

语法:

transform-origin: x y;

重点:

  • 注意后面的参数 x 和 y 用空格隔开
  • x y 默认转换的中心点是元素的中心点(50% 50%)
  • 还可以给 x y 设置 像素 或者 方位名词(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>

HTML5&CSS3特性总结

缩放 scale

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

语法:

transform: scale(x, y);

注意:

  • 注意其中的 x 和 y 用逗号分隔
  • transform: scale(1, 1) :宽和高都放大一倍,相当于没有放大
  • transform: scale(2, 2) :宽和高都放大了 2 倍
  • transform: scale(2) :只写一个参数,第二个参数默认等于第一个参数,相当于 scale(2, 2)
  • transform: scale(0.5, 0.5) :缩小
  • scale 缩放最大的优势:可以设置缩放的基准点(默认以中心点缩放);并且缩放不会影响其他盒子的位置(以上两个特点都是直接设置 width 和 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>

案例:图片放大

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

HTML5&CSS3特性总结

综合写法

注意:

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

总结

  • 2D 移动 translate(x, y) 最大的优势是不影响其他盒子,里面参数用 %,是相对于自身宽度和高度来计算的
  • 2D 旋转 rotate(度数) 可以实现旋转元素,度数的单位是 deg
  • 2D 缩放 sacle(x, y) 里面参数是数字,不跟单位,可以是小数。最大的优势在于不影响其他盒子
  • 设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词
  • 当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前

动画

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

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

基本使用

制作动画分为两步:

  1. 先定义动画
  2. 再使用(调用)动画
用 keyframes 定义动画(类似定义类选择器)
@keyframes 动画名称 {
   0% {
        width: 100px;
   }  
   100% {
        width: 200px;
   }
}

动画序列

  • 0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列
  • 在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
  • 请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%

元素使用动画

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>

HTML5&CSS3特性总结

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

HTML5&CSS3特性总结

动画常用属性

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

动画简写属性

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态。

animation: myfirst 5s linear 2s infinite alternate;
  • 简写属性里面不包含 animation-play-state
  • 暂停动画:animation-play-state: puased; 经常和鼠标经过等其他配合使用
  • 想要动画走回来,而不是直接跳回来:animation-direction: alternate
  • 盒子动画结束后,停在结束位置: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>

案例:热点图

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

HTML5&CSS3特性总结

速度曲线

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

HTML5&CSS3特性总结

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

案例:奔跑的熊

<!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转换

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

有什么特点

  • 近大远小
  • 物体后面遮挡不可见

当我们在网页上构建 3D 效果的时候参考这些特点就能产出 3D 效果。

三维坐标系

  • x 轴:水平向右(注意:x 右边是正值,左边是负值)
  • y 轴:垂直向下(注意:y 下面是正值,上面是负值)
  • z 轴:垂直屏幕(注意:往外面是正值,往里面是负值)

HTML5&CSS3特性总结

3D 转换我们主要学习工作中最常用的 3D 位移 和 3D 旋转。

主要知识点

  • 3D 位移:translate3d(x, y, z)
  • 3D 旋转:rotate3d(x, y, z)
  • 透视:perspective
  • 3D 呈现:transfrom-style

3D移动 translate3d

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

  • transform:translateX(100px):仅仅是在 X 轴上移动
  • transform:translateY(100px):仅仅是在 Y 轴上移动
  • transform:translateZ(100px):仅仅是在 Z 轴上移动(注意:translateZ 一般用 px 单位)
  • transform:translate3d(x, y, z):其中 x、y、z 分别指要移动的轴的方向的距离

因为 z 轴是垂直屏幕,由里指向外面,所以默认是看不到元素在 z 轴的方向上移动(要借助透视)。

透视 perspective

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

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

透视写在被观察元素的父盒子上面。

d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。

z:就是 z 轴,物体距离屏幕的距离,z 轴越大(正值)我们看到的物体就越大。

<!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>3D移动translate3d</title>
    <style>
        body {
            /* 透视写到被观察元素的父盒子上面 */
            perspective: 200px;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 1. translateZ 沿着 Z 轴移动 */
            /* 2. translateZ 后面的单位我们一般跟 px */
            /* 3. translateZ(100px) 向外移动 100px(向我们的眼睛来移动的) */
            /* 4. 3D 移动有简写的方法 */
            /* transform: translate3d(x, y, z); */
            /* transform: translate3d(100px, 100px, 100px); */
            /* 5. xyz 是不能省略的,如果没有就写 0 */
            transform: translate3d(400px, 100px, 100px);
        }
    </style>
</head>

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

</html>

translateZ

translform:translateZ(100px):仅仅是在 Z 轴上移动。有了透视,就能看到 translateZ 引起的变化了。

  • translateZ:近大远小
  • translateZ:往外是正值
  • translateZ:往里是负值
<!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>translateZ</title>
    <style>
        body {
            perspective: 500px;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transform: translateZ(0);
        }
    </style>
</head>

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

</html>

3D旋转 rotate3d

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

语法

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

HTML5&CSS3特性总结

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

X轴左手准则

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

HTML5&CSS3特性总结

<!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>rotateX</title>
    <style>
        body {
            /* 利用透视产生近大远小效果 */
            perspective: 300px;
            background: #DDDDDD;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            transform: rotateX(45deg);
        }
    </style>
</head>

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

</html>

HTML5&CSS3特性总结

Y轴左手准则

  • 左手的手拇指指向 y 轴的正方向
  • 其余手指的弯曲方向就是该元素沿着 y 轴旋转的方向(正值)

HTML5&CSS3特性总结

<!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>rotateY</title>
    <style>
        body {
            perspective: 500px;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>

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

</html>

HTML5&CSS3特性总结

<!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>rotateZ</title>
    <style>
        body {
            perspective: 500px;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            transform: rotateZ(180deg);
        }
    </style>
</head>

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

</html>

HTML5&CSS3特性总结

transform: rotate3d(x, y, z, deg):沿着自定义轴旋转 deg 为角度(了解即可)。

xyz 是表示旋转轴的矢量,表示你是否希望沿着该轴旋转,最后一个表示旋转的角度。

  • transform: rotate3d(1, 0, 0, 45deg):就是沿着 x 轴旋转 45deg
  • transform: rotate3d(0, 1, 0, 45deg):就是沿着 y 轴旋转 45deg
  • transform: rotate3d(0, 0, 1, 45deg):就是沿着 z 轴旋转 45deg
  • transform: rotate3d(1, 1, 0, 45deg):就是沿着对角线(矢量计算)旋转 45deg
<!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>rotate3d</title>
    <style>
        body {
            perspective: 500px;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            /* transform: rotate3d(x,y,z,deg); */
            /* transform: rotate3d(1, 0, 0, 45deg); */
            /* transform: rotate3d(0, 1, 0, 45deg); */
            transform: rotate3d(1, 1, 0, 45deg);
        }
    </style>
</head>

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

</html>

HTML5&CSS3特性总结

3D呈现 transfrom-style

  • 控制子元素是否开启三维立体环境

    • transform-style: flat 子元素不开启 3d 立体空间(默认的)
    • transform-style: preserve-3d; 子元素开启立体空间
  • 代码写给父级,但是影响的是子盒子
  • 这个属性很重要,后面必用
<!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-style</title>
    <style>
        body {
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(60deg);
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }

        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>

<body>
<div class="box">
    <div></div>
    <div></div>
</div>
</body>

</html>

HTML5&CSS3特性总结

案例:两面翻转的盒子

  • li 设置大小,加透视和 3d 呈现
  • front 需要前移 17.5 像素
  • bottom 需要下移 17.5 像素并且要沿着 x 轴翻转 负 90 度
  • 鼠标放到 box 让盒子旋转 90 度
<!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>3D导航栏案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 100px;
        }

        ul li {
            float: left;
            margin: 0 5px;
            width: 120px;
            height: 35px;
            list-style: none;
            /* 一会我们需要给 box 旋转 也需要透视 干脆给 li 加 里面的子盒子都有透视效果 */
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .4s;
        }

        .box:hover {
            transform: rotateX(90deg);
        }

        .front,
        .bottom {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .front {
            background-color: pink;
            z-index: 1;
            transform: translateZ(17.5px);
        }

        .bottom {
            background-color: purple;
            /* 这个x轴一定是负值 */
            /* 我们如果有移动 或者其他样式,必须先写我们的移动 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>

<body>
<ul>
    <li>
        <div class="box">
            <div class="front">黑马程序员</div>
            <div class="bottom">pink老师等你</div>
        </div>
    </li>
    <li>
        <div class="box">
            <div class="front">黑马程序员</div>
            <div class="bottom">pink老师等你</div>
        </div>
    </li>
    <li>
        <div class="box">
            <div class="front">黑马程序员</div>
            <div class="bottom">pink老师等你</div>
        </div>
    </li>
    <li>
        <div class="box">
            <div class="front">黑马程序员</div>
            <div class="bottom">pink老师等你</div>
        </div>
    </li>
    <li>
        <div class="box">
            <div class="front">黑马程序员</div>
            <div class="bottom">pink老师等你</div>
        </div>
    </li>
    <li>
        <div class="box">
            <div class="front">黑马程序员</div>
            <div class="bottom">pink老师等你</div>
        </div>
    </li>
</ul>
</body>

</html>

案例:旋转木马

  • 给 body 添加 透视效果 perspective: 1000px;
  • 给 section 添加大小,一定不要忘记添加 3d 呈现效果控制里面的 6 个 div

    • 别忘记子绝父相,section 要加相对定位
  • 里面 6 个 div 全部绝对定位叠到一起,然后移动不同角度旋转和距离

    • 注意:旋转角度用 rotateY 距离肯定用 translateZ 来控制
  • 给 section 添加动画 animation,让它可以自动旋转即可
<!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 {
            perspective: 1000px;
        }

        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
            background: url(media/pig.jpg) no-repeat;
        }

        section:hover {
            /* 鼠标放入 section 停止动画 */
            animation-play-state: paused;
        }

        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media/dog.jpg) no-repeat;
        }

        section div:nth-child(1) {
            transform: rotateY(0) translateZ(300px);
        }

        section div:nth-child(2) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(60deg) translateZ(300px);
        }

        section div:nth-child(3) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(120deg) translateZ(300px);
        }

        section div:nth-child(4) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(180deg) translateZ(300px);
        }

        section div:nth-child(5) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(240deg) translateZ(300px);
        }

        section div:nth-child(6) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

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

</html>

HTML5&CSS3特性总结

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加

私有前缀

  • -moz-:代表 firefox 浏览器私有属性
  • -ms-:代表 ie 浏览器私有属性
  • -webkit-:代表 safari、chrome 私有属性
  • -o-:代表 Opera 私有属性

提倡的写法

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10px;

参考

参考

黑马程序员pink老师前端入门教程

HTML CSS