本文主要是介绍小K的H5之旅-HTML5与CSS3部分新属性浅见,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、HTML部分
1、HTML5新特点
向下兼容、用户至上、化繁为简、无插件范式、访问通用性、引入语义、引入原生媒体支持、引入可编程内容
2、HTML5标签语法
可以省略的元素:空元素语法的元素{br} ;可以省略结束标签的元素 {p,li,h};可以全部省略标签的元素 {html,head,body}
>>>尽量不用!!
具有boolean值的属性:属性名=属性值 >>> 可以只写属性名
属性值的引号可省略:具有多个属性值的不能省
3、HTML新增结构标签(变形的具有特定语义的div)
*section:表示页面中的内容区块,近似于div,相当于主体部分,可以取代id大块,与div相比语义上地位更加重要。
*article:代表一块与当前页面不相关的内容
**header:头部
**footer:尾部
hgroup:标题组
*Nav:导航栏
*aside:与文章相关的内容,栗子有微博中的“相关文章”
【结构如下图】
二、CSS3部分
1、transform定义变换
常用变换:
平移 translate
缩放 scale
定义旋转 rotate
可同时进行多种变换,变换之间用逗号分隔
2、transform-origin 定义变换起点
可选值:left/center/right top/center/bottom
或者直接写x y轴坐标点
3、transition 定义过渡
四个属性值:
①参与过度的属性:可以单独指定某个CSS,也可以all(全部)、none(没有)
②过度开始到过渡完成的时间:.3s .5s(栗子)
③过度的样式函数:常选择ease
④过渡开始前的延迟时间:一般省略
transition属性可以同时定义多个过渡效果,用逗号分隔
(栗子)transition: color .3s ease,border .5s ease;
4、animation 动画
step1、声明一个动画的关键帧
@keyframes{
}
阶段写法:
每个阶段用百分比表示,从0%到100%
或者用from{} to{}
step2、在CSS选择器中使用animation动画属性,调用声明好的关键帧(一般采取缩写形式,写法顺序如下图)
下面是一个K做的一个小小的animation,代码如下(因为搞了半天视频上传没弄上去,就先这样了,以后K搞明白了一定会再上传效果视频滴~)
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>炸飞机!!</title><style type="text/css">body{/*background-color: #000000;*/background-image: url(img/QQ图片20170316141436.png);background-repeat: no-repeat;background-size: cover;}.div{width: 100px;height: 100px;border-radius: 50px;/*background-color: #1E90FF;*/-webkit-animation: colorback 5s ease infinite alternate forwards; }@-webkit-keyframes colorback{0% {background-color: #000000;}10% {background-color: #111111;}20% {background-color: #222222;}30% {background-color: #333333;}40% {background-color: #444444;}50% {background-color: #555555;}60% {background-color: #666666;}70% {background-color: #777777;}80% {background-color: #888888;}90% {background-color: #999999;}100% {background-color: #AAAAAA;}}.picture{width: 90px;height: 30px;position: fixed;top: 110px;left: 110px;background-repeat: no-repeat;background-size: cover;background-image: url(img/QQ20170316110112.jpg);-webkit-animation: fly 3s 0s linear;}@-webkit-keyframes fly{0% {top: 110px;left: 110px;}100% {top: 120px;left: 50%;}}.lighter{display: block;position: fixed;bottom: 0;left: 50%;-webkit-animation: lighter 2s linear normal;width: 50px;height: 150px;}@-webkit-keyframes lighter{0% { transform: scale(1);bottom: 0;}50% { transform: scale(0.5);bottom: 30%;}100% { transform: scale(0);bottom: 60%;}}.light{display: block;position: fixed;bottom: 60%;left: 30%;-webkit-animation: light 1s 2s linear normal;transform: scale(0);}@-webkit-keyframes light{0% { transform: scale(0);}100% { transform: scale(0.6);}</style></head><body><div class="div"></div><div class="picture"></div><img src="img/QQ图片20170316141417.png" class="lighter"/><img src="img/QQ图片20170316141427.png" class="light" /></body>
</html>
这篇关于小K的H5之旅-HTML5与CSS3部分新属性浅见的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!