h5c3新特性

1.h5

新特性:
1.语义化更好的内容标签(header,footer,nav,aside,section,article)
2.音频、视频API(audio,video)
3.本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失,sessionStorage的数据在浏览器关闭后自动删除。
4.表单控件:datalist,date,month,week,range,time,email,url,search
5.画布(Canvas):用于在网页上绘制图形,该元素标签强大之处:可以直接在HTML上进行图形操作。
6.拖拽释放(Drag and drop)API
7.地理(Geolocation)API
移除的元素:
纯表现的元素:big,font,s,center;
支持h5新标签:IE678支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持h5新标签(最好方式直接使用成熟框架,如html5shim框架)

2.CSS3 

新特性:
1.border-radius(圆角),box-shadow(阴影),text-shadow(文字阴影),gradient(线性渐变),transform(旋转)
2.增加了更多css选择器 多背景rgba
3.伪元素是::selection
新增伪类: p:only-child 选择属于其父元素的唯一子元素的每个<p>元素
p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素
:enabled、:disabled 控制表单控件的禁用状态
:checked 单选框或复选框被选中
4.媒体查询,多栏布局
5.border-image
6.box-sizing属性
7.css3实现动画
.qbh-title-sofa {
position: absolute;
bottom: 378px;
left: 50%;
transform: translate(-150%,0);
animation: move-sofa 1.5s infinite;
}

@keyframes move-sofa {
0% {
bottom: 338px;
}
50% {
bottom: 378px;
}
100% {
bottom: 338px;
}
}
过渡: 给改变添加过程
transition:
过渡属性 transition-property
过渡总时间 transition-duration
过渡速度 transition-timing-function
过渡延迟 transition-delay
动画
animation:
动画名称animation-name
动画总时间animation-duration
动画的速度animation-timing-function
动画的延迟animation-delay
动画的次数 animation-iteration-count infinite(动画不停的运动)
动画的方向 animation-direction
动画的结束时的状态 animation-fill-mode
动画的播放状态 animation-play-state
转换
位移转换(用的多)
translateX
translateY
translateZ (这个转换什么情况下才有效果) perspective transform-style: preserve-3d
translate();

旋转转换
rotateX()
rotateY()
rotateZ()

缩放转换
scaleX()
scaleY()

posted @ 2019-03-01 17:40  小新没蜡笔哦  阅读(1080)  评论(0编辑  收藏  举报