Html5和css3以及几种动画的不同?

HTML5

1. 语义化更好的内容标签(header, nav, footer, aside, article, section 

2. 音频、视频API(audio,video) 

3.表单控件,calendardatetimeemailurlsearch 等等

4.本地离线存储: localStorage(长期存储数据)和sessionStorage(浏览器关闭就删除)

5.盒子模型 

box-sizing: content-box  border-box    inheri

6.弹性布局 

display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果超出一行,按比例压缩 flex:1; 子元素设置,设置子元素如何分配父元素的空间,flex:1,子元素宽度占满整个父元素align-items:center 定义子元素在父容器中的对齐方式,center 垂直居中justify-content:center 设置子元素在父元素中居中,前提是子元素没有把父元素占满,让子元素水平居中。

7.元素拖拽: ondragondragstartondragleaveondragend

CSS3

1 选择器

 2 

1.颜色:新增RGBAHSLA模式 

2. 文字阴影(text-shadow 

3. 边框: 圆角(border-radius)边框阴影: box-shadow 

4. 盒子模型:box-sizing 

5. 背景:background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域,以”,”分隔可以设置多背景,用于自适应布局 

6. 渐变:linear-gradientradial-gradient 

7. 过渡:transition,可实现动画 

8. 自定义动画 

9. CSS3中唯一引入的伪元素 :selection. 

10. 媒体查询,多栏布局 

11. border-image 

12. 2D转换:transformtranslate(xy) rotate(xy) skew(xy) scale(xy) 

13. 3D转换 

14.新增选择器:属性选择器、伪类选择器、伪元素选择器。

CSS3中的三种动画

transform      transition        animation

1 transform可以用来设置元素的形状改变,主要有以下几种变形:rotate(旋转)、scale(缩放)、skew(扭曲)、translate(移动)和matrix(矩阵变形)

 

2 transition是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态,它有四个属性:

 

  • transition-property(变换的属性,即那种形式的变换:大小、位置、扭曲等);
  • transition-duration(变换延续的时间);
  • transition-timing-function(变换的速率)
  • transition-delay(变换的延时)

animation

animation比较类似于 flash 中的逐帧动画,逐帧动画就像电影的播放一样,表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态,整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道,这种逐帧动画是由关键帧组成,很多个关键帧连续的播放就组成了动画,在 CSS3 中是由属性keyframes来完成逐帧动画的。

这三种动画的区别

transform我们可以理解为元素的几何变形,它是有规律可寻的,这种变形并不会产生动画效果仅仅是原有形状的改变;transition和animation它们很像 flash 中的补间动画逐帧动画;transition是从一个状态变化到另外一种状态,当变化有了平滑的效果后就产生了动画,它是一个公式化的变化,在比较规则的动画效果中我们可以使用,例如:旋转的风车、行驶的汽车、颜色的渐变等等;animation的动画效果更加灵活,可以实现像影片一样的复杂无规则的动画

原文地址:https://www.cnblogs.com/doudou-song/p/13700252.html