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>
复制代码