精华内容
下载资源
问答
  • 2018-08-22 16:22:33

    综述:这个问题在面试的时候经常被问到,有必要做一个总结,理解的深刻充分一些

    1.html5的新特性?(记住有九大模块内容)

    • 添加了video,radio标签

    • 添加了canvas画布和svg,渲染矢量图片

    • 添加了一些列语义化标签header,footer,main,section,aside,nav等

    • input的type值新添加了很多属性(email,url,number,range,Date pickers (date, month, week, time, datetime, datetime-local),search,color)

    • 添加了地理位置定位功能 Geolocation API

    • 添加了web存储功能,localStorage和sessionStorage

    • 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本

    • web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

    • 服务端事件推送(EventSource 对象用于接收服务器发送事件通知),所有主流浏览器均支持服务器发送事件,除了 Internet Explorer

    if(typeof(EventSource)!=="undefined"){
      var source=new EventSource("/example/html5/demo_sse.php");
      source.onmessage=function(event){
             console.log(event.data);
        };
      }else{
          console.log("抱歉,您的浏览器不支持 server-sent 事件 ...");
      }

    2.CSS3中新添加的特性?(css3也有九大属性,要多去实践应用)

    • 媒体查询(可以查询设备的物理像素然后进行自适应操作)

    • transform,transition,translate,scale,skelw,rotate等相关动画效果

    • box-shadow,text-shadow等特效

    • CSS3 @font-face 规则,设计师可以引入任意的字体了

    • CSS3 @keyframes 规则,可以自己创建一些动画等

    • 2D、3D转换

    • 添加了border-radius,border-image等属性

    • CSS3 创建多列(column-count规定文本可以以几列的方式布局)

    • CSS3 用户界面(resize,box-sizing,outline-offset)

    div{
        resize:both; /*规定元素的尺寸可以由用户进行手动的调整*/
        overflow:auto;
    }
    div{
        box-sizing:border-box;
        -moz-box-sizing:border-box;	     /* Firefox */
        -webkit-box-sizing:border-box;	/* Safari */
        width:50%;
        float:left;
    }
    div{
        margin:20px;
        width:150px; 
        padding:10px;
        height:70px;
        border:2px solid black;
        outline:2px solid red;  /*在元素的外围添加一层轮廓,轮廓是不占位置的*/
        outline-offset:12px;    /*轮廓距离border的距离*/
    }

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    更多相关内容
  • HTML5和CSS3

    千人学习 2017-11-23 11:21:58
    HTML5新特性和CSS3的使用案例,从入门到精通。
  • 响应式web设计html5和css3实战 源代码

    热门讨论 2015-02-13 10:20:00
    响应式web设计html5和css3实战 源代码 绝对一手!
  • 3D纸片折叠动画是一款纸片折叠动画特效,利用HTML5和CSS3的相关特性,我们可以将一张张纸片折叠起来,形成很酷的3D动画效果。经测试效果相当不错。
  • 跟考拉老师学HTML5和CSS3

    千人学习 2017-08-24 14:37:51
    基于企业的实战需求,精心研发了这套实战课程(HTML5+CSS3),内容从新增的HTML5CSS3标签入手,详解响应式移动页面布局及各种注意事项,精讲多个典型实战项目,由浅入深、系统扎实的掌握全栈前端的技能
  • HTML5和CSS3新特性一览

    万次阅读 多人点赞 2017-04-04 20:53:05
    HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 定义页面独立的内容区域。 定义页面的侧边栏内容。 允许您设置一段文本,使其脱离其父元素的文本方向设置...

    转自:http://www.cnblogs.com/star91/p/5659134.html


    HTML5

    1.HTML5 新元素

    HTML5提供了新的元素来创建更好的页面结构:

    标签

    描述

    <article>

    定义页面独立的内容区域。

    <aside>

    定义页面的侧边栏内容。

    <bdi>

    允许您设置一段文本,使其脱离其父元素的文本方向设置。

    <command>

    定义命令按钮,比如单选按钮、复选框或按钮

    <details>

    用于描述文档或文档某个部分的细节

    <dialog>

    定义对话框,比如提示框

    <summary>

    标签包含 details 元素的标题

    <figure>

    规定独立的流内容(图像、图表、照片、代码等等)。

    <figcaption>

    定义 <figure> 元素的标题

    <footer>

    定义 section  document 的页脚。

    <header>

    定义了文档的头部区域

    <mark>

    定义带有记号的文本。

    <meter>

    定义度量衡。仅用于已知最大和最小值的度量。

    <nav>

    定义导航链接的部分。

    <progress>

    定义任何类型的任务的进度。

    <ruby>

    定义 ruby 注释(中文注音或字符)。

    <rt>

    定义字符(中文注音或字符)的解释或发音。

    <rp>

     ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。

    <section>

    定义文档中的节(section、区段)。

    <time>

    定义日期或时间。

    <wbr>

    规定在文本中的何处适合添加换行符。

    2.HTML5 Canvas

    HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

    <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

      
    1. <canvas>简单实例如下:
    2. <canvasid="myCanvas"width="200"height="100"></canvas>
    使用 JavaScript 来绘制图像

    canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

       
    1. <script>
    2. var c=document.getElementById("myCanvas");
    3. var ctx=c.getContext("2d");
    4. ctx.fillStyle="#FF0000";
    5. ctx.fillRect(0,0,150,75);
    6. </script> 
    3.HTML5 拖放

     拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

    设置元素为可拖放

    首先,为了使元素可拖动,把 draggable 属性设置为 true :

      
    1. <imgdraggable="true">

    拖动什么 - ondragstart 和 setData()


    放到何处 - ondragover


    进行放置 - ondrop
    4.HTML5 地理定位

     HTML5 Geolocation API 用于获得用户的地理位置。

    鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。


      
    1. <script>
    2. var x=document.getElementById("demo");
    3. function getLocation()
    4. {
    5. if(navigator.geolocation)
    6. {
    7. navigator.geolocation.getCurrentPosition(showPosition);
    8. }
    9. else{x.innerHTML="该浏览器不支持获取地理位置。";}
    10. }
    11. function showPosition(position)
    12. {
    13. x.innerHTML="Latitude: "+ position.coords.latitude +
    14. "<br>Longitude: "+ position.coords.longitude;
    15. }
    16. </script>

    5.HTML5  Audio(音频)、Video(视频)

     HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。


      
    1. <audiocontrols>
    2. <sourcesrc="horse.ogg"type="audio/ogg">
    3. <sourcesrc="horse.mp3"type="audio/mpeg">
    4. 您的浏览器不支持 audio 元素。
    5. </audio>

     HTML5 规定了一种通过 video 元素来包含视频的标准方法。

      
    1. <videowidth="320"height="240"controls>
    2. <sourcesrc="movie.mp4"type="video/mp4">
    3. <sourcesrc="movie.ogg"type="video/ogg">
    4. 您的浏览器不支持Video标签。
    5. </video>


    6.HTML5 Input 类型

     HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

    • color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week


      
    1. <inputtype="range"name="points"min="1"max="10">
    2. Search Google: <inputtype="search"name="googlesearch">
    3. 电话号码: <inputtype="tel"name="usrtel">

     

    7.HTML5 表单元素

     HTML5 有以下新的表单元素:

    标签描述
    <datalist><input>标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
    <keygen>><keygen> 标签规定用于表单的密钥对生成器字段。
    <output><output> 标签定义不同类型的输出,比如脚本的输出。

     <datalist> 元素规定输入域的选项列表。

    <datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

    使用 <input> 元素的列表属性与 <datalist> 元素绑定.

      
    1. <inputlist="browsers">
    2. <datalistid="browsers">
    3. <optionvalue="Internet Explorer">
    4. <optionvalue="Firefox">
    5. <optionvalue="Chrome">
    6. <optionvalue="Opera">
    7. <optionvalue="Safari">
    8. </datalist>

     

    8.HTML5 表单属性

     HTML5 的 <form> 和 <input>标签添加了几个新属性.

    <form>新属性:

    • autocomplete、novalidate

    <input>新属性:

    • autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step

     

    9.HTML5 语义元素

     

     HTML5提供了新的语义元素来明确一个Web页面的不同部分:

    • <header>
    • <nav>
    • <section>
    • <article>
    • <aside>
    • <figcaption>
    • <figure>
    • <footer>














    10.HTML5 Web 存储

     Web Storage DOM API 为Web应用提供了一个能够替代cookie的Javascript解决方案

    • sessionStorage—客户端数据存储,只能维持在当前会话范围内。
                 sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
    • localStorage—客户端数据存储,能维持在多个会话范围内。
                 localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

    对于大量复杂数据结构,一般使用IndexDB

     

    11.HTML5 离线Web应用(应用程序缓存)

     HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

    应用程序缓存为应用带来三个优势:

    1. 离线浏览 - 用户可在应用离线时使用它们
    2. 速度 - 已缓存资源加载得更快
    3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

    HTML5 Cache Manifest 实例

    下面的例子展示了带有 cache manifest 的 HTML 文档(供离线浏览):

      
    1. <!DOCTYPE HTML>
    2. <htmlmanifest="demo.appcache">
    3. <body>
    4. The content of the document......
    5. </body>
    6. </html>

    Manifest 文件

    manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

    manifest 文件可分为三个部分:

    • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
    • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
    • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面
            
      1. CACHE MANIFEST
      2. # 2012-02-21 v1.0.0
      3. /theme.css
      4. /logo.gif
      5. /main.js
      6. NETWORK:
      7. login.php
      8. FALLBACK:
      9. /html/ /offline.html

    12.HTML5 Web Workers

     

     当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

    web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。(相当于实现多线程并发)


     

    13.HTML5 SSE

     Server-Sent 事件指的是网页自动获取来自服务器的更新。

    以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。

    例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

    EventSource 对象用于接收服务器发送事件通知:

      
    1. var source=newEventSource("demo_sse.php");
    2. source.onmessage=function(event)
    3. {
    4. document.getElementById("result").innerHTML+=event.data +"<br>";
    5. };
    为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。
      
    1. <?php
    2. header('Content-Type: text/event-stream');
    3. header('Cache-Control: no-cache');
    4. $time = date('r');
    5. echo "data: The server time is: {$time}nn";
    6. flush();
    7. ?>

     

    14.HTML5 WebSocket

     WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象。


    CSS3

    CSS3选择器
    选择器示例示例说明CSS
    .class.intro选择所有class="intro"的元素1
    #id#firstname选择所有id="firstname"的元素1
    **选择所有元素2
    elementp选择所有<p>元素1
    element,elementdiv,p选择所有<div>元素和<p>元素1
    element elementdiv p选择<div>元素内的所有<p>元素1
    element>elementdiv>p选择所有父级是 <div> 元素的 <p> 元素2
    element+elementdiv+p选择所有紧接着<div>元素之后的<p>元素2
    [attribute][target]选择所有带有target属性元素2
    [attribute=value][target=-blank]选择所有使用target="-blank"的元素2
    [attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素2
    [attribute|=language][lang|=en]选择一个lang属性的起始值="EN"的所有元素2
    :linka:link选择所有未访问链接1
    :visiteda:visited选择所有访问过的链接1
    :activea:active选择活动链接1
    :hovera:hover选择鼠标在链接上面时1
    :focusinput:focus选择具有焦点的输入元素2
    :first-letterp:first-letter选择每一个<P>元素的第一个字母1
    :first-linep:first-line选择每一个<P>元素的第一行1
    :first-childp:first-child指定只有当<p>元素是其父级的第一个子级的样式。2
    :beforep:before在每个<p>元素之前插入内容2
    :afterp:after在每个<p>元素之后插入内容2
    :lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有<p>元素2
    element1~element2p~ul选择p元素之后的每一个ul元素3
    [attribute^=value]a[src^="https"]选择每一个src属性的值以"https"开头的元素3
    [attribute$=value]a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素3
    [attribute*=value]a[src*="44lan"]选择每一个src属性的值包含子字符串"44lan"的元素3
    :first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素3
    :last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素3
    :only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3
    :only-childp:only-child选择每个p元素是其父级的唯一子元素3
    :nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素3
    :nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素,从最后一个子项计数3
    :nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素3
    :nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素,从最后一个子项计数3
    :last-childp:last-child选择每个p元素是其父级的最后一个子级。3
    :root:root选择文档的根元素3
    :emptyp:empty选择每个没有任何子级的p元素(包括文本节点)3
    :target#news:target选择当前活动的#news元素(包含该锚名称的点击的URL)3
    :enabledinput:enabled选择每一个已启用的输入元素3
    :disabledinput:disabled选择每一个禁用的输入元素3
    :checkedinput:checked选择每个选中的输入元素3
    :not(selector):not(p)选择每个并非p元素的元素3
    ::selection::selection匹配元素中被用户选中或处于高亮状态的部分3
    :out-of-range:out-of-range匹配值在指定区间之外的input元素3
    :in-range:in-range匹配值在指定区间之内的input元素3
    :read-write:read-write用于匹配可读及可写的元素3
    :read-only:read-only用于匹配设置 "readonly"(只读) 属性的元素3
    :optional:optional用于匹配可选的输入元素3
    :required:required用于匹配设置了 "required" 属性的元素3
    :valid:valid用于匹配输入值为合法的元素3
    :invalid:invalid用于匹配输入值为非法的元素

     

    CSS3 边框(Borders)

     用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序

    属性说明CSS
    border-image设置所有边框图像的速记属性。3
    border-radius一个用于设置所有四个边框- *-半径属性的速记属性3
    box-shadow附加一个或多个下拉框的阴影3
       
    1. div
    2. {
    3. border:2px solid;
    4. border-radius:25px;
    5. box-shadow:10px10px5px#888888;
    6. border-image:url(border.png)3030 round;
    7. }

    CSS3 背景

     CSS3中包含几个新的背景属性,提供更大背景元素控制。

    顺序描述CSS
    background-clip规定背景的绘制区域。3
    background-origin规定背景图片的定位区域。3
    background-size规定背景图片的尺寸。3
       
    1. div
    2. {
    3. background:url(img_flwr.gif);
    4. background-repeat:no-repeat;
    5. background-size:100%100%;
    6. background-origin:content-box;
    7. }

    多背景

       
    1. body
    2. {
    3. background-image:url(img_flwr.gif),url(img_tree.gif);
    4. }
    CSS3 渐变

    CSS3 定义了两种类型的渐变(gradients):

    • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
    •     
      1. background: linear-gradient(direction, color-stop1, color-stop2,...);

    • 径向渐变(Radial Gradients)- 由它们的中心定义
    •     
      1. background: radial-gradient(center, shape size, start-color,...,last-color);


    CSS3 文本效果

     

    属性描述CSS
    hanging-punctuation规定标点字符是否位于线框之外。3
    punctuation-trim规定是否对标点字符进行修剪。3
    text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。3
    text-emphasis向元素的文本应用重点标记以及重点标记的前景色。3
    text-justify规定当 text-align 设置为 "justify" 时所使用的对齐方法。3
    text-outline规定文本的轮廓。3
    text-overflow规定当文本溢出包含元素时发生的事情。3
    text-shadow向文本添加阴影。3
    text-wrap规定文本的换行规则。3
    word-break规定非中日韩文本的换行规则。3
    word-wrap允许对长的不可分割的单词进行分割并换行到下一行。3

     

    CSS3 字体

     以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3,网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。您所选择的字体在新的CSS3版本有关于@font-face规则描述。您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

      
    1. <style>
    2. @font-face
    3. {
    4. font-family: myFirstFont;
    5. src: url(sansation_light.woff);
    6. }
    7. div
    8. {
    9. font-family:myFirstFont;
    10. }
    11. </style>

    CSS3 转换和变形

     

    2D新转换属性

    以下列出了所有的转换属性:

    Property描述CSS
    transform适用于2D或3D转换的元素3
    transform-origin允许您更改转化元素位置

    2D 转换方法

    函数描述
    matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。
    translate(x,y)定义 2D 转换,沿着 X 和 Y 轴移动元素。
    translateX(n)定义 2D 转换,沿着 X 轴移动元素。
    translateY(n)定义 2D 转换,沿着 Y 轴移动元素。
    scale(x,y)定义 2D 缩放转换,改变元素的宽度和高度。
    scaleX(n)定义 2D 缩放转换,改变元素的宽度。
    scaleY(n)定义 2D 缩放转换,改变元素的高度。
    rotate(angle)定义 2D 旋转,在参数中规定角度。
    skew(x-angle,y-angle)定义 2D 倾斜转换,沿着 X 和 Y 轴。
    skewX(angle)定义 2D 倾斜转换,沿着 X 轴。
    skewY(angle)定义 2D 倾斜转换,沿着 Y 轴。

     

    3D转换属性

    下表列出了所有的转换属性:

    属性描述CSS
    transform向元素应用 2D 或 3D 转换。3
    transform-origin允许你改变被转换元素的位置。3
    transform-style规定被嵌套元素如何在 3D 空间中显示。3
    perspective规定 3D 元素的透视效果。3
    perspective-origin规定 3D 元素的底部位置。3
    backface-visibility定义元素在不面对屏幕时是否可见。3

    3D 转换方法

    函数描述
    matrix3d(n,n,n,n,n,n,
    n,n,n,n,n,n,n,n,n,n)
    定义 3D 转换,使用 16 个值的 4x4 矩阵。
    translate3d(x,y,z)定义 3D 转化。
    translateX(x)定义 3D 转化,仅使用用于 X 轴的值。
    translateY(y)定义 3D 转化,仅使用用于 Y 轴的值。
    translateZ(z)定义 3D 转化,仅使用用于 Z 轴的值。
    scale3d(x,y,z)定义 3D 缩放转换。
    scaleX(x)定义 3D 缩放转换,通过给定一个 X 轴的值。
    scaleY(y)定义 3D 缩放转换,通过给定一个 Y 轴的值。
    scaleZ(z)定义 3D 缩放转换,通过给定一个 Z 轴的值。
    rotate3d(x,y,z,angle)定义 3D 旋转。
    rotateX(angle)定义沿 X 轴的 3D 旋转。
    rotateY(angle)定义沿 Y 轴的 3D 旋转。
    rotateZ(angle)定义沿 Z 轴的 3D 旋转。
    perspective(n)定义 3D 转换元素的透视视图。

     

    CSS3 过渡

     

    过渡属性

    下表列出了所有的过渡属性:

    属性描述CSS
    transition简写属性,用于在一个属性中设置四个过渡属性。3
    transition-property规定应用过渡的 CSS 属性的名称。3
    transition-duration定义过渡效果花费的时间。默认是 0。3
    transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3
    transition-delay规定过渡效果何时开始。默认是 0。3
      
    1. div
    2. {
    3. transition-property: width;
    4. transition-duration:1s;
    5. transition-timing-function: linear;
    6. transition-delay:2s;
    7. /* Safari */
    8. -webkit-transition-property:width;
    9. -webkit-transition-duration:1s;
    10. -webkit-transition-timing-function:linear;
    11. -webkit-transition-delay:2s;
    12. }

     

    CSS3 动画

     要创建CSS3动画,你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

    实例

    当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:

      
    1. @keyframes myfirst
    2. {
    3. 0%{background: red;}
    4. 25%{background: yellow;}
    5. 50%{background: blue;}
    6. 100%{background: green;}
    7. }

    下面的表格列出了 @keyframes 规则和所有动画属性:

    属性描述CSS
    @keyframes规定动画。3
    animation所有动画属性的简写属性,除了 animation-play-state 属性。3
    animation-name规定 @keyframes 动画的名称。3
    animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
    animation-timing-function规定动画的速度曲线。默认是 "ease"。3
    animation-delay规定动画何时开始。默认是 0。3
    animation-iteration-count规定动画被播放的次数。默认是 1。3
    animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3
    animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3


     

      
    1. div
    2. {
    3. animation-name: myfirst;
    4. animation-duration:5s;
    5. animation-timing-function: linear;
    6. animation-delay:2s;
    7. animation-iteration-count: infinite;
    8. animation-direction: alternate;
    9. animation-play-state: running;
    10. /* Safari and Chrome: */
    11. -webkit-animation-name: myfirst;
    12. -webkit-animation-duration:5s;
    13. -webkit-animation-timing-function: linear;
    14. -webkit-animation-delay:2s;
    15. -webkit-animation-iteration-count: infinite;
    16. -webkit-animation-direction: alternate;
    17. -webkit-animation-play-state: running;
    18. }

    CSS3 多列

    下表列出了所有 CSS3 的多列属性:

    属性描述
    column-count指定元素应该被分割的列数。
    column-fill指定如何填充列
    column-gap指定列与列之间的间隙
    column-rule所有 column-rule-* 属性的简写
    column-rule-color指定两列间边框的颜色
    column-rule-style指定两列间边框的样式
    column-rule-width指定两列间边框的厚度
    column-span指定元素要跨越多少列
    column-width指定列的宽度
    columns设置 column-width 和 column-count 的简写

     

    CSS3 盒模型

     在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框,主要包括以下用户界面属性:

    • resize:none | both | horizontal | vertical | inherit
    • box-sizing: content-box | border-box | inherit
    • outline:outline-color outline-style outline-width outine-offset

    resize属性指定一个元素是否应该由用户去调整大小。

    box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

    outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

     

    CSS3伸缩布局盒模型(弹性盒)

     CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

    引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

     下表列出了在弹性盒子中常用到的属性:

    属性描述
    display指定 HTML 元素盒子类型。
    flex-direction指定了弹性容器中子元素的排列方式
    justify-content设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
    align-items设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
    flex-wrap设置弹性盒子的子元素超出父容器时是否换行。
    align-content修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
    flex-flowflex-direction 和 flex-wrap 的简写
    order设置弹性盒子的子元素排列顺序。
    align-self在弹性子元素上使用。覆盖容器的 align-items 属性。
    flex设置弹性盒子的子元素如何分配空间。

     

    CSS3 多媒体查询

    从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

    清单 1. 使用媒体类型

      
    1. <linkrel="stylesheet"type="text/css"href="site.css"media="screen"/>
    2. <linkrel="stylesheet"type="text/css"href="print.css"media="print"/>
    清单 2. 媒体查询规则
      
    1. @media all and(min-width:800px){...}
    • @media all 是媒体类型,也就是说,将此 CSS 应用于所有媒体类型。
    • (min-width:800px) 是包含媒体查询的表达式,如果浏览器的最小宽度为 800 像素,则会告诉浏览器只运用下列 CSS。

    清单 3. and 条件

      
    1. @media(min-width:800px)and(max-width:1200px)and(orientation:portrait){...}

    清单 4.  or  关键词
      
    1. @media(min-width:800px)or(orientation:portrait){...}

    清单 5. 使用  not
      
    1. @media(not min-width:800px){...}

    展开全文
  • html5和Css3 的参考手册(中文chm版)

    万次阅读 2015-10-14 13:04:40
    html5的其实就是利用w3c的在线版做成的chm,只是希望对没网络的朋友一点帮助。(哈哈..我就是那样有时不能上网的)。  包含了HTML 5 中的一些新特性:嵌入音频、视频、图片的函数、客户端数据存储,以及交互式文档...

     html5的其实就是利用w3c的在线版做成的chm,只是希望对没网络的朋友一点帮助。(哈哈..我就是那样有时不能上网的)。

        包含了HTML 5 中的一些新特性:嵌入音频、视频、图片的函数、客户端数据存储,以及交互式文档。其他特性包括新的页面元素,比如 <header>, <section>, <footer>, 以及 <figure>。

    在线版地址:http://www.w3school.com.cn/html5/index.asp

    下载地址:http://vleugel.googlecode.com/files/html5_manual.chm

        css3,前些天的看到一份挺好完整的现有css3手册,由Tencent的ISD Webteam团队从基础语法到示例制作,根据W3C工作草案进行翻译,并结合自身的沉淀制作示例,完成了CSS 3参考手册(中文版)的编译,是目前个人感觉最值得拥有的一个CSS 3工具书。

    包含的一些css3新功能如圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa – 加入透明色、文字阴影等等及现在浏览器的兼容识别程度都弄得很清楚。

    下载地址:http://vleugel.googlecode.com/files/css3.0_manual.chm

    w3school-中文参考书离线chm版下载

        此CHM文件是为了学习方便制作的,去除了原网页中的广告。可以方便的使用索引和搜索。使用索引时要在索引项前加上所属的语言,比如要查找css的padding,就在索引框中输入“css padding”,就可以找到了。

    具体内容可以参考http://www.w3school.com.cn/

    下载地址:http://vleugel.googlecode.com/files/w3school.rar

     

     

    http://www.css88.com/book/css/

    展开全文
  • HTML5+CSS3学习总结(完结)

    万次阅读 多人点赞 2020-06-14 21:45:05
    一、HTML5的语义化 二、CSS3动画 三、CSS3阴影 四、CSS3过渡(非常重要) 五、弹性布局 六、栅格布局 七、渐变 八、媒体查询

    前端小白简单总结,参考黑马课程以及其他内容整合,还望各位大佬多多指教~

    一、HTML5

    1)什么是HTML5

    1. HTML5简介

    万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,作为HTML语言,具有新的元素、属性和行为。
    在这里插入图片描述

    2. 广义的HTML5
    • 广义的HTML5是HTML5本身 + CSS3 + JavaScript
    • 这个集合有时称为HTML5和朋友,通常缩写为HTML5
    • 虽然HTML5的一些特性仍然不被某些浏览器支持,但是它是一种发展趋势
    • HTML5 MDN介绍:

    2)H5新增语义化标签

    以前布局,我们基本用div来做,div对于搜索引擎来说,是没有语义的
    在这里插入图片描述

    新增语义化标签
    • header — 头部标签
    • nav — 导航标签
    • article — 内容标签
    • section — 块级标签
    • aside — 侧边栏标签
    • footer — 尾部标签
      在这里插入图片描述

    注意

    • 这种语义化标签主要针对搜索引擎
    • 这些新标签在页面中可以使用多次
    • IE9 浏览器中,需要把这些语义化标签都转换为块级元素
    • 语义化标签,在移动端支持比较友好

    3)H5新增多媒体标签

    多媒体标签包含两个:

    • 音频:<audio>
    • 视频:<video>
      使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用落后的flash和其他浏览器插件。
    1. <audio>音频标签

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

    • 音频格式
      当前, <audio>元素支持三种音频格式:
      在这里插入图片描述
      语法格式:
        <audio src='media/test.mp3 ' controls='controls'></audio>
    

    因为不同浏览器支持不同格式,我们采取的解决方案是我们为这个音频准备多个格式

        <!-- 谷歌浏览器把autoplay属性给我们禁用了 -->
        <audio controls="controls">
        <source src="media/test.mp3" type="audio/mpeg">
        <source src="media/test.mp3" type="audio/ogg">
        </audio>
        您的浏览器不支持audio标签播放音频
    
    2. <video>视频标签

    在这里插入图片描述

    1. 语法格式:
        <video src='media/video.mp4 ' controls='controls'></video>
    
        <!-- 谷歌浏览器把autoplay属性给我们禁用了 有解决方案:给视频添加静音属性-->
        <video muted = "muted" loop = "loop" poster="media/pig.jpg">
        <source src="media/move.ogg" type="video/mpeg"/>
        <source src="media/move.mp4" type="video/ogg"/>
        </video>
        您的浏览器不支持video标签播放视频
    
    1. <video>视频标签常见属性
      在这里插入图片描述
    2. 总结:
    • 音频标签和视频标签使用基本一致
    • 浏览器支持情况不同
    • 谷歌浏览器把音频和视频自动播放禁止了
    • 我们可以给视频标签添加muted属性可以自定义播放视频,音频不可以
    • 视频标签是重点,我们经常设置自动播放,不使用controls控件,循环和设置大小属性

    4)、HTML5新增input表单、表单属性

    在这里插入图片描述

        <ul>
        <li>邮箱:<input type="email" /></li>
        <li>网址:<input type="url" /></li>
        <li>日期:<input type="date" /></li>
        <li>时间:<input type="date" /></li>
        <li>数量:<input type="number" /></li>
        <li>手机号码:<input type="tel" /></li>
        <li>搜索:<input type="search" /></li>
        <li>颜色:<input type="color" /></li>
        <input type="submit" value="提交">
        </ul>
    

    在这里插入图片描述在这里插入图片描述

        <form action="">
            用户名:<input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off" >
            <input type="submit" value="提交">
            上传头像:<input type="file" name="" id="" multiple="multiple">
    

    在这里插入图片描述

    二、CSS3

    在这里插入图片描述

    CSS3现状

    • 在CSS2的基础上新增(扩展)样式
    • 移动端支持优于PC端
    • 不断改进中
    • 应用相对广泛

    1. CSS3属性(结构)选择器

    在这里插入图片描述

    2. CSS3结构伪类选择器

    在这里插入图片描述
    nth-child 详解

    • 注意:本质上就是选中第几个子元素

    • n 可以是数字、关键字、公式

    • n 如果是数字,就是选中第几个

    • 常见的关键字有 even 偶数、odd 奇数

    • 常见的公式如下(如果 n 是公式,则从 0 开始计算)

    • 但是第 0 个元素或者超出了元素的个数会被忽略
      在这里插入图片描述
      nth-childnt-of-type 的区别

    • nth-child 选择父元素里面的第几个子元素,不管是第几个类型

    • nt-of-type 选择指定类型的元素

    3. CSS3伪元素选择器

    在这里插入图片描述
    注意事项:

    • beforeafter 必须有 content 属性
    • before 在内容前面,after 在内容后面
    • beforeafter 创建的是一个元素,但是属于行内元素
    • 创建出来的元素在 Dom 中查找不到,所以称为伪元素
    • 伪元素和标签选择器一样,权重为 1
      典型应用:
      添加字体图标
    p {
       width: 220px;
       height: 22px;
       border: 1px solid lightseagreen;
       margin: 60px;
       position: relative;
    }
    p::after {
      content: '\ea50';
      font-family: 'icomoon';
      position: absolute;
      top: -1px;
      right: 10px;
    }
    

    4. CSS3过渡(非常重要)

    过渡动画:是从一个状态渐渐的过渡到另外一个状态,IE9以下不支持,经常和:hover一起搭配使用
    语法格式:

    transition:要过渡的属性 花费时间 运动曲线 何时开始
    
    属性描述CSS
    transition简写属性,用于在一个属性中设置四个过渡属性。3
    transition-property规定应用过渡的 CSS 属性的名称。属性就是你想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以。3
    transition-duration定义过渡效果花费的时间(必须写单位)。默认是 0。3
    transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。3
    transition-delay规定过渡效果何时开始,可以设置 延迟触发时间。默认是 0,鼠标触发就立即开始。3
    运动曲线示意图:
    在这里插入图片描述
    样例:
    div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
            /* transtion 过渡的意思  这句话写到div里面而不是 hover里面 
            过渡写到本身上,谁做动画,给谁加*/
            transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
            
      
                
    }
    div:hover {  /* 鼠标经过盒子,我们的宽度变为400 */
    
                width: 600px;
                height: 300px
    }
    
    transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */
    

    常见效果:
    按钮变换底色 图片移动 小米效果 (阴影效果) 传智导航栏效果 等等

    5. CSS3 2D转换

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

    • 移动:translate
    • 旋转:rotate
    • 缩放:scale
    1)二维坐标系

    2D转换是改变标签在二维平面上的位置和形状的一种技术,
    在这里插入图片描述

    2)2D转换之移动translate

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

    1. 语法:
        transform: translate(x, y);
                /* 或者分开写 */
        transform: translateX(x);
        transform: translateY(y);
    
    1. 重点
    • 定义2D转换中的移动,沿着X和Y轴移动元素
    • translate最大的优点:不会影响到其他元素的位置
    • translate中的百分比单位是相对于自身元素的translate:(50%, 50%);
    • 对行内标签没有效果
    3)2D转换之旋转rotate

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

    1. 语法
        transform: rotate(度数);
    
    1. 重点
    • rotate里面跟度数,单位是deg比如rotate(45deg)
    • 角度为正时为顺时针,负时为逆时针
    • 默认旋转的中心点是元素的中心点
    案例:三角形

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>三角形</title>
        <style>
            div {
                position: relative;
                width: 249px;
                height: 35px;
                border: 1px solid #000;
            }
            
            div::after {
                content: "";
                position: absolute;
                top: 8px;
                right: 15px;
                width: 10px;
                height: 10px;
                border-bottom: 1px solid #000;
                border-right: 1px solid #000;
                transform: rotate(45deg);
                transition: all 0.2s;
            }
            /* 鼠标经过div 里面的三角旋转 */
            div:hover::after {
                transform: rotate(225deg);
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>
    

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

    4)2D转换中心点transform-origin

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

    1. 语法
        transform-origin: x y;
    
    1. 重点
    • 注意后面的参数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">
        <title>旋转案例</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                border: 1px solid pink;
                margin: 100px auto;
                overflow: hidden;
            }
            
            div::before {
                content: "黑马";
                display: block;
                width: 200px;
                height: 200px;
                background-color: lightgreen;
                transform: rotate(180deg);
                transform-origin: left bottom;
                transition: all 0.2s;
            }
            /* 鼠标经过div 里面的before复原 */
            
            div:hover::before {
                transform: rotate(0deg);
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>
    

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

    5)2D转换之缩放scale

    可以放大和缩小,只要给元素添加上了这个属性就能控制它放大还是缩小
    在这里插入图片描述

    1. 语法
        transform: scale(x, y);
    
    1. 注意
    • 注意其中的x和y用逗号分隔,里面的数字不跟单位就是倍数
    • transform: scale(1, 1):宽和高都放大一倍,相当于没有放大
    • transform: scale(2, 2):宽和高都放大了2倍
    • transform: scale(2):只写一个参数,第二个参数则和第一个参数一样
    • transform: scale(0.5, 0.5):缩小
    • scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
    案例:图片放大
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>图片放大</title>
        <style>
            div {
                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>
    

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

    案例:分页按钮
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>分页按钮案例</title>
        <style>
            li {
                float: left;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                margin-left: 10px;
                margin-top: 20px;
                border-radius: 50%;
                list-style: none;
                border: 1px solid green;
                cursor: pointer;
                transition: all .4s;
            }
            
            li:hover {
                transform: scale(1.2);
            }
        </style>
    </head>
    
    <body>
        <div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
            </ul>
        </div>
    </body>
    
    </html>
    

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

    6)2D转换综合写法

    注意:

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

    6. CSS3动画

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

    1)动画的基本使用

    制作动画分为两步:

    1. 先用keyframes定义动画(类似定义类选择器)
      动画序列
    • 0%是动画的开始,100%是动画的完成,这样的规则就是动画序列
    • 在**@keyframes**中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果
    • 动画是使元素从一种样式逐渐便化为另一种样式的效果,你可以改变任意多的样式任意多的次数
    • 请用百分比来规定变化发生的时间,或用关键词 " form " 和 ‘’ to " ,等同于0%100%
      在这里插入图片描述
        @keyframes 动画名称 {
            0%{
                width: 100px;
            }
            100%{
                width: 200px;
            }   
        }
    
    1. 再使用(调用)动画
      div{
           width: 200px;
           height: 200px;
           background-color: green;
           margin: 100px auto;
           /* 调用动画 */
           animation-name: 动画名称;
           /* 持续时间 */
           animation-duration: 持续时间;
       }
    
    2)动画常用属性

    在这里插入图片描述

    3)动画简写属性

    animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
    animation: name duration timing-function delay iteration-count direction fill-mode;

    • 简写属性里面不包含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">
        <title>热点图</title>
        <style>
            body{
                background-color: #333;
            }
            .map{
                position: relative;
                width: 747px;
                height: 616px;
                margin: 0 auto;
                background: url('media/map.png') no-repeat;
            }
            .city{
                position: absolute;
                top: 227px;
                right: 191px;
            }
            .tb{
                top: 499px;
                right: 80px;
            }
            .dotted{
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #09f;
            }
            div[class^='pulse']{
                position: absolute;
                top: 50%;
                left: 50%;
                width: 10px;
                height: 10px;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                box-shadow: 0 0 12px #009dfd;
                animation: pulse 1.2s linear infinite;
            }
            .city .pulse2{
                animation-delay: 0.4s;
            }
            .city .pulse3{
                animation-delay: 0.8s;
            }
            @keyframes pulse {
                0%{}
                70%{
                    /* 用scale会导致阴影也放大 */
                    /* transform: scale(2); */
                    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 class="pulse1"></div>
                    <div class="pulse2"></div>
                    <div class="pulse3"></div>
                </div>
            </div>
            <div class="city tb">
                <div class="dotted">
                    <div class="pulse1"></div>
                    <div class="pulse2"></div>
                    <div class="pulse3"></div>
                </div>
            </div>
        </div>
    </body>
    </html>
    

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

    如果用scale结果如图:
    在这里插入图片描述

    4)速度曲线细节

    animation-timing-function:规定动画的速度曲线,默认是ease
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>速度曲线案例</title>
        <style>
            div{
                width: 0;
                height: 20px;
                background-color: lightgreen;
                font-size: 12px;
                /* 让文字强制一行显示 */
                white-space: nowrap;
                /* steps就是分几步来完成动画 */
                animation: move 5s steps(8) forwards;
                
            }
            @keyframes move {
                0%{
                    width: 0;
                }
                100%{
                    width: 100px;
                }
            }
        </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">
        <title>奔跑的熊</title>
        <style>
            body{
                background: url('media/bg1.png') no-repeat;
                animation: bgback 6s steps(8) infinite;
            }
            div{
                position: absolute;
                width: 200px;
                height: 100px;
                background: url('media/bear.png') no-repeat;
                animation: bear 0.4s steps(8) infinite, move 2s steps(8) forwards; 
            }
            @keyframes bear {
                0%{
                    background-position: 0 0;
                }
                100%{
                    background-position: -1600px 0;
                }
            }
            @keyframes move {
                0%{
                    left: 0;
                    top: 200px;
                }
                100%{
                    left: 50%;
                    top: 200px;
                    transform: translateX(-50%);
                }
            }
            @keyframes bgback {
                0%{
                    background-position: 0 0;
                }
                100%{
                    background-position: -1600px 0;
                }
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>
    

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

    7. 3D转换

    在这里插入图片描述

    特点
    • 近大远小
    • 物体后面遮挡不可见
    1. 三维坐标系

    在这里插入图片描述
    三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。

    • x轴:水平向右 注意:x右边是正值
    • y轴:垂直向下 注意:y下面是正值
    • z轴:垂直屏幕 注意:往外面是正值
    2. 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分别要移动的轴的方向的距离(x、y、z没有不可省略,写0)
    3. 透视perspective(一般给父盒子添加)

    在这里插入图片描述
    在2D平面产生近大远小视觉立体,但是只是效果是二维的

    • 如果想要在网页产生3D效果需要透视(可理解成3D物体投影在2D平面内)
    • 模拟人类的视觉位置,可认为安排一只眼睛去看
    • 透视也称为视距:视距就是人的眼睛到屏幕的距离
    • 距离视觉点越近的在电脑平面成像就越大,越远成像就越小
    • 透视的单位是像素
      透视写在被观察元素的父盒子上面的
      d:就是视距,视距就是一个距离人的眼睛到屏幕的距离
      z:就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大。
    4. translateZ(一般给里面的盒子添加)

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

    5. 3D旋转rotate3d

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

    • transform: rotateX(45deg):沿着x轴正方向旋转45度
    • transform: rotateY(45deg):沿着y轴正方向旋转45度
    • transform: rorateZ(45deg):沿着z轴正方向旋转45deg
    • transform: rotate3d(x, y, z, deg):沿着自定义轴旋转,deg为角度(了解)
      沿x轴旋转:单杠
      在这里插入图片描述
      对于元素旋转的方向的判断,需要用到左手准则
      左手准则
    • 左手的手拇指指向x轴的正方向
    • 其余手指的弯曲方向就是该元素沿着x轴旋转的方向
      在这里插入图片描述
      沿y轴旋转:钢管舞
      在这里插入图片描述
      对于元素旋转的方向的判断,需要用到左手准则

    左手准则

    • 左手的手拇指指向y轴的正方向
    • 其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)
      在这里插入图片描述
      沿z轴旋转:抽奖转盘
      在这里插入图片描述
      transform: rotate3d(x, y, z, deg):沿着自定义轴旋转deg为角度(了解即可)
      xyz是表示旋转轴的矢量,是标识你是否希望沿着该轴旋转,最后一个标示旋转的角度。
    6. 3D呈现transform-style

    在这里插入图片描述

    • 控制子元素是否开启三维立体环境
    • transform-style: flat子元素不开启3d立体空间,默认的
    • transform-style: preserve-3d;子元素开启立体空间
    • 代码写给父级,但是影响的是子盒子
    • 这个属性很重要
    案例:两面翻转的盒子
    实现步骤
    1. 搭建HTML结构
    • box父盒子里面包含两个子盒子
    • box是翻转的盒子,front是前面盒子,back是后面盒子
    1. CSS样式
    • box指定大小,切记要添加3d呈现
    • back盒子要沿着Y轴翻转180度
    • 最后鼠标经过box沿着Y旋转180deg
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>3D导航栏</title>
        <style>
            body {
                perspective: 400px;
            }
            
            .box {
                position: relative;
                width: 300px;
                height: 300px;
                margin: 200px auto;
                transition: all .5s;
                /* 让背面的盒子保留立体空间,给父级添加 */
                transform-style: preserve-3d;
            }
            
            .front,
            .back {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                font-size: 24px;
                text-align: center;
                line-height: 300px;
            }
            
            .front {
                background-color: lightcoral;
                z-index: 1;
            }
            
            .back {
                background-color: lightgreen;
                /* 像手机一样背靠背旋转 */
                transform: rotateY(180deg);
            }
            
            .box:hover {
                transform: rotateY(180deg);
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="front">是日前端</div>
            <div class="back">在这里等你</div>
        </div>
    </body>
    
    </html>
    
    案例:3D导航栏
    实现步骤:
    1. 搭建HTML结构
    • li做导航栏
    • .box是翻转的盒子,front是前面的盒子,bottom是底下的盒子
      思路:
      在这里插入图片描述
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>3D导航栏</title>
        <style>
            li {
                list-style: none;
                perspective: 500px;
            }
            
            ul {
                margin: 100px;
            }
            
            ul li {
                float: left;
                width: 100px;
                height: 50px;
                margin-left: 10px;
            }
            
            .box {
                position: relative;
                width: 100%;
                height: 100%;
                transition: all .5s;
                transform-style: preserve-3d;
            }
            
            .front,
            .bottom {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                line-height: 50px;
                text-align: center;
            }
            
            .front {
                background-color: lightgreen;
                transform: translateZ(25px);
            }
            
            .bottom {
                background-color: yellowgreen;
                /* 这里的x轴一定是负值 */
                /* 如果有移动或者其他样式,必须先写移动 */
                transform: translateY(25px) rotateX(-90deg);
            }
            
            .box:hover {
                transform: rotateX(90deg);
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li>
                <div class="box">
                    <div class="front">是日前端</div>
                    <div class="bottom">在这里等你</div>
                </div>
            </li>
            <li>
                <div class="box">
                    <div class="front">是日前端</div>
                    <div class="bottom">日拱一卒</div>
                </div>
            </li>
            <li>
                <div class="box">
                    <div class="front">是日前端</div>
                    <div class="bottom">在这里等你</div>
                </div>
            </li>
        </ul>
    </body>
    
    </html>
    

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

    H5C3综合案例:旋转木马
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>旋转木马</title>
        <style>
            body{
                perspective: 800px;
            }
            section{
                position: relative;
                width: 300px;
                height: 200px;
                margin: 100px auto;
                transform-style: preserve-3d;
                animation: rotate 8s linear infinite;
                background: url(images/pig.jpg) no-repeat;
            }
            section div {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url(images/dog.jpg) no-repeat;
            }
            section div:first-child{
                transform: rotateY(0deg) 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:last-child{
                transform: rotateY(320deg) translateZ(300px);
            }
            section:hover{
                animation-play-state: paused;
            }
            @keyframes rotate {
                0%{
                    transform: rotateY(0);
                }
                100%{
                    transform: rotateY(360deg);
                }
            }
        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    </html>
    

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

    练习1

    在这里插入图片描述
    HTML结构:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>01.《阴阳师》二维码</title>
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
        <div class="scan">
            <img class="qrcode" src="images/57b280b496dee47507111c56NRN73rVj.png" alt="">
            <img class="line" src="images/line_dd0b705.png" alt="">
        </div>
    </body>
    </html>
    

    CSS样式:

    *{
        margin: 0;
        padding: 0;
    }
    body{
        padding: 50px;
    }
    .scan{
        position: relative;
        /* margin: 50px; */
        width: 145px;
        height: 297px;
        background: url(../images/index_z_71df05e.png) 0 0 no-repeat;
    }
    .qrcode{
        position: absolute;
        display: block;
        left: 19px;
        top: 45px;
        width: 107px;
    }
    .line{
        position: absolute;
        left: 9px;
        top: -3px;
        width: 120px;
        height: 15px;
        -webkit-animation: sao 4s linear infinite;
        -moz-animation: sao 4s linear infinite;
        -ms-animation: sao 4s linear infinite;
        animation: sao 4s linear infinite;
    }
    @keyframes sao{
        0%{
            top: 42px;
        }
        50%{
            top: 145px;
        }
        100%{
            top: 42px;
        }
    }
    

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

    练习2

    在这里插入图片描述

    7. 浏览器私有前缀

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

    7.1 私有前缀
    • -moz-:代表firefox浏览器私有属性
    • -ms-:代表ie浏览器私有属性
    • -webkit-:代表safari、chrome私有属性
    • -o-:代表Opera私有属性
    7.2 提倡的写法

    在这里插入图片描述

    配套资料请关注公众号“是日前端”,输入关键词"html5"或者“css3”获取相关资源

    如果大家想一起交流学习,共同进步,欢迎搜索公众号“是日前端”,输入关键词如:前端基础,获取资料,资料刚开始整理,目前还在完善中,点击交流群按钮进交流群,群里仅限技术交流、面试交流等,需要其它相关资料可以群里说,后续交流群人数增多会考虑特色内容,再次感谢大家的支持~

    展开全文
  • HTML5+CSS3 精美登陆界面源码

    千次下载 热门讨论 2016-01-19 09:52:44
    3个很精美的登陆界面,全都是用HTML5+CSS3开发的,所以可能不适合低版本IE浏览器。大家可以下来看看,做的超级漂亮的。
  • HTML5+CSS3期末考试大题

    万次阅读 多人点赞 2019-01-08 21:24:01
    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;file&lt;/title&gt; &lt;style&gt; .content{ w
  • 疯狂html5+css3+javascript完整版

    热门讨论 2013-12-10 17:26:36
    (1) 本书很多HTML 5CSS 3代码必须在高版本的浏览器中才能看到效果。建议读者安装Opera 11.60、Firefox 10.0、Chrome 17.0以上版本的浏览器。 (2) 本书少量程序需要使用Java编译、运行,建议安装jdk-7u3-...
  • 您可能还喜欢 让人眼花缭乱的 HTML5 和 JavaScript 效果 使用 CSS3 可以实现的五种很酷很炫的效果 九个让人难以置信的HTML5和JavaScript实验 推荐18个
  • HTML5+CSS3实现轮播图

    千次阅读 2020-08-07 18:58:54
    利用CSS3的新属性,可以实现轮播,主要是利用CSS3的动画的三要素: (1)、先创建一个名称叫什么的动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
  • 20个HTML5&CSS3超酷应用

    千次下载 热门讨论 2014-02-24 20:00:26
    20个HTML5&CSS3超酷应用
  • 【前端】HTML5CSS3学习笔记

    千次阅读 2022-03-27 22:32:45
    最终达到系统掌握HTML5CSS3的所有常用重难点的目标。 HTML5 构成 Canvas(2D3D) Channel消息传送 Cross-document消息传送 Geolocation MathML Microdata Server-Sent Events Scalable Vector Graphics(SVG...
  • 基于HTML5、JavaScript和CSS3的网页开发应用技术的网页

    万次阅读 多人点赞 2019-11-27 19:54:42
    我的网站的构思是建一个基于HTML5、JavaScript和CSS3的网页开发应用技术的网页,网站的主题思想是同舟共济六十载、民族团结一家亲。网站包括主页、成就、广西福利、民族活动、展望未来以及关于。网站最大的特点是...
  • 基于html5+css3实现的精美聊天界面demo

    千次下载 热门讨论 2015-07-27 14:53:31
    基于HTML5+css3实现的两人即时通讯聊天界面,界面风格相当漂亮,可直接使用,也可简单修改为自己想要的样式,仅供大家参考。
  • 30个漂亮的HTML5和CSS3下拉菜单

    万次阅读 2013-12-05 17:11:31
    一些漂亮的HTML5和CSS3下拉菜单列表。这些例子可以帮助你得到灵感。让我们一起来看看这些下拉菜单。   Dark Menu: Pure CSS3 Two Level Menu  Pure CSS3 LavaLamp Menu  HTML5/CSS3 Gray Navigation Menu...
  • 8个超震撼的HTML5和CSS3动画源码

    千次阅读 2017-08-01 09:59:28
    8个超震撼的HTML5和CSS3动画源码 981 人浏览 发表回复 HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要。Flash在几年之后肯定会消亡,...
  • HTML和HTML5,css和css3的区别有那些?

    千次阅读 2020-01-27 13:15:50
    HTML和HTML5的区别: 其实说白了,就是ES5ES6的区别,无非就是换汤不换药,其实这个说法也不太对,是加了一些调料而已,HTML是前端搭建页面的必须品,但是随着人们开发的需求速度,后期维护代码可读性,各个...
  • 本套Web前端基础全家桶教程是全新录制,将前端学习的基础内容融汇为148节课,涵盖了HTML、CSS、HTML5和CSS3的核心技术点。通过对本教程的学习,可以帮助初学者快速上手,并完成大部分静态网页的开发。 教程的具体...
  • H5+css3面试题总结

    万次阅读 多人点赞 2019-08-22 08:59:41
    H5+css3面试题总结 哈喽,各位小伙伴们,又到了一年一度的毕业季,俗话说的话:毕业等于失业。...一、html5和html的区别: 1.html5新增了语义化标签:footer 、nav、section… 2.html5完全支持css3 3.支持本地离线...
  • HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 ...
  • HTML5和CSS3技术是目前整个网页的基础。《HTML5与CSS3实例教程(第2版)》共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法。这一版全面讲解了最新的HTML5和CSS3技术,所有实例均使用最新特性实现,针对的是...
  • HTML和CSS知识点总结(包括H5C3)

    千次阅读 2021-07-28 12:05:09
    HTML和CSS知识点总结 1.常用的HTML标签 标题标签 <h1></h1>~<h6></h6> 段落标签<p></p>换行标签<br/> 文本格式化标签 加粗<strong></strong><b>&...
  • HTML5+CSS3实现的立方体翻转3D全屏焦点图特效源码

    千次下载 热门讨论 2014-09-25 14:22:58
    这是一款非常大气华丽的HTML5/CSS3 3D实现的全屏3D焦点图特效插件,在页面的两侧,有两个带有立体浮动效果的左右箭头进行图片的切换。其焦点图的图片切换方式是3D效果的,类似立方体翻转一样,焦点图默认显示文字,...
  • CSS3+HTML5+从入门到精通

    热门讨论 2014-07-03 12:44:13
    CSS3+HTML5+从入门到精通 CSS3+HTML5+从入门到精通》-中文学习教程
  • 简洁的HTML5和CSS3免费企业网站模板源码下载 源代码下载地址:http://www.zuidaima.com/share/1799440253422592.htm
  • HTML5+CSS3大风车旋转动画是一款很酷的HTML5动画,是一个可以旋转的大风车动画效果。
  • CSS3 +HTML5入门到精通

    千次下载 热门讨论 2014-07-01 16:58:08
    HTML+5+从入门到精通》-中文学习教程

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,873,238
精华内容 749,295
关键字:

html5和css3