C SS3设计动画综合实战3
本文来自 李东博 《HTML5+CSS3从入门到精通》 清华大学出版社 2015年
摘 要:本文档主要介绍设计动画综合实战之设计易拉罐的具体实现方法。
关键词:6设计动画6综合实战
设计易拉罐
本案例使用多标签模拟像素来设计易拉罐立体视图效果,如图 所示,移动滚动条可以选择易拉罐。
在设计过程中灵活使用 、 和
属性,设计二维位移的立体效果,同时当滚动窗口时,位移图将适用于不同部位的纹理(背景图像 ,从
而模拟出旋转的易拉罐效果。利用一幅全景图片作为背景,如图 所示,通过 个 元素,然后进行拼
接,从而设计出立体效果。定义过渡对象为高度,过渡时间为 秒,渐显显示。当获取目标之后,高
度为 像素。虽然使用 可以设计出三维立体效果,但本案例所使用的方法设计出的三维立体效
果比较简单,只要掌握光线的明暗,以及透视原理,在二维平面中可以使用任何方法呈现三维效果。
图设计易拉罐
图易拉罐全景图
完整代码如下:
!
!
!
1 / 4
CSS3 设计动画 综合实战 3