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

91顶
0踩

Web前端

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

2010-01-28 11:48 by 副主编 zly06 评论(43) 有22123人浏览
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 条 请登录后发表评论
23 楼 yangtse_ye 2010-01-29 10:17
有创意的 不错
22 楼 shinezhou 2010-01-29 10:16
厉害


21 楼 gepangtsai 2010-01-29 10:11
这个可以运用到产品展示当前，让用户感觉真实感
20 楼 uciqxkj 2010-01-29 09:38
这也太爽了吧
19 楼 yak47 2010-01-29 09:25
有点意思。
18 楼 sznmail 2010-01-28 23:42
\
zachary.guo 写道
xingqiliudehuanghun 写道
真的不错，太有创意了，可惜不兼容IE6


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


的确……痛恨IE6
17 楼 linkobe 2010-01-28 22:06
IE7得不?
16 楼 z444619713 2010-01-28 21:57

没用到js的内容吗？
15 楼 蜗牛创业网 2010-01-28 21:54
很强大的CSS CSS CSS CSS CSS CSS。。。上帝都会佩服他的智慧
14 楼 xbcoil 2010-01-28 19:30
很漂亮..我很喜欢..有时间我得学习 css了...   
13 楼 zachary.guo 2010-01-28 19:14
xingqiliudehuanghun 写道
真的不错，太有创意了，可惜不兼容IE6


就是要让好的应用，炫的应用不要再兼容 ie6，否则使用 ie6 的人不会放弃 ie6 的，让使用 ie6 的人看着眼馋～～～
用户放弃 ie6 的选择对于我们这些码工来说，真的可以算的上是做贡献了！
12 楼 jhsea3do 2010-01-28 19:10
apple.com/ipad/gallery 也是这个效果吧，更平滑
11 楼 geminiyellow 2010-01-28 17:35
我很少来踩JE新闻，因为没啥精彩的，今天看到那么精彩的CSS，特地来踩一下。
10 楼 chnlslc 2010-01-28 17:01
firefox3.6表示也可以运行
9 楼 民工精髓 2010-01-28 16:30
看了之后觉得是不难的，只是他想到这个，这一点比较强
8 楼 bigcoon 2010-01-28 16:29
hommy8 写道
如果我也懂CSS就好了


我熟练CSS也做不出这个效果。
7 楼 wjing63 2010-01-28 16:12
还有光线明暗
6 楼 felsenlee 2010-01-28 15:55
很强大啊，可媲美js
5 楼 linghongli 2010-01-28 15:54
哪里能搞到源码
4 楼 xingqiliudehuanghun 2010-01-28 15:26
真的不错，太有创意了，可惜不兼容IE6

发表评论

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

相关推荐

  • 纯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