使用纯CSS，创建旋转的可口可乐效果

ffnn

效果非常惊人。只使用到了background-attachment, background-position和一些简单的技巧便达到了此效果，并不需要华丽的CSS3。




点击此处查看示例：http://www.romancortes.com/blog/pure-css-coke-can/
拖动下面的滚动条就能看到效果了

在IE8, Firefox 3.5, Chrome 3, Safari 4 以及 Opera 10上都能运行成功，由于IE 6 不支持 background-attachment: fixed ，所以不能正常运行。

重点代码：

1.p {
2.        background-image: url(coke-label.jpg);
3.        background-attachment: fixed;
4.        background-repeat: repeat-x;
5.        width: 1px;
6.}
7.
8.#x1 {background-position: 5px 30px;}
9.#x2 {background-position: 0px 30px;}
10.#x3 {background-position: -3px 30px;}
11.#x4 {background-position: -6px 30px;}
12.#x5 {background-position: -8px 30px;}

ffnn

拖动 滚动条 就旋转啦。

厉害吧。

aiya

我IE6下面没看到效果。

ffnn

自己拖动啦

一路同行

确实强大！

一路同行

原帖由 aiya 于 2010-2-1 13:50 发表
我IE6下面没看到效果。

上面不是有说嘛
由于IE 6 不支持 background-attachment: fixed ，所以不能正常运行。

tianyoucc

QIANG