请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5实战 HTML5应用 查看内容

使用css3 background属性制作3D易拉罐效果

2013-11-17 10:19| 发布者: admin| 查看: 1676| 评论: 0

摘要: 本例中主要使用background-image,background-attachment,background-position属性,设计二维位移的立体效果。如图所示,移动滚动条可以使易拉罐从左向右滚动。在这里我们用一幅全景图片作为背景,如图:通过55个p ...
本例中主要使用background-image,background-attachment,background-position属性,设计二维位移的立体效果。
如图所示,移动滚动条可以使易拉罐从左向右滚动。

background-image 属性会在元素的背景中设置一个图像。
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-position 属性设置背景图像的起始位置。

效果图如下:



在这里我们用一幅全景图片作为背景,如图:


通过55个p元素,然后进行拼接,从而设计出立体效果。定义过度对象为高度,过渡时间为0.3秒,渐显显示。在这里需要大家掌握光线的明暗以及透视的原理,掌握了这些做起来就很容易了。

完整代码如下:


鲜花

握手

雷人

路过

鸡蛋

相关阅读

相关分类

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-21 09:02 , Processed in 0.071789 second(s), 26 queries .

返回顶部