css3制作的汽车动画
今天看到一位国外高手用css3制作的汽车动画，感觉很好，于是就看了一下，
主要使用的是css3里面的：nth-of-type(n),-webkit-transform
现在好像只有Firefox3.5+? Chrome Safari3.1+ 支持，IE6、7、8都不支持，IE9不清楚
下面是演示地址，可以看一下：
注：只有Chrome、Safari浏览器可以看到效果！
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 WEIXING.ME！
相关推荐
2010-10-21
CSS vertical-align 属性
CSS vertical-align 属性定义和用法vertical-align 属性设置元素的垂直对齐方式。 说明该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 | 默认值： || baseline | | 继承性： || no | | 版本： || CSS1 | | JavaScript 语法： || object.style.verticalAlign=”bottom” | 实例垂直对齐一幅图像： img { vertical-align:text-top; } 浏览器支持所有浏览器都支持 vertical-align 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。 可能的值| 值 || 描述 | | baseline || 默认。元素放置在父元素的基线上。 | | sub || 垂直对齐文本的下标。 | | super || 垂直对齐文本的上标 | | top ||...
2010-08-31
CSS display:inline 详解
display:inline 它可以让行内显示为块的元素，变为行内显示，例如 DIV1 DIV2 这里DIV1和DIV2分别占一行，但是你给他们加上属性后变了 DIV1 DIV2 DIV1和DIV2这时候显示在同一行了，试试看吧 和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了 SPAN1 SPAN2 block一般一个块占一行，除非float inline是自动排为一行，就象段内的文字一样，可成为多行。 display:inline比较经典的用法是用在 下的 中 display:inline 对应不显示为 display:none display:block 对应不显示为 hidden 说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方 在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性，无论是初接触W...
2011-08-23
css文件内使用js
这个是我的一个同事使用的方法，之前自己没有用过，看了他写的代码，我震惊了一下，原来css内部竟然也可以使用javascript代码，真实长见识了，学习了…… 下面是其中的一段代码，考了过来，留着以后自己查看使用。 ` #carousel_photo_container #pre { width: expression(document.getElementById("carousel_photo").width/2 600 ? "600px" : this.width); } ` 这单代码主要作用是根据图片的宽度来实现显示时候图片的宽度！
2011-01-05
前端开发人员必须熟悉的10个CSS3属性
作为前端开发人员，你必须熟悉一下css3属性！同时你还必须掌握前端开发所需掌握的技术！ 1. Border-radius Border-radius Border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级 别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。border-radius是 一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方 式显示时，**CSS**圆角，一个很初级的知识，将引导他们开始学习。我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面 浏览器上时，他们却又不这么认为。 -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius...
2011-06-24
子标签float父标签div高度自适应问题（4种解决方法）
经常出现子标签浮动（float），父div不能自适应的问题，如下面的代码，li是float：left，外面div高度自适应 ` - 白芍 - 丹参 - 红景天 - 姜黄 ` 解决方法： 1）在子标签的最后加上清除浮动的标签 可以在ul的下面加上以下代码，清除浮动 ` ` 2)给div加css属性 ` .product { overflow:auto; zoom:1; } ` overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决。 3)使用after伪类 ` .product:after { content:”.”; height:0; visibility:hidden; display:block; clear:both; } ` 4)浮动外部元素，float-in-float 这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都...
2010-10-12
css背景图片定位（含实例下载）
在CSS中，背景图片的定位方位有3种： 1）关键字：background-position: top right; 2）像素：background-position: 0px 0px; 3）百分比：background-position: 0% 0%; 上面这三句语句，都将图片定位在背景的左上角，表面上看效果是一样的，实际上第三种定位机制与前两种完全不同。 前两种定位，都是将背景图片左上角的原点，放置在规定的位置。请看下面这张图，规定的位置是“20px 10px”和”60px 50px”，都是图片的原点在那个位置上，图中用X表示。 但是第三种定位，也就是百分比定位，不是这样。它的放置规则是，图片本身（x%,y%）的那个点，与背景区域的（x%,y%）的那个点重合。比如，如果放置位置是“20% 10%”，实际结果如下图，可以看到这个点是在图片本身的“20% 10%”的位置上。 下面是一个有趣的例子。 背景图片是四个边长为100px的方块叠在一起： 请问怎样才能将其横过来： 答案是，在网页中先设置四个div区域： 然后，这样编写CSS： .box1, .box2, ...