发布日期 » 2015年5月8日 星期五

版权声明 » 帅华君原创文章,未经允许不得转载。

母亲节 | 当你老了特别制作

这是加载页面,由于整个交互作品用到了很多图片所以加载的时间稍微长了那么一点

优点:第一感觉,黄色背景和红色文字还有图形,感觉温馨(●˘◡˘●),尤其是那一刻跳动的心,想着可能会有什么震撼心灵的东西要出现。

不足:没有告诉用户加载进度如何,只能干巴巴的等,不知道什么时候加载完成,还有左下角那个东东是什么鬼,谁知道~。

嗯还是变成红色的心♥好看一点。

音乐控制按钮的隐藏和出现是我比较满意的一处。也是使用了transition属性。JS中控制right值。

左下角控制弹出层的按钮也是我很满意的一处设计,点击加号弹出层,加号旋转变成叉号,点击叉号将弹出层display:none。弹出层的overflow属性设置的是auto,因为层内文字超过容器高度,所以用户可以上下滚动查看超出的部分。

页面出现方式都是自底部。

关键点

在header标签里添加name为viewport的元信息是很有必要的,这样才能在移动设备得到最合适的查看效果。

这是我为所有page*页添加的通用属性,这里需要注意的是定位都采用绝对定位,所有页面的初始状态都放在整个屏幕的下方(top:100%),还要为页面添加transition属性,记的在属性前边添加制造商前缀。

动画元素采用居中定位的方式,先将left和top都设置为50%,然后设置transform属性为-50%,-50%,这样所有的元素就都相对于外部容器居中定位(知道居中定位这很重要),然后再设置偏移量确定每一个动画元素的最终位置。