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

Yolanda_Lu
399 阅读5分钟

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

  • 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属性，达到一种动画的效果。

区别

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


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

avatar
文章
阅读
粉丝