前端技術面——（CSS3新特性）

Yolanda_Lu發表於2018-10-05
前端CSSS3

1、transition和animation有什麼區別？

  • transition，CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容：指定要新增效果的CSS屬性指定效果的持續時間。需要一種條件來觸發這種轉變。

    特點

    • 需要事件觸發，所以沒法在網頁載入時自動發生
    • 是一次性的，不能重複發生，除非一再觸發
    • 只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態
    • 一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

    觸發方式

    • :hover
    • :focus
    • :checked
    • 媒體查詢觸發
    • javascript觸發

    示例

      #box {
      margin: auto;
      height: 100px;
      width: 100px;
      background: green;
      transition: all 1s ease-in 0s;
  }

  #box:hover {
      transform: rotate(180deg) scale(.5, .5);
      background-color: red;
  }
複製程式碼

前端技術面——（CSS3新特性）

  • animation

    組成：

    • 通過類似Flash動畫中的幀來宣告一個動畫
    • 在animation屬性中呼叫關鍵幀宣告的動畫。

    示例

    div{
  animation:myfirst 4s infinite alternate;
}

@keyframes myfirst
{
  0% {background:red;}
  50%{background:blue; transform: translate(20px,-20px)}
  75%{background:green;transform: translate(40px,0px) scale(1.5)}
  100% {background:yellow;transform: rotate(-45deg)}
}
複製程式碼

    特點

    • animation在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種動畫的效果。

前端技術面——（CSS3新特性）

區別

  • Animation也是通過指定某一個屬性（如width、left、transform等）在兩個值之間如何過渡來實現動畫的，與Transition不同的是，Animation可以通過keyframe顯式控制當前幀的屬性值，而Transition只能隱式來進行（不能指定每幀的屬性值），所以相對而言Animation的功能更加靈活。
  • 另外一個區別是Animation通過模擬屬性值改變來實現動畫，動畫結束之後元素的屬性沒有變化；而Transition確實改變了元素的屬性值，動畫結束之後元素的屬性發生了變化

2、CSS3新特性有哪些？

  • animation
  • transition
  • transform
    • scale
    • scale3d
    • translate
    • translate3d
    • rotate
    • rotate3d
    • skew
    • perspective
    • transform本質上是一系列變形函式，分別是translate位移，scale縮放，rotate旋轉，skew扭曲，matrix矩陣。
  • 偽元素
  • 邊框
    • border-radius
    • box-shadow
    • border-image
  • 背景
    • background-size
    • background-origin
    • background-clip
    • background-image
  • 文字
    • text-shadow
    • text-wrap
    • @font-face

3、H5新特性

1.語意特性,新增 <nav>導航、<audio>音訊, <video>視訊,<source>原始檔,<header>頁面頭部、<section>章節、<aside>邊欄、<article>文件內容、<footer>頁面底部、<section>章節、<aside>邊欄、<article>文件內容、<footer>頁面底部、 <embed>, <track>等標籤

2.多媒體， 用於媒介回放的 video 和 audio 元素

3.影象效果，用於繪畫的 canvas 元素，svg元素等

4.離線 & 儲存,對本地離線儲存的更好的支援,local Store,Cookies等

5.裝置相容特性 ，HTML5提供了前所未有的資料與應用接入開放介面。使外部應用可以直接與瀏覽器內部的資料直接相連，

6.連線特性，更有效的連線工作效率，使得基於頁面的實時聊天，更快速的網頁遊戲體驗，更優化的線上交流得到了實現。HTML5擁有更有效的伺服器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特效能夠幫助我們實現伺服器將資料“推送”到客戶端的功能

7.效能與整合特性，HTML5會通過XMLHttpRequest2等技術，幫助您的Web應用和網站在多樣化的環境中更快速的工作

8.地理定位
h5提供了Geolocation API訪問地理位置，即通過window.navigator.geolocation來實現訪問。

4、Canvas和SVG

Canvas 和 SVG 都允許您在瀏覽器中建立圖形，但是它們在根本上是不同的。highchart是基於svg技術的，而echart是基於canvas技術的。

描述

Canvas

  • 通過Javascript來繪製2D圖形。
  • 是逐畫素進行渲染的。
  • 其位置發生改變，會重新進行繪製。

SVG

  • 一種使用XML描述的2D圖形的語言
  • SVG基於XML意味著，SVG DOM中的每個元素都是可用的，可以為某個元素附加Javascript事件處理器。
  • 在 SVG 中，每個被繪製的圖形均被視為物件。如果SVG物件的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

比較

Canvas

  • 依賴解析度
  • 不支援事件處理器
  • 弱的文字渲染能力
  • 能夠以 .png 或 .jpg 格式儲存結果影象
  • 最適合影象密集型的遊戲，其中的許多物件會被頻繁重繪

SVG

  • 不依賴解析度
  • 支援事件處理器
  • 最適合帶有大型渲染區域的應用程式（比如谷歌地圖）
  • 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
  • 不適合遊戲應用

示例

<svg style="background:pink;width:100%;height:200px">      
    <rect x="10" y="50" width="100" height="100" fill="blue"  stroke="yellow" stroke-weight="30"/>
    <circle cx="200" cy="100" r="50" fill="blue" />
    <line x1="360" y1="10"  x2="460" y2="220" fill="blue" stroke="yellow"/>
    <ellipse cx="550" cy="100" rx="100" ry="80" fill="yellowgreen"/>
    <polyline points="700,50 800,50 800,150 700,150  700,50" stroke-width="1" stroke="yellow" fill="white"/>
 </svg>
複製程式碼

前端技術面——（CSS3新特性）

<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid red">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ct=c.getContext("2d");
    ct.fillStyle="yellowgreen";
    ct.fillRect(5,10,150,60);
</script>
複製程式碼

前端技術面——（CSS3新特性）

相關文章