h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。
- h5新增的标签
新增元素
说明
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header
- css3
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
选择器
框模型
背景和边框
border-radius、box-shadow、border-image、
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
文本效果（常用）
text-shadow：设置文字阴影
word-wrap：强制换行
word-break
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform：向元素应用2/3D转换
transition：过渡
动画
@keyframes规则：
animation、animation-name、animation-duration等
用户界面（常用）
box-sizing、resize
css3新增伪类
：nth-child()
：nth-last-child()
：only-child
：last-child
：nth-of-type()
：only-of-type()
：empty
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
：enabled
：disabled
：checked
：not
1、利用样式实现小程序动画(用法和css用法相识)
wxml 文件
<image class="aniamtion" src="../../images/page4.jfif" style="width:200rpxheight:200rpx position: relative"></image>
wxss文件
.aniamtion {
animation: mymove 5s infinite
/* //infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。 */
}
@keyframes mymove {
from {
/* left: 0px*/
/* transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx)*/
transform: rotate3d(100,200,300,0deg)
}
to {
/* left: 200px*/
/* transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx)*/
transform: rotate3d(200,300,400,360deg)
}
}
2、 用小程序的API来实现动画
用wx.createAnimation(object) 来创建一个动画 -->返回一个animation对象
创建一个动画实例 animation。
onReady: function () {
this.animation = wx.createAnimation({
duration:1000,
timingFunction:'linear',
delay:100,
transformOrigin:"left top 0"
})
},
调用实例的方法来描述动画。
Animation.step() 表示一组动画的完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画
rotate(){
this.animation.rotate(150).step() //对动画进行简单的描述
this.setData({
animation:this.animation.export()
})
},
最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
this.animation.export() 导出动画队列。export 方法每次调用后会清掉之前的动画操作
rotate(){
this.animation.rotate(150).step() //对动画进行简单的描述
this.setData({ // 在setData({}) 导出动画数据数据给组件
animation:this.animation.export()
})
},
完整的wxml
<view class="container">
<view animation="{{animation}}" class="view">
将做动画的块
</view>
</view>
<button type="default" size="mini" bindtap="rotate">
旋转
</button>
完整的wxjs
Page({
data: {
animation:''
},
onReady: function () {
this.animation = wx.createAnimation({
duration:1000,
timingFunction:'linear',
delay:100,
transformOrigin:"left top 0"
})
},
rotate(){
this.animation.rotate(150).step().translate(100).step()
this.setData({
animation:this.animation.export()
})
}
})
3、用选择器来绑定组件来来实现组件的动画（小程序2.9.0 的库可用，版本不够会报this.animate不是一个方法）
<text>pages/index7/index7.wxml</text>
<view id="container" style="height: 100pxwidth: 100pxbackground-color: blue">
container
</view>
<view class="block" style="height: 100pxwidth: 100pxbackground-color: #ccc">
block
</view>
用选择器选择相应的组件进行相应的动画
进行关键帧的处理
onLoad: function () {
this.animate('#container', [
{ opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
{ opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },
{ opacity: 1.0, rotate: 90, backgroundColor: '#FF0000' },
], 5000)
this.animate('.block', [
{ scale: [1, 1], rotate: 0, ease: 'ease-out' },
{ scale: [1.5, 1.5], rotate: 45, ease: 'ease-in'},
{ scale: [2, 2], rotate: 90 },
], 5000)
},
}
4、用第三方的库 animation.css
需要做的有
从https://daneden.github.io/animate.css/下载css动画文件
把 .css 文件 改名成 .wxss文件（可进行相应的需改，毕竟小程序的大小限制摆在那里）
把它引入到你的app.wxss文件中
@import “动画文件的相对目录”
在用的时候把他和你的样式绑定
<view class="swing" style="height: 100pxwidth: 100pxbackground-color: #ccc">
block
</view>
// 给类名为swing 的文件绑定swing 的动画
.swing{
animation: swing 5s infinite
}
<div class="wrapper"><div class="load-bar">
<div class="load-bar-inner" data-loading="0"> <span id="counter"></span> </div>
</div>
<h1>Loading</h1>
<p>Please wait...</p>
</div> * {
box-sizing: border-box
}
html {
height: 100%
}
body {
background: #efeeea
background: linear-gradient(#f9f9f9, #cecbc4)
background: -moz-linear-gradient(#f9f9f9, #cecbc4)
background: -webkit-linear-gradient(#f9f9f9, #cecbc4)
background: -o-linear-gradient(#f9f9f9, #cecbc4)
color: #757575
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
text-align: center
}
h1, p {
padding:0 margin:0
}
.wrapper {
width: 350px
margin: 200px auto
}
.wrapper p a {color:#757575 text-decoration:none}
.wrapper .load-bar {
width: 100%
height: 25px
border-radius: 30px
background: #dcdbd7
position: relative
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 2px 3px rgba(0, 0, 0, 0.2)
}
.wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover #counter {
animation-play-state: paused
-moz-animation-play-state: paused
-o-animation-play-state: paused
-webkit-animation-play-state: paused
}
.wrapper .load-bar-inner {
height: 99%
width: 0%
border-radius: inherit
position: relative
background: #c2d7ac
background: linear-gradient(#e0f6c8, #98ad84)
background: -moz-linear-gradient(#e0f6c8, #98ad84)
background: -webkit-linear-gradient(#e0f6c8, #98ad84)
background: -o-linear-gradient(#e0f6c8, #98ad84)
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3)
animation: loader 10s linear infinite
-moz-animation: loader 10s linear infinite
-webkit-animation: loader 10s linear infinite
-o-animation: loader 10s linear infinite
}
.wrapper #counter {
position: absolute
background: #eeeff3
background: linear-gradient(#eeeff3, #cbcbd3)
background: -moz-linear-gradient(#eeeff3, #cbcbd3)
background: -webkit-linear-gradient(#eeeff3, #cbcbd3)
background: -o-linear-gradient(#eeeff3, #cbcbd3)
padding: 5px 10px
border-radius: 0.4em
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 4px 1px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1)
left: -25px
top: -50px
font-size: 12px
font-weight: bold
width: 44px
animation: counter 10s linear infinite
-moz-animation: counter 10s linear infinite
-webkit-animation: counter 10s linear infinite
-o-animation: counter 10s linear infinite
}
.wrapper #counter:after {
content: ""
position: absolute
width: 8px
height: 8px
background: #cbcbd3
transform: rotate(45deg)
-moz-transform: rotate(45deg)
-webkit-transform: rotate(45deg)
-o-transform: rotate(45deg)
left: 50%
margin-left: -4px
bottom: -4px
box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2), 1px 1px 1px 1px rgba(0, 0, 0, 0.1)
border-radius: 0 0 3px 0
}
.wrapper h1 {
font-size: 28px
padding: 20px 0 8px 0
}
.wrapper p {
font-size: 13px
}
@keyframes loader {
from {
width: 0%
}
to {
width: 100%
}
}
@-moz-keyframes loader {
from {
width: 0%
}
to {
width: 100%
}
}
@-webkit-keyframes loader {
from {
width: 0%
}
to {
width: 100%
}
}
@-o-keyframes loader {
from {
width: 0%
}
to {
width: 100%
}
}
@keyframes counter {
from {
left: -25px
}
to {
left: 323px
}
}
@-moz-keyframes counter {
from {
left: -25px
}
to {
left: 323px
}
}
@-webkit-keyframes counter {
from {
left: -25px
}
to {
left: 323px
}
}
@-o-keyframes counter {
from {
left: -25px
}
to {
left: 323px
}
}
