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-09-05
前端开发所需掌握的技术（1）
?前端开发所需掌握的技术（1） 也许你对前端开发所要掌握的技术不是特别的了解，下面我们再来看一下下面这段招聘信息： 网站前端工程师（Front-end Web developer） 工作职责： 负责网站前端设计及开发。 职位要求： 计算机相关专业，本科以上学历。 精通Java/Ajax/JavaScript/XML/CSS，有至少3年相关工作经验。 了解不同浏览器之间的差异，写出的代码具有良好的兼容性。 熟悉页面架构和布局，对Web标准和标签语有深入了解。 对用户体验、交互操作流程及用户需求有深入了解。 能根据设计效果图严谨落实界面，精确到像素意识。 有丰富的网站前端工作经验。 笔者认为上面这段招聘信息仅仅列出了一些基本的要求，一个优秀的前端工程师需要掌握很多与之相关的技术，绝大部分的团队都需要一个真正理解及应用这些技术的人才。正确地深入理解前端所应用到的各项技术和技能，并且能做到有的放矢，这对于个人及团队都是有利的。下面我们进行整体的概括。 2.1. 业内标准 关于业内标准，首先必须了解的是W3C的一系列标准，前面的章节中已经详细地介...
2011-03-02
div+css实现内容的水平垂直居中
今天逛蓝色理想论坛，看到一个朋友发的面试题，共4道，我会期中的2道题，另外2道题都是要求 使高度宽度固定的div内的不固定高度的文字或者图片上下左右居中显示，自己没做出来，看了答案 题目：多行文字，保证在DIV中绝对局中，上下左右。不管文字增加多少都是局中的。DIV高度固定。 答案：水平方向居中使用css的text-align：center 就能搞定，垂直方向上需 要2层分别上下50%，最终实现垂直方向上的居中。 查看演示：https://www.weixing.me/demo/up-down-left-right-juzhong.htm 代码如下： ` ` div中的文字保持上下左右居中 CSS Web Design 我爱CSS 我爱CSS致力于Web标准在中国的应用及发展 我们努力保持每天更新，为您提供最新最全的CSS网页布局教程。 我爱CSS致力于Web标准在中国的应用及发展
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-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-09-13
基于DIV和CSS的布局结构（2）
** 基于DIV和CSS的布局结构（2）** 2．使用语义化的标签及命名标识 在所有的结构中都应该使用具有语义的标签及命名标识，如，为标题、为段落、为列表等。标识元素也应尽量使用如id=”header”、id=”footer”等易读懂的语义标识。下面的代码使用的就是具有语义的标签及命名标识。 ? 标题?标题? 内容?…内容 ? 坏的?好的 3．尽量减少使用DIV标记 和表结构一样，深度嵌套的DIV也会给编辑及调试带来麻烦，如少了一个结束会使所有的结构混乱，所以应尽量少使用DIV。 示例1： 在面包屑导航的标签的使用上，可以使用“p”标签而不是DIV。 ? 首页/服务?=?首页/服务 ? 示例2： 在一些博客的文章日期显示上，也可以做到简单的结构。 ? 7?=?710 10? 4．格式化代码 作为开发人员，应养成良好的编程习惯，把代码进行格式化（缩进），使得阅读源代码更方便。 5．在布局结尾加上注释 在一个较复杂的结构中，你可能会迷失方向，不清楚哪个标记在哪个位置结束，调试混乱的布局...
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...