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！
相关推荐
2019-04-06
CSS 样式优先级
当创建的样式表越来越复杂时，一个标签的样式将会受到越来越多的影响，这种影响可能来自周围的标签，也可能来自其自身。下面我们从这两方面去看看 CSS 样式的优先级。 CSS 的继承性CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构： 如果 有个属性 color: red，则这个属性将被 继承，即 也拥有属性 color: red。 由上可见，当网页比较复杂， HTML 结构嵌套较深时，一个标签的样式将深受其祖先标签样式的影响。影响的规则是： CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。 例1： 如果我们把一个标签从祖先那里继承来的而自身没有的属性叫做”祖先样式”，那么”直接样式”就是一个标签直接拥有的属性。又有如下规则： CSS 优先规则2：“直接样式”比”祖先样式”优先级高。 例2： 选择器的优先级上面讨论了一个标签从祖先继承来的属性，现在讨论标签自有的属性。在讨论 CSS 优先级之前，先说说 CSS 7 种基础的选择器： ID 选择器， 如 #id{} 类选择器， 如 .class{} 属性选择器，...
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...
2010-09-24
css 选择符 应用
1.属性选择符： eg.1）所有包含alt属性的图像都将会有一个灰色的边框 img[alt]?{ border:1px ?dotted #999; } 2）包含title属性的链接将是红色 a[title]{ color:#C00; } happysnail 2、子对象选择符 eg. 这个规则将设置所有属于元素子对象的链接的样式 div > a { text-indent :-9999px; } happysnail happy snail> 只有div 的直接 子对象a 才会有 text-indent 的属性，而下的a将不会有text-indent效果 3、相邻选择符 eg.只有snail是红色的 h2+p { color:#C00; } happy snail .org 4、伪类和伪对象 只有第一个P有效果 I’m the first child I’m the second child news.p:first-child{ font-size:200%; } 2）：focus将应用于那些获得焦点的对象 input[typ...
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, ...
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...
2010-12-07
CSS3属性box-shadow 阴影 详解
CSS3的box-shadow属性可以让我们轻松实现图层阴影效果。 一. box-shadow属性的浏览器兼容性 1、Opera： 已经支持box-shadow属性。 2、firefox通过私有属性-moz-box-shadow支持。 3、Safari和Chrome通过私有属性-webkit-box-shadow支持。 4、所有IE不支持（不知道IE9是否有所改善）。 二. box-shadow属性的语法 box-shadow有六个可设值： img{box-shadow：阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 } 1、当不设阴影类型时，默认为投影效果。当设为inset时，为内阴影效果。 2、X轴和Y轴位移不等同但类似于photoshop里面的”角度”和”位置。 3、阴影大小、扩展、颜色和Photoshop里面的都同理。 三. 实例解析 让我们通过几个实例来看一个box-shadow的效果，先弄个简单的html供测试： | 以下为引用的内容： CSS部份写在这里 | 请注意：为了省事儿，下面的CSS代码中只写了box-shadow，在实际使用中，你应该把-mo...