资讯频道 → Web前端
阅读更多

91顶
0踩

Web前端

原创新闻 使用纯CSS，创建旋转的可乐瓶效果

2010-01-28 11:48 by 副主编 zly06 评论(43) 有22122人浏览
CSS

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Román Cortés创建了一个rolling CSS coke can的例子，效果非常惊人。只使用到了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;}



  • 大小: 18.1 KB
  • 大小: 41 KB
  • 大小: 69.6 KB
来自: romancortes
91
顶
0
踩
评论 共 43 条 请登录后发表评论
43 楼 javaspringon 2010-03-09 18:58
效果很不错，不过没有全代码吗？
42 楼 linshouyi 2010-03-04 14:43
有创意，很不错！
41 楼 xiaoweiwei 2010-03-02 20:01
太牛逼了，有创意啊
40 楼 qqpedily 2010-02-26 15:26
强悍的软件
39 楼 liug_hx 2010-02-26 15:23
好炫的效果啊。。。。
38 楼 xjlong 2010-02-23 10:33
attachment: fixed;
superfofo 写道
yiding_he 写道
pennyxi 写道
sznmail 写道
\
zachary.guo 写道
xingqiliudehuanghun 写道
真的不错，太有创意了，可惜不兼容IE6


就是要让好的应用，炫的应用不要再兼容 ie6，否则使用 ie6 的人不会放弃 ie6 的，让使用 ie6 的人看着眼馋～～～
用户放弃 ie6 的选择对于我们这些码工来说，真的可以算的上是做贡献了！


的确……痛恨IE6


明显应该开发者去适应用户，而不是用户去适应开发者

说得好，IE 的开发者们应该引以为诫。


实在太有才了！

37 楼 superfofo 2010-02-22 10:02
yiding_he 写道
pennyxi 写道
sznmail 写道
\
zachary.guo 写道
xingqiliudehuanghun 写道
真的不错，太有创意了，可惜不兼容IE6


就是要让好的应用，炫的应用不要再兼容 ie6，否则使用 ie6 的人不会放弃 ie6 的，让使用 ie6 的人看着眼馋～～～
用户放弃 ie6 的选择对于我们这些码工来说，真的可以算的上是做贡献了！


的确……痛恨IE6


明显应该开发者去适应用户，而不是用户去适应开发者

说得好，IE 的开发者们应该引以为诫。


实在太有才了！
36 楼 奶油牙 2010-02-21 15:45
起步中 帅气
35 楼 yiding_he 2010-02-21 13:01
pennyxi 写道
sznmail 写道
\
zachary.guo 写道
xingqiliudehuanghun 写道
真的不错，太有创意了，可惜不兼容IE6


就是要让好的应用，炫的应用不要再兼容 ie6，否则使用 ie6 的人不会放弃 ie6 的，让使用 ie6 的人看着眼馋～～～
用户放弃 ie6 的选择对于我们这些码工来说，真的可以算的上是做贡献了！


的确……痛恨IE6


明显应该开发者去适应用户，而不是用户去适应开发者

说得好，IE 的开发者们应该引以为诫。
34 楼 2001430 2010-02-20 20:33
如果能自动播放就更好了，哈～！
33 楼 pennyxi 2010-02-09 16:01
sznmail 写道
\
zachary.guo 写道
xingqiliudehuanghun 写道
真的不错，太有创意了，可惜不兼容IE6


就是要让好的应用，炫的应用不要再兼容 ie6，否则使用 ie6 的人不会放弃 ie6 的，让使用 ie6 的人看着眼馋～～～
用户放弃 ie6 的选择对于我们这些码工来说，真的可以算的上是做贡献了！


的确……痛恨IE6


明显应该开发者去适应用户，而不是用户去适应开发者
32 楼 木心缺页 2010-02-09 13:53
太强了，我喜欢
31 楼 xfuajiao 2010-02-03 09:19
cs 也能做这个 很好很强大~
30 楼 raymond2006k 2010-01-30 22:55
很申请，很棒。
29 楼 wen.owen 2010-01-30 21:04
哪里有源码，请楼主发出来看看
28 楼 weiqiang.yang 2010-01-30 10:20
scott.yao 写道
zachary.guo 写道
xingqiliudehuanghun 写道
真的不错，太有创意了，可惜不兼容IE6


就是要让好的应用，炫的应用不要再兼容 ie6，否则使用 ie6 的人不会放弃 ie6 的，让使用 ie6 的人看着眼馋～～～
用户放弃 ie6 的选择对于我们这些码工来说，真的可以算的上是做贡献了！

严重同意～

嗯，
27 楼 firefly1314 2010-01-29 23:39
有创意啊，简单却又不简单啊！
有时候多思考一下，会有意想不到的收获，这个创意借鉴下，说不定哪天就给我灵感了，呵呵。
26 楼 scott.yao 2010-01-29 14:21
zachary.guo 写道
xingqiliudehuanghun 写道
真的不错，太有创意了，可惜不兼容IE6


就是要让好的应用，炫的应用不要再兼容 ie6，否则使用 ie6 的人不会放弃 ie6 的，让使用 ie6 的人看着眼馋～～～
用户放弃 ie6 的选择对于我们这些码工来说，真的可以算的上是做贡献了！

严重同意～
25 楼 lucky16 2010-01-29 10:45
用来产品展示,确实很不错1
有立体感!
24 楼 bluemeteor 2010-01-29 10:28
这个归为新闻类有欠考究

01年有个朋友用这个原理实现了旋转地球的特效，他用的是JS

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 纯CSS打造相册效果项目完整源码

    代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/30993277 有问题请博客留言

  • Windows中的几种坐标体系

    Windows中的几种坐标体系1、屏幕坐标屏幕坐标描述物理设备（显示器、打印机等）的一种坐标体系，坐标原点在屏幕的左上角，X轴向右为正，Y轴向下为正。度量单位是象素。原点、坐标轴方向、度量单位都是不能够改变的。2、设备坐标（又称物理坐标）设备坐标是描述在屏幕和打印机显示或打印的窗体的一种坐标体系。默认的坐标原点是在其客户区的左上角。X轴向右为正，Y轴向下为正。度量单位为象素。原点和坐标轴方向可以改

  • API LPtoDP Wife, youd1

     Welcome to my blog!Wife, you talk like a fool! Really, it will be something pretty awkward for me, if she is.Study While Read :(Windows API Declare Function LPtoDP Lib "gdi32" Alias "LPtoDP" (ByVal h

  • CSS - 使用CSS3旋转文本

    前言 ...打起精神来，你将使用CSS3旋转这行文本。 实现方式 将文本包裹在段落标签元素中： 然后，添加CSS transform属性来旋转文本。每个浏览器实现旋转的方式都不同，所以需要设置每......

  • css旋转效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...旋转效

  • 纯css图片自动旋转动画

    纯css 图片自动旋转动画。

  • CSS实现图像旋转动态效果

    CSS实现图像旋转动态效果 首先，应向需要设置旋转的div的css样式中添加如下代码： 例如向一个名为img01的类选择器添加旋转样式，在animation属性内设置，旋转动画，rotate为动画名（自定义的名称），6s为周期，...

  • GDI图形图形的一些函数

    一、位图显示新方法       用于操作DIB图像的应用类有许多，笔者在"电脑编程与技巧"杂志99年第10期, 介绍了一个封装的通用图像基类(CImage)，可完成DIB图像数据的管理和一些基本处理功能。其中大多的DIB类都采用直接分配内存的方式，然后用DIB操作函数来实现图像的显示。这种方式在Win98中，DIB操作函数将DIB内存直接写入显示内存中，但是在NT中，操作系统首先将DI

  • Css动画效果旋转图片

    这次给大家讲解一个有趣的css动画效果哈，那就是旋转图片成一朵花型。 第一步依旧是把img标签敲出来然后把图片放上去。 2.然后开始敲打css样式和效果，先给个class设置一下样式加个定位，因为动画效果需要个定 ...

  • css3实现3d图片旋转效果

    1.实现原理 a.首先所有的图片的容器position:fixed，叠加...创建动画，让rotateY每次增加90deg旋转起来即可。同时，为了观察效果，让rotateX依次上下移动20deg。 2.html文件 <!DOCTYPE html> <html lang="en

  • css 实现三维立体旋转效果

    css实现三维立体旋转效果

  • 纯css实现手风琴效果_创建纯CSS手风琴的4种方法

    内容手风琴是一种有用的设计模式。 您可以将它们用于许多不同的事物：用于菜单，列表，图像，文章摘录，文本片段甚至视频 ... 创建仅CSS的手风琴可能是一项艰巨的任务，因此在本文中，我们将尝试...

  • css-样式 transform旋转效果

    1、rotate按角度旋转 img { width: 250px; transition: all 2s; } img:hover { /* 顺 */ transform: rotate(360deg); /* 逆 */ /* transform: rotate(-360deg); */ } 2、转换原点 transform-

  • 纯 CSS3 实现波浪效果

    1.使用linear-gradient来做小波浪线 ①原理: linear-gradient(45deg, red, transparent 45%) 是个渐变 ②.wave{ width: 20rem; height: 8px; background-size: 16px 16px; background-repeat:...

  • CSS3实现3d图片旋转动画效果

    1.实现原理 1.首先所有的图片的容器position:absolute，叠加在一起，然后一次设置rotateY分别为（36*i）deg ，i取0到10 ；...2.创建动画，让rotateY每次增加90deg旋转起来即可。同时，为了观察效果，让rotateX依次...

  • 纯CSS3动画实现小球绕轨道旋转效果

    效果展示： 源码展示： <!doctype html> <html&...纯css3动画实现轨道旋转效果</title> <style> body { background-color:blueviolet; } .

Global site tag (gtag.js) - Google Analytics