纯CSS实现易拉罐3D滚动效果

一、效果抢先预览

与之前文章婆婆妈妈的开头不同，本文首先展示使用CSS实现的炫酷效果：

横向移动滚动条，您会发现，易拉罐随着滚动条的滚动，自身也在滚动。但是，如果您现在使用的是IE6浏览器或是IE6为内核的浏览器，我只能说声”I’m sorry!”，首先IE6不支持png32透明或半透明的背景，其次不支持背景图片的fixed固定定位。

二、原理解剖

首先，说几个关键字，fixed，mask，用中文解释就是：背景图片固定定位，半透明png图片遮罩。

使用的素材
使用的素材有两个，一个是背景图片，一个是覆盖图片（起类似flash中的遮罩效果），如下：

背景图片固定定位
我们应该都知道，background有个属性是background-attachment，此属性有两个值，一个是fixed，另外一个是scroll，而后面的值为默认的。这两个值的意思是：“当页面的其余部分滚动时，背景图像不会移动”以及“背景图像会随着页面其余部分的滚动而移动”。此CSS具体属性可点击这里查看。

本文的效果可以说是活用了这个CSS特性，当滚动时，背景图片（红色的可口可乐包装）的位置是不随着滚动条的滚动而滚动的。

半透明图片的覆盖
半透明图片的作用是易拉罐的头尾，形成易拉罐的形状，形成阴影效果，使效果更为逼真。我们通过让半透明图片覆盖在背景图片上，就可以形成大致的易拉罐滚动效果。注意这里的“大致”一次，如果我们只是一个背景图片固定加上一个半透明遮罩，那么实现的效果就是个狠生硬的，“大致的”易拉罐3D滚动效果。

不信您可以狠狠地点击这里：生硬的3D易拉罐滚动效果

更多的工作
之所以仅仅通过背景固定于覆盖实现的滚动效果是相当生硬不自然的，为什么呢？因为透视的关系，我看一个3D物体，比如说这里的易拉罐，其边缘的图形呈现到我们眼睛里的应该是压缩的，扁平的，否则，如同一个平面，效果不佳。这就是上面“效果生硬”的原因。该如何解决呢？有经验的同行们应该知道，使用多标签来模拟此效果，也就是易拉罐的背景图片不是由一个标签形成，而是由很多个标签以符合人眼透视规律的形式拼接成一个完成的易拉罐背景。这里的规律也就是上面提到的“边缘背景图片的收缩，中间图片的平面化”。

例如买本实例中，共使用了55个p标签拼接成易拉罐背景。

您可以狠狠地点击这里：易拉罐3D滚动效果demo及代码

代码您可以参见demo，这里就不显示了。

注意：由于滚动也受控于body的滚动条，所以，为了避免干扰，需要使用框架调用滚动效果的单页面。

三、感慨 – 结语兼废话

CSS的潜力真是惊人，我有时不得不感叹人类的智慧。我常想，要是CSS3成为了主流，那会是怎样的一个世界，五花八门，千奇百怪的CSS技术以及一些叹为观止的效果会让你犹如进入爱丽丝的梦游仙境。

还有，如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进行提问交流。

参考文章：Pure CSS Coke Can

（本篇完）

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！