xslidian 的博客

原文：CSS3 模拟我们的太阳系 by Alex Girón
日期：2010年5月18日

利用 CSS3 的圆角、变换和动画功能绘制太阳系。效果非常惊人有趣。

我研究了几个月的 CSS3，了解其新功能，并体验了各浏览器的支持程度。几周前我放出了第一个实验，是关于 @font-face 和变换功能的。这次呢，我进行的圆角矩形实验，原以为会有些无聊，结果非常有意思。

主流浏览器中的太阳系

主流浏览器中的太阳系

亲自体验下，我只用了 CSS 和 HTML 就完成了太阳系的简单模拟。

要获得最佳体验请使用 Safari 浏览，chrome 中动画有点卡。

细节

轨道和行星都是通过 border-radius 生成的，而动画是通过 –webkit animation 动画属性和变换功能实现的。以下是所用代码的示例：

圆角边框

ul.solarsystem li.sun {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

动画 与变换

ul.solarsystem li {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
}
ul.solarsystem li.earth span {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:moon;
}
ul.solarsystem li.mercury {-webkit-animation-duration:5s;}
ul.solarsystem li.venus {-webkit-animation-duration:8s;}
ul.solarsystem li.earth {-webkit-animation-duration:12s;}
ul.solarsystem li.earth span {-webkit-animation-duration:2s;}
ul.solarsystem li.mars {-webkit-animation-duration:20s;}
ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;}
ul.solarsystem li.jupiter {-webkit-animation-duration:30s;}
ul.solarsystem li.saturn {-webkit-animation-duration:60s;}
ul.solarsystem li.uranus {-webkit-animation-duration:70s;}
ul.solarsystem li.neptune {-webkit-animation-duration:100s;}
ul.solarsystem li.pluto {-webkit-animation-duration:120s;}

@-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) } }

动画和变换功能目前只在 –webkit 浏览器中有效，其他主流浏览器——当然 IE 除外——只显示通过 border-radius 渲染的静态版本太阳系。

Internet Explorer 的平行扁宇宙：

IE 中的太阳系

嗯，Internet Explorer 眼里我们的宇宙无聊得欠扁。

如您所见，现在几行 CSS 就可以实现令人印象灰常深刻的效果。

哦，我承认……我把冥王星留下来了

要问 http 和 https 在浏览者使用方面有何差别，恐怕只是地址栏中有没有“s”的关系了。
可是自从 Chrome 坚决改换 GTK+ UI 之后，“http://”也随之被隐藏，因此，当您打算切换到 https 连接时，需要手动把“https://”完整输入，再按下回车，才能达到目的——好麻烦的说！

于是偶写了这个简单的 Chrome 扩展。安装后，如果您浏览的是 http 页面，地址栏中会出现“+s”按钮。点击就可以切换到 https 连接了！~

“+s”扩展的显示效果

特定地区的用户请注意，虽然偶添加了 www.google.com.hk 转向 www.google.com 的功能，但如果您没有“禁用地区转向”（NCR）的 Cookies，还是会被重定向到地区站的主页，并丢失当前的搜索关键词！所以使用前请务必先访问 https://www.google.com/ncr 获取该 Cookies 记忆，一劳永逸！

扩展库下载 本地下载

注：写这个扩展的目的不是为了进行自动转向（而且页面动作扩展也不大适合那样做）。如果您需要自动转向功能，可以尝试内容脚本扩展。（参阅 Ray Chow 的博文）

点击打开：Google Chrome 扩展在线本地化工具

将插件自带的原文 messages.json 复制到框中，下方“Translate from:”选择 English，“Translate into:”选择 Chinese_Simp(zh_CN)，点击“Translate”开始翻译。

该工具会自动调用 Google Translate 进行预翻译，人工校对下即可。

支持存储到 Chrome 的 local storage 中，再次访问时可以在 Project 中调出。

昨天 Google 宣布了一项新服务，Google Buzz，分享更新、照片、视频，加入感兴趣的话题等等的新方式。今天您可以把 Google Buzz 上的帖子放在 WordPress 站点上了。

Google Buzz Er 是用来显示指定 Google 帐号的公共 Buzz 帖子的 Wordpress 插件，由 Lazarevic Ivan 开发，遵循 GPL 协议分发。
您要做的只是设置 Google 帐号用户名，也可以选择要显示的帖数。

点击进入：演示页 原版下载 （以上介绍 via）

简体中文版：google-buzz-er-1.3-chs.zip（已更新至 1.3 版）

SAE 版内嵌版演示：xslidian.sinaapp.com
SAE 版框架版演示：xslidian.sinaapp.com/buzzer.php?u=xslidian
SAE 版源码：buzzer-for-sae-1.3.zip（框架版可用于非 SAE 博客；内嵌版只需在模板中添加样式表并 include；更新至 1.3 版，允许的参数为 u、no、img、w、title 及 ptitle）

Google Buzz ER 插件使用效果

Google Buzz ER 插件设置页面

边栏小工具设置页面

自定义标题文字以及帖中图像

Matroska 意在成为新的标准容器格式。由 Moritz Bunkus 开发的 MkvToolNix 包含了可以处理 Matroska 文件的一些小工具：

mkvmerge 可创建 Matroska 文件；
mkvextract 可从 Matroska 文件中提取各类数据；
mkvpropedit 可直接对 Matroska 文件内部的各类属性（头部字段）进行修改；
mkvinfo 可列出此类文件的信息；
mmg 是非常好用的 mkvmerge 的 GUI 版本。

它们与 Matroska 的关系就像是 ogmtools 与 OGM 文件的关系一样。

这是刚刚完成翻译的简体中文版使用手册（配 3.2 版本，以后可以在软件的 doc/zh_CN 目录中找到最新版本，此处的压缩包不保持更新），欢迎指正：
mkvtoolnix-man-chs.zip（DocBook 格式）
mkvtoolnix-man-chs-html.zip（标准 html 格式）

Pathauto 是一个 Drupal 模块，可自动为各种内容创建 URL 别名（URL alias），无须用户手工逐条创建。
可自定义用来创建别名的匹配模式（pattern）系统。

原作者为 mikeryan。
目前该项目由 Frederik ‘Freso’ S. Olesen 与 Greg Knaddison (greggles) 共同维护。

这是它的简体中文语言文件：pathauto-zh-hans.zip

更新：猛然想起… 建议大家使用微博的短网址服务，比这个稳定多了~

微博挂件真得很好用，不过对于不仅不喜欢 Flash，而且追求绿色结果的 W3C Validator 的同学来说，带问号的 url 实在碍眼。

这时就该考虑跳转了。先看示例代码：

<iframe id="sina_widget_1052580175" style="width:100%; height:500px;"
frameborder="0" scrolling="no" src="/~redir/vtsina" />

这样实施后 W3C Validator 就不再啰嗦了。先看看示例的认证结果吧。

以偶的微博为例（用户编号为 1052580175），可用的框架地址有（大家也可以根据需要修改 .htaccess 文件）：

/~redir/vtsina
/~redir/vtsina/1052580175
/~redir/vtsina/1052580175/500
/~redir/vtsina/1052580175/500/wd_01
/~redir/vtsina/1052580175/500/wd_01/1
 （其中的参数依次为：用户编号、高度、皮肤和是否显示图片）

偶这主机也不算稳定，建议大家自己取源码，部署到 WP 所在主机上——要当机一起当。

源码：vtsina-src.zip

原理很简单，发了个 Location: 开头的 http 头。

Google Analytics 模块 是由 Ixis 和 YAML 为 Drupal 开发的模块。

这是该模块的简体中文语言文件：googleanalytics-zh-hans.zip

FLVExtract 简体中文版界面

FLV Extract 是由 Moitah 开发的小工具，可以从 flv 文件中提取出原始视频（及其时间码）和音频。有拖放操作版和命令行版两个版本。

翻译版包含拖放操作版和命令行版，并按 Any CPU 与 x64 两种架构编译。授权协议遵从原始程序的 GPL。

程序：FLVExtract160chs.zip

源代码：FLVExtract160chs-src.zip

Twitter Tools 是 Alex King 开发的大名鼎鼎的 WordPress 插件。

这是它的简体中文翻译：twitter-tools-zh_hans

根据 rev 192051 制作。