小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部分新属性浅见的更多相关文章
- 小K的H5之旅-HTML的基本结构与基本标签
一.什么是HTML HTML是超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML文档的结构 HTML文档主要包括三大部分:文档声明部分.<head>头部部 ...
- 小K的H5之旅-实战篇（一）
一.前言 本K在经过两个星期的html和css学习之后,第一次去尝试完成一个网站主页的制作.在四天之后,本K也终于完成了杰瑞教育主页的html和css部分,至于部分涉及js的部分,因为本K还没有学习过 ...
- 小K的H5之旅-CSS基础（一）
一.什么是CSS W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说是CSS.CSS全称Cascadi ...
- HTML5和CSS3的新特性
html5的新特性 添加了用于媒介回放的 <video>,<audio> 元素 添加了语义标签譬如 header.footer.nav 等等元素 添加了用于绘画的 canvas ...
- 记录一些html5和css3的一部分属性
html5 标签1 video:视频 属性: src:视频的url autoplay:视频在就绪后马上播放 controls:向用户显示控件2 audio:音频 属性类似于video3 属性:drag ...
- html5和CSS3中新特性
H5 1.语义化标签 header.footer.aside.nav.section.article 2.表单输入类型 email.url.number.range.Date Pickers.sear ...
- HTML5、CSS3等新特性:
HTML5:1/绘画 canvas 元素;2/用于媒介回放的 video 和 audio 元素;3/本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;4/sessionSt ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- 【HTML5 4】《HTML5与CSS3权威指南》 step1 导读
一.教程重点:以 HTML5和CSS3的新功能和新特性 为导向,辅之以 实战型实例页面 二.内容概况: 第1部分:详细讲解HTML5相关知识,包括 各主流浏览器对HTML5的支持情况. HTML5与H ...
随机推荐
- 利用原生JS判断组合键
<script type="text/javascript"> var isAlt = 0; var isEnt = 0; document.onkeydown = f ...
- EXCEL数据导入数据库实例(NPOI)
Default.aspx 页面代码: 引用了: <script src="../../js/jquery.easyui.min.js" type="text/ ...
- Spring Boot 配置文件 – 在坑中实践
摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 仓廪实而知礼节,衣食足而知荣辱 - 管仲 』 本文提纲 一.自动配置 二.自定义 ...
- 输入一个数字n 如果n为偶数则除以2，若为奇数则加1或者减1，直到n为1，求最少次数 写出一个函数
题目: 输入一个数字n 如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数 写出一个函数 首先,这道题肯定可以用动态规划来解, n为整数时,n的解为 n/2 的解加1 n为奇数时 ...
- Virtualbox mac版centos7.2 安装共享文件夹
因为用的是mac本,在自己电脑上用virtualbox安装了centos7.2 虚拟机,为了实现与本机交换文件,需要用到贡享文件夹功能. 网上搜的时候多是windows版的,所以自己写一个mac版的. ...
- IO调度器原理介绍
IO调度器(IO Scheduler)是操作系统用来决定块设备上IO操作提交顺序的方法.存在的目的有两个,一是提高IO吞吐量,二是降低IO响应时间.然而IO吞吐量和IO响应时间往往是矛盾的,为了尽量平 ...
- VopSdk一个高逼格微信公众号开发SDK(源码下载)
看之前回复很多说明大家很有热情&文章被误删掉了,不想让有的朋友错失这个高逼格的东西,现在重新发布,这次就直接放出源码,文章最末下载地址. 看之前回复很多说明大家很有热情&文章被误删掉了 ...
- 关于使用JavaScript实现图片点击切换（附带改变导航图片 方案二）
具体需求见方案一. 这种方案相比方案一更加专业. <!DOCTYPE html> <html> <head lang="en"> <met ...
- Gulp和webpack的区别，是一种工具吗？
疑问:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来? 它们的区别和概念 ------------------------------------ ...
- vs项目和msql不兼容解决方案
当vs的工程项目加载了libmysql.lib 即:附加包含目录,附加库目录,附加依赖项都设置好之后,如过编译出现如下: error LNK2019: 无法解析的外部符号 _mysql_real_co ...