微信小程序开发第三周
上周结合老师提出的意见对页面进行了整改,经过这一周的努力还是没有想到原料管理和焙圈(没错,我只是给它取了个名字而已)该具体怎么搞,于是我把原有不变的功能的页面改进了一下,对于一个具体烘焙作品的细节页面做了一些调整。
- css中的animation属性
animation是CSS3中新增的属性,它可以制作出多种酷炫的动画效果,和flash也有一定的联系。
比如 我尝试做的是点击商品名称旁边的收藏按钮,小心心图标会向右上角的?缓慢移动。
代码如下:
当然animation也有其他的属性
动画名称
/*1.name:动画名称*/
/*-webkit-animation-name: kf_play;*/
/*-moz-animation-name: kf_play;*/
/*-o-animation-name: kf_play;*/
/*animation-name: kf_play;*/
动画的持续时间,即播放一次动画所需的时间
/*2.duration:动画持续时间*/
/*-webkit-animation-duration: 2s;*/
/*-moz-animation-duration: 2s;*/
/*-o-animation-duration: 2s;*/
/*animation-duration: 2s;*/
动画播放速率曲线,这个属性与transition的一样。
/*3.animation-timing-function:动画播放速率曲线*/
/*-webkit-animation-timing-function: linear;*/
/*-moz-animation-timing-function: linear;*/
/*-o-animation-timing-function: linear;*/
/*animation-timing-function: linear;*/
/*其他可选值:ease | linear | ease-in | ease-out | ease-in-out*/
这里解释一下ease ease-in等的表示含义
这些是控制移动的方式也可以说是速度,在我的代码块中提到的是ease-out 表示的是以缓慢结束的方式移动,ease-in相反的就是以缓慢开始的方式移动。
另外animation的属性还有好多好多这里就不一一列举了。