devbox
算法构造者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML5和CSS3强化知识总结

作者：算法构造者 | 2024-02-05 10:05:36

赞

踩

HTML5和CSS3强化知识总结

HTML5的新特性

  • HTML5的新增特性主要是针对于以前的不足，增一些新的标签、新的表单和新的表单属性等。
  • 这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

HTML5新增的语义化标签

  • <header> :头部标签
  • <nav> :导航标签
  • <article> :内容标签
  • <section> :定义文档某个区域
  • <aside> :侧边栏标签
  • <footer> :尾部标签

HTML5新增媒体标签

HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然，支持的格式是有限的。
1.视频<video>——常见属性

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

 HTML5新增的多媒体标签


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

音频<audio> 语法:

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

常见属性：

属性值描述
autoplayautoplay如果出现该属性，则音频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
looploop如果出现该属性，则每当音频结束时重新开始播放。
srcurl要播放的音频的 URL。

HTML5新增的input类型

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

  1. <body>
  2.     <!--我们验证的时候必须添加form表-->
  3.     <form action="">
  4.         <ul>
  5.             <li>邮箱:<input type="email"/></li>
  6.             <li>网址:<input type="url"/></li>
  7.             <li>日期:<input type="date"/></li>
  8.             <li>日期:<input type="time"/></li>
  9.             <li>数量:<input type="number" /></li>
  10.             <li>手机号码:<input type="tel"/></li>
  11.             <li>搜索:<input type="search"/></li>
  12.             <li>颜色:<input type="color"/></li>
  13.             <!--当我们点击提交按钮就可以验证表-->
  14.             <li> <input type="submit" value="提交"></li>
  15.         </ul>
  16.     </form>
  17.     
  18. </body>

由上可知，当输入格式不合格时，提交之后会出现警告。

HTML5 新增的表单属性

属性值说明
requiredrequired表单拥有该属性表示其内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
autocompleteoff / on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项
默认已经打开，如 autocomplete="on”，关闭autocomplete ="of"需要放在表单内，同时加上 name 属性，同时成功提交
multiplemultiple可以多选文件提交
  1. <form action="">
  2.     <input type="search" name="sear" id="" required="required"     placeholder="请输入内容" autofocus="autofocus" autocomplete="off">
  3.     <input type="file" name=""id="" multiple="multiple">
  4.     <input type="submit" value="提交">
  5. </form>

CSS3新增选择器

CSS3新增的选择器可以更加便捷、更加自由的选择目标元素

1.属性选择器

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

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

        类选择器、属性选择器、伪类选择器权重为10. 

2.结构伪类选择器，权重为10

选择符简介
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是公式，从0开始计算，每次加一往后面计算。超出部分会被忽略

公式取值
2n偶数
2n+1奇数
5n5  10  15···
n+5从第五个开始（包含第五个）到最后
-n+5前五个（包含第五个）
  • nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
  •  nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

nth-child在指定目标时，先看是第几个子元素，再看该子元素是不是nth-child前元素，是就选中，不是就忽略。 

  1. <style>
  2.         section div:nth-child(1) {
  3.             color: pink;
  4.         }
  5.     </style>
  6. <body>
  7.     <section>
  8.         <p>guanhg</p>
  9.         <div>
  10.             <p>xida</p>
  11.             <p>xionger</p>
  12.         </div>
  13.         <div></div>
  14.     </section>
  15. </body>

在以上代码中，nth-child先锁定section的第一个子元素即p元素，但p元素不是div，所以该样式被忽略，没有文字变成粉色。

3.伪元素选择器

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

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

注意∶

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

CSS3盒子模型


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宽度)


CSS3其他特性


1.CSS3滤镜filter:

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

filter:函数();

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

  1. <style>
  2.         img {
  3.             /* blur是一个函数，小括号里的数值越大，图片越模糊，注意数值要加px单位 */
  4.             filter:blur(5px);
  5.             width: 200px;
  6.         }
  7.         img:hover {
  8.             filter: blur(0);
  9.         }
  10.     </style>
  11. <body>
  12.     <img src="../img/c4.jpg" alt="">
  13. </body>

2.css3 calc函数:
calc()此CSS函数在声明CSS属性值时执行一些计算。

width: calc(100% - 80px);注意符号前后各有一个空格

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

  1. <style>
  2.         .father {
  3.             width: 300px;
  4.             height: 200px;
  5.             background-color: antiquewhite;
  6.  
  7.         }
  8.         .son {
  9.             width: calc(100% - 30px);
  10.             height: 30px;
  11.             background-color: skyblue;
  12.         }
  13.     </style>
  14. <body>
  15.     <!-- 父亲的宽度永远比儿子的宽度大30px -->
  16.     <div class="father">
  17.         <div class="son"></div>
  18.     </div>
  19. </body>

CSS3 过渡(重点)


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

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

运动曲线：linear  匀速 ease  逐渐慢下来  ease-in 加速 ease-out   减速  ease-in-out 先加速后减速

 谁过渡给谁加上该属性

  1.     <style>
  2.         div {
  3.             width: 200px;
  4.             height: 100px;
  5.             background-color: pink;
  6.             /* transition: 变化的属性 花费时间 运动曲线 何时开始； */
  7.             /* transition: width .5s ease 1s; */
  8.             /* 如果想要写多个属性，利用逗号进行分割 */
  9.             /* transition: width .5s, height .5s; */
  10.             /* 如果想要多个属性变化，写all就可以 */
  11.             transition: all .5s;
  12.         }
  13.         div:hover {
  14.             width: 400px;
  15.             height: 200px;
  16.             background-color: aquamarine;
  17.         }
  18.     </style>
  19. <body>
  20.     <div></div>
  21. </body>

进度条的实现

结构为一个父元素包含一个子元素，为二者设置样式即可

  1. <style>
  2.         .bar {
  3.             width: 200px;
  4.             height: 10px;
  5.             border: 2px solid red;
  6.             border-radius: 7px;
  7.         }
  8.         .bar-in {
  9.             width: 50%;
  10.             height:100%;
  11.             background-color: red;
  12.         }
  13.         .bar:hover .bar-in {
  14.             width: 100%;
  15.             transition: all .7s;
  16.         }
  17.     </style>
  18. <body>
  19.     <div class="bar">
  20.         <div class="bar-in"></div>
  21.     </div>
  22. </body>

给子元素加上过渡效果（transition）,即可实现缓慢变换

广义的HTML5

广义的HTML5是指HTML5本身+CSS3+JavaScript

Web服务器

目前我们制作出的网页只能自己欣赏，要想让更多人看到自己写出的网页，就要将网页放置在服务器上，这样就可让更多人访问自己的网站了。

服务器（也可以称之为主机)是提供计算服务的设备，它也是一台计算机。在网络环境下，根据

务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服

器等。

Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等We

客户端提供文档，也可以放置网站文件，让全世界浏览;可以放置数据文件，让全世界下载。

以下服务器我们主要指的是Web服务器。

根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。

本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把网站上传到远程服务器。

远程服务器是通常是别的公司为我们提供的一台电脑(主机)，我们只要把网站项目上传到这台电脑

上，任何人都可以利用域名访问我们的网站了。

比如域名www.mi.com可以访问小米网站。

将自己的网站上传到远程服务器

注意∶一般稳定的服务器都是需要收费的。比如:阿里云
给大家推荐一个免费的远程服务器（免费空间)http://free.3v.do/

  1. 去免费空间网站注册账号。
  2. 记录下主机名、用户名、密码、域名。
  3. 利用cutftp软件上传网站到远程服务器。
  4. 在浏览器中输入域名，即可访问我们上传的网站了。

第一次注册要先激活FTP。

2D转换

转换( transform )是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换(transform )可以简单理解为变形
移动: translate
旋转: rotate
缩放: scale

二维坐标系


2D转换是改变标签在二维平面上的位置和形状的一种技术

2D转换之移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
1.语法
transform: translate(x,y);

或者分开写:

transform: translateX(n);

transform: translateY(n);

2.重点

  • 定义2D转换中的移动，沿着X和Y轴移动元素
  • translate最大的优点∶不会影响到其他元素的位置
  • translate中的百分比单位是相对于自身元素的translate:(50%,50%);
  • 对行内标签没有效果

之前总结定位元素水平垂直居中时，top left均为50%，之后margin-top为-高度的一半，margin-left为-宽度的一半，即可实现，但这一旦改变盒子的宽高，也得改变marign值，故tranform：translate（-50%，-50%）很方便的避免了频繁改动数据的问题。

  1.         p {
  2.             position: absolute;
  3.             top: 50%;
  4.             left: 50%;
  5.             transform: translate(-50%,-50%);
  6.             width: 50px;
  7.             height: 50px;
  8.             background-color: antiquewhite;
  9.         }
2D转换之旋转rotate


2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
1.语法
transform : rotate(度数）
2.重点

  • rotate里面跟度数，单位是deg 比如rotate(45deg)
  • 角度为正时，顺时针，负时，为逆时针
  • 默认旋转的中心点是元素的中心点
  1.         img {
  2.             width: 100px;
  3.             /* 顺时针旋转45度 */
  4.             /* transform: rotate(45deg); */
  5.             /* 过渡写到本身上，谁做动画给谁加 */
  6.             transition: all .3;
  7.         }
  8.         img:hover {
  9.             transform: rotate(180deg);
  10.         }
下拉三角的制作

只显示正方形的右边框和下边框，顺时针旋转45度即可。

  1.     <style>
  2.         div {
  3.             position: relative;
  4.             width: 200px;
  5.             height: 30px;
  6.             border: 1px solid #000;
  7.         }
  8.         div::after {
  9.             position: absolute;
  10.             top: 8px;
  11.             right: 5px;
  12.             content: "";
  13.             width: 10px;
  14.             height: 10px;
  15.             border-right: 1px solid #000;
  16.             border-bottom: 1px solid #000;
  17.             transform: rotate(45deg);
  18.         }
  19.         div:hover::after {
  20.             transform: rotate(225deg);
  21.         }
  22.     </style>
  23. <body>
  24.     <div></div>
  25. </body>

2D转换中心点transform-origin


我们可以设置元素转换的中心点
1.语法
transform-origin: x y;
2.重点

  • 注意后面的参数x和y用空格隔开
  • x y默认转换的中心点是元素的中心点(50% 50%)
  • 还可以给x y设置像素或者方位名词( top bottom left right center 
  1.     <style>
  2.         div {
  3.             width: 200px;
  4.             height: 200px;
  5.             border: 1px solid pink;
  6.             margin: 100px auto;
  7.             overflow: hidden;
  8.         }
  9.         div::before {
  10.             content: "测试";
  11.             display: block;
  12.             width: 100%;
  13.             height: 100%;
  14.             background-color: antiquewhite;
  15.             transform-origin: left bottom;
  16.             transform: rotate(90deg);
  17.             transition: all .7s;
  18.         }
  19.         div:hover::before {
  20.             transform: rotate(0deg);
  21.         }
  22.     </style>
  23. <body>
  24.     <div></div>
  25. </body>

转换中心点之后就可以实现图片旋转进入的效果。

2D转换之缩放scale


缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
1.语法
transform : scale(x,y);
2.注意

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

 

  1.     <style>
  2.         div {
  3.             margin: 50px ;
  4.         }
  5.         div img {
  6.             transition: all .4s;
  7.         }
  8.         div img:hover {
  9.             transform: scale(1.1);
  10.         }
  11.     </style>
  12. <body>
  13.     <div><a href="#"><img src="../img/c6.jpg" alt=""></a></div>
  14. </body>
分页按钮案例
  1.     <style>
  2.         ul li {
  3.             float: left;
  4.             text-align: center;
  5.             width: 30px;
  6.             height: 30px;
  7.             line-height: 30px;
  8.             list-style: none;
  9.             border: 1px solid #000;
  10.             border-radius: 50%;
  11.             margin: 5px ;
  12.             cursor: pointer;
  13.             transition: all .3s;
  14.         }
  15.         ul li:hover {
  16.             transform: scale(1.2);
  17.         }
  18.     </style>
  19. <body>
  20.     <ul>
  21.         <li>1</li>
  22.         <li>2</li>
  23.         <li>3</li>
  24.         <li>4</li>
  25.         <li>5</li>
  26.         <li>6</li>
  27.         <li>7</li>
  28.     </ul>
  29. </body>

2D转换综合写法


注意∶

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

CSS3动画

动画( animation )是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。


动画的基本使用

制作动画分为两步:

  1. 先定义动画
  2. 再使用(调用)动画
  1. div {
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: aqua;
  5.     margin: 100px auto;
  6.     /*调用动画*/
  7.     animation-name:动画名称;
  8.     /*持续时间*/
  9.     animation-duration:持续时间;
  10.     }

用keyframes(关键帧)定义动画

  1.     <style>
  2.         /* 一打开页面，一个盒子从左边走到右边 */
  3.         /* 1.定义动画 */
  4.         @keyframes move {
  5.             /* 开始状态 */
  6.             0% {
  7.                 transform: translate(0px);
  8.             }
  9.             /* 结束状态 */
  10.             100% {
  11.                 transform: translate(1000px);
  12.             }
  13.         }
  14.         div {
  15.             width: 200px;
  16.             height: 200px;
  17.             background-color: pink;
  18.             /* 2.调用动画 */
  19.             /* 动画名称 */
  20.             animation-name: move;
  21.             /* 持续时间 */
  22.             animation-duration: 2s;
  23.         }
  24.     </style>
  25. <body>
  26.     <div></div>
  27. </body>

动画序列

  • 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
  • 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
  • 用百分比来规定变化发生的时间（百分比×总时间），或用关键词"from"和"to”，等同于0%和100%。
  1.     <style>
  2.         /* @keyframes move {
  3.             from {
  4.                 transform: translate(0,0);
  5.             }
  6.             to {
  7.                 transform: translate(1000px,0);
  8.             }
  9.         } */
  10.         @keyframes move {
  11.             0% {
  12.                 transform: translate(0,0);
  13.             }
  14.             25% {
  15.                 transform: translate(1000px,0);
  16.             }
  17.             50% {
  18.                 transform: translate(1000px,500px);
  19.             }
  20.             75% {
  21.                 transform: translate(0,500px);
  22.             }
  23.             100% {
  24.                 transform: translate(0,0);
  25.             }
  26.         }
  27.         /* 动画序列 */
  28.         div {
  29.             width: 100px;
  30.             height: 100px;
  31.             background-color: green;
  32.             animation-name: move;
  33.             animation-duration: 10s;
  34.         }
  35.     </style>
  36. <body>
  37.     <div></div>
  38. </body>

动画常用属性

属性描述
@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;
  1.     <style>
  2.         @keyframes move {
  3.             0% {
  4.                 transform: translate(0, 0);
  5.             }
  6.  
  7.             100% {
  8.                 transform: translate(1000px, 0);
  9.             }
  10.         }
  11.  
  12.         div {
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: green;
  16.             /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  17.             animation: move 2s linear alternate forwards;
  18.         }
  19.  
  20.         div:hover {
  21.             animation-play-state: paused;
  22.         }
  23.     </style>
  24. <body>
  25.     <div></div>
  26. </body>

地图坐标动画案例

利用阴影进行动画设置，先利用定位将阴影与圆点放置合适位置，用一个盒子将其包含，让阴影水平垂直居中放置在盒子中，此时圆点就会在阴影正中间，利用动画将阴影的宽高调大，之后每个阴影进行延迟即可。

  1.     <style>
  2.         .city {
  3.             position:absolute;
  4.             top: 50%;
  5.             left: 50%;
  6.             transform: translate(-50%,-50%);
  7.         }
  8.         .dot {
  9.             width: 8px;
  10.             height: 8px;
  11.             background-color: #09f;
  12.             border-radius: 50%;
  13.         }
  14.         .city div[class^="pulse"] {
  15.             /* 保证小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散*/
  16.             position:absolute;
  17.             top: 50%;
  18.             left: 50%;
  19.             transform: translate(-50%,-50%);
  20.             width: 8px;
  21.             height: 8px;
  22.             box-shadow: 0 0 12px #009dfd;
  23.             border-radius: 50%;
  24.             animation: pulse 1.2s linear infinite;
  25.         }
  26.         .city div.pulse2 {
  27.             animation-delay: 0.4s;
  28.         }
  29.         .pulse3 {
  30.             animation-delay: 0.8s;
  31.         }
  32.         @keyframes pulse {
  33.             0% {}
  34.             70% {
  35.                 /* 如果用scale，阴影也会变大 */
  36.                 width: 40px;
  37.                 height: 40px;
  38.                 opacity: 1;
  39.             }
  40.             100% {
  41.                 width: 70px;
  42.                 height: 70px;
  43.                 opacity: 0;
  44.             }
  45.         }
  46.     </style>
  47. <body>
  48.     <div class="city">
  49.         <div class="dot"></div>
  50.         <div class="pulse1"></div>
  51.         <div class="pulse2"></div>
  52.         <div class="pulse3"></div>
  53.     </div>
  54. </body>


速度曲线细节


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

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

实现打字效果
 

利用step()实现停顿出现，文字强制一行显示，且溢出隐藏即可。

  1.     <style>
  2.         div {
  3.             width: 0;
  4.             height: 30px;
  5.             font-size: 20px;
  6.             background-color: pink;
  7.             overflow: hidden;
  8.             white-space: nowrap;
  9.             animation: w 4s steps(10) forwards;
  10.         }
  11.         @keyframes w {
  12.             0% {
  13.                 width: 0;
  14.             }
  15.             100% {
  16.                 width: 200px;
  17.             }
  18.         }
  19.     </style>
  20. <body>
  21.     <div>世纪佳缘我在这里等你</div>
  22. </body>

奔跑的小熊案例

利用一张有多个小熊奔跑的背景图来实现，并且也要用到steps(),接着利用动画即可，一个元素可设置多个动画，中间用逗号隔开，可实现小雄奔跑着移动的效果

  1.     <style>
  2.         body {
  3.             background-color: #ccc;
  4.         }
  5.         div {
  6.             position: absolute;
  7.             width: 200px;
  8.             height: 100px;
  9.             background: url(../img/熊.png) no-repeat;
  10.             /* 元素可添加多个动画，用逗号隔开 */
  11.             animation: bear 1s steps(8) infinite,move 5s infinite forwards;
  12.         }
  13.         @keyframes bear {
  14.             0%{
  15.                 background-position: 0 0;
  16.             }
  17.             100% {
  18.                 background-position: -1600px 0;
  19.             }
  20.         }
  21.         @keyframes move {
  22.             0% {
  23.                 left: 0;
  24.             }
  25.             100% {
  26.                 left: 50%;
  27.                 transform: translateX(-50%);
  28.             }
  29.         }
  30.     </style>
  31. <body>
  32.     <div></div>
  33. </body>

3D转换

特点：

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

三维坐标系


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

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

3D移动translate3d

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

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

透视 perspection

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

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

透视写在被观察元素的父盒子上面的
d：就是视距，视距就是人的眼睛到屏幕的距离。
z：就是z轴，物体距离屏幕的距离，translateZ()  z轴越大(正值）我们看到的物体就越大。
 

  1.         body {
  2.             /* 透视写到被观察元素的父盒子上 */
  3.             perspective: 500px;
  4.         }
  5.         div {
  6.             width: 200px;
  7.             height: 200px;
  8.             background-color: antiquewhite;
  9.             transform: translateZ(300px);
  10.         }

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为角度(矢量运算)

左手准则

transform:rotateX(45deg)

  • 左手大拇指指向x轴正方向
  • 四指弯曲的地方为x轴旋转的正方向

transform:rotateY(45deg)

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

transform:rotateZ(45deg)

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

3D呈现transform-style

  • 控制子元素是否开启三维立体环境
  • transform-style:flat子元素不开启3d立体空间默认的
  • transform-style:preserve-3d;子元素开启立体空间
  • 代码写给父级，但是影响的是子盒子
  1.     <style>
  2.         .box {
  3.             position: relative;
  4.             width: 200px;
  5.             height: 200px;
  6.             margin: 100px auto;
  7.             perspective: 1000px;
  8.             transition: all .5s;
  9.             /* 让子元素开启3d立体空间 */
  10.             transform-style: preserve-3d;
  11.         }
  12.         .box:hover {
  13.             transform: rotateY(45deg);
  14.         }
  15.         .box div {
  16.             position: absolute;
  17.             top: 0;
  18.             left: 0;
  19.             width: 100%;
  20.             height: 100%;
  21.             background-color: aqua;
  22.         }
  23.  
  24.         .box div:last-child {
  25.             background-color: antiquewhite;
  26.             transform: rotateX(45deg);
  27.         }
  28.     </style>
  29.  
  30. <body>
  31.     <div class="box">
  32.         <div></div>
  33.         <div></div>
  34.     </div>
  35. </body>

 

两面翻转的实现

通过定位先把两个盒子叠放在一起，将背面的盒子沿着y轴旋转180度，再将整个box沿着y轴旋转180度，记得给box加上transform-style:perserve-3d;才能看出立体效果

  1.     <style>
  2.         body {
  3.             perspective: 300px;
  4.         }
  5.         .box {
  6.             position: relative;
  7.             width: 300px;
  8.             height: 300px;
  9.             margin: 100px auto;
  10.             transition: all .4s;
  11.             /* 让背面保持立体空间 */
  12.             transform-style: preserve-3d;
  13.         }
  14.         .box:hover {
  15.             transform: rotateY(180deg);
  16.         }
  17.         .front,
  18.         .back {
  19.             position: absolute;
  20.             top: 0;
  21.             left: 0;
  22.             width: 100%;
  23.             height: 100%;
  24.             border-radius: 50%;
  25.             font-size: 30px;
  26.             color: #fff;
  27.             text-align: center;
  28.             line-height: 300px;
  29.             backface-visibility: hidden;
  30.  
  31.         }
  32.        
  33.         .front {
  34.             background-color: aquamarine;
  35.             z-index: 1;
  36.         }
  37.  
  38.         .back {
  39.             background-color: antiquewhite;
  40.             transform: rotateY(180deg);
  41.  
  42.         }
  43.     </style>
  44.  
  45. <body>
  46.     <div class="box">
  47.         <div class="front">正面</div>
  48.         <div class="back">反面</div>
  49.     </div>
  50. </body>

3D导航栏

大体结构

  1. <ul>
  2.         <li>
  3.             <div class="box">
  4.                 <div class="front">正面</div>
  5.                 <div class="back">反面</div>
  6.             </div>
  7.         </li>
  8. </ul>

将背面的盒子沿着x轴负方向旋转90度，再将正面的盒子沿着z轴正方向移动，最后整个box再沿着x轴旋转90度即可。这样会使整个盒子旋转时，是绕着盒子的中心点旋转，视觉效果好，最好不要将背面的盒子沿着z轴负方向移动。切记，先写移动再写旋转

  1.         ul {
  2.             margin: 100px;
  3.  
  4.         }
  5.         ul li {
  6.             width: 120px;
  7.             height: 35px;
  8.             list-style: none;
  9.             /* 需要给box也进行翻转 */
  10.             perspective: 500px;
  11.         }
  12.         .box {
  13.             position: relative;
  14.             width: 100%;
  15.             height: 100%;
  16.             transform-style: preserve-3d;
  17.             transition: all .4s;
  18.         }
  19.         .box:hover {
  20.             transform: rotateX(90deg);
  21.         }
  22.         .front,.back {
  23.             position: absolute;
  24.             left: 0;
  25.             top: 0;
  26.             width: 100%;
  27.             height: 100%;
  28.         }
  29.         .front {
  30.             background-color: antiquewhite;
  31.             z-index: 1;
  32.             transform: translateZ(17.5px);
  33.         }
  34.         .back {
  35.             background-color: aquamarine;
  36.             /* 先写移动后写旋转 */
  37.             transform: translateY(50%) rotateX(-90deg);
  38.         }

旋转木马效果

大体结构

  1. <body>
  2.     <section>
  3.         <div></div>
  4.         <div></div>
  5.         <div></div>
  6.         <div></div>
  7.         <div></div>
  8.         <div></div>
  9.     </section>
  10. </body>

将6个div盒子先绕y轴旋转一定角度，之后再沿着z轴向前平移即可，注意加上透视和3d效果，最后让section沿着y轴旋转360度即可，旋转360度要做成动画效果

  1.         body {
  2.             perspective: 1000px;
  3.         }
  4.  
  5.         section {
  6.             position: relative;
  7.             width: 300px;
  8.             height: 200px;
  9.             margin: 100px auto;
  10.             transform-style: preserve-3d;
  11.             animation: rotate 4s linear infinite;
  12.         }
  13.         section:hover {
  14.             animation-play-state: paused;
  15.             /* 鼠标放入section停止动画 */
  16.         }
  17.         @keyframes rotate {
  18.             0% {
  19.                 transform: rotateY(0);
  20.             }
  21.             100% {
  22.                 transform: rotateY(360deg);
  23.             }
  24.         }
  25.         section div {
  26.             position: absolute;
  27.             top: 0;
  28.             left: 0;
  29.             width: 100%;
  30.             height: 100%;
  31.             background: url(../img/c4.jpg) no-repeat;
  32.         }
  33.  
  34.         section div:nth-child(1) {
  35.             transform: translateZ(300px);
  36.         }
  37.         section div:nth-child(2) {
  38.             /* 先旋转好了再移动 */
  39.             transform: rotateY(60deg) translateZ(300px);
  40.         }
  41.         section div:nth-child(3) {
  42.             transform: rotateY(120deg) translateZ(300px);
  43.         }
  44.         section div:nth-child(4) {
  45.             transform: rotateY(180deg) translateZ(300px);
  46.         }
  47.         section div:nth-child(5) {
  48.             transform: rotateY(240deg) translateZ(300px);
  49.         }
  50.         section div:nth-child(6) {
  51.             transform: rotateY(300deg) translateZ(300px);
  52.         }

浏览器私有前缀


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

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

⒉.提倡的写法


-moz-border-radius: 10px;

-webkit-border-radius: 10px;

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/算法构造者/article/detail/60360
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号