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

ffnn · 发表于 2010-1-29 13:48:05

效果非常惊人。只使用到了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 · 发表于 2010-1-29 13:48:44

拖动滚动条就旋转啦。

厉害吧。

aiya · 发表于 2010-2-1 13:50:17

我IE6下面没看到效果。

ffnn · 发表于 2010-2-1 13:54:55

自己拖动啦

一路同行 · 发表于 2010-2-1 13:59:54

确实强大！

一路同行 · 发表于 2010-2-1 14:00:11

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

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

tianyoucc · 发表于 2010-2-5 20:21:12

QIANG