使用HTML5和CSS3打造一台魅族M9~

主要是用了CSS3里的圆角、渐变和盒阴影这3个属性,当然还有变换动画属性提供动画效果。

在我装的浏览器里,Firefox8的效果最好,其次是Chrome16,因为如果滑动时点到的是图标的话,有时会变成拖动图片。接着是IE9,在Opera下不知道为什么拖动都一卡卡的。
贴上地址:http://c7sky.com/works/m9
当然这个例子里不是光靠CSS3就能弄出来的,还是用到了一点图片:
使用到的图片

Web字体

英文还好,中文字体比较大,估计在国内网站用不到。
而且如果字体在下载中时,在Chrome下会暂时显示空白,Firefox则会先使用其他字体替代显示。

@font-face {
    font-family: HelveticaNeue;
    src: url(fonts/HelveticaNeue.otf);
}

圆角设置

Firefox下的写法比较特别,位置词要合并起来放到最后。

-webkit-border-bottom-right-radius: 30px 6px;
-moz-border-radius-bottomright: 30px 6px;
border-bottom-right-radius: 30px 6px;

径向渐变

为了兼容各个浏览器,要多写4行加私有前缀的代码,这个很不环保...

background-image: -webkit-radial-gradient(30% 30%, circle closest-corner, white, #DFECF4);
background-image: -moz-radial-gradient(...);
background-image: -ms-radial-gradient(...);
background-image: -o-radial-gradient(...);
background-image: radial-gradient(...);

如果你觉得自己一个个加前缀太麻烦的话,可以试试-prefix-free,一个只有2kb的JS脚本。
http://leaverou.github.com/prefixfree/
然后我还发现了一个运用了prefixfree的页面,里面几乎可以看到几乎所有transition可以做到的变换动画。
http://leaverou.github.com/animatable/

学习CSS3的相关网站

http://caniuse.com/
http://www.css3.info/
http://css3please.com/
https://developer.mozilla.org/en/CSS

39 条评论

发表评论

*

  • 博主你的水果机 网页版源码能发份给我研究下吗 你贴的那个地址过期了哦- - 我的邮箱 hllf123@126.com 谢啦 🙄