当前的文章分类为: 前端开发

CSS3 transform rotate(旋转)锯齿的解决办法

21

September

2012

由于现在主要接触移动端,不需要考虑IE等古董浏览器的兼容性问题,所以能最大程度的使用CSS3所带来的便捷。

在近期的一个项目中,根据设计需求,需要把图片以倾斜5度的方式来呈现出效果。于是便做了一个例子:-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度。本以为轻而易举,可遇到了问题。在Fireofx中显示正常,但在webkit内核下的浏览器中,如Chrome和Safari,图片边缘会有很明显锯齿。也可以说是webkit抗锯齿的一个BUG。另外需要补充的一点,如果图片上级元素含有overflow:hidden;属性,则会让锯齿感更明显。 [ 查看全文... ]

CSS3 Skill Bar Animation

14

September

2012

可能我有一些小小洁癖,那就是看到好看、炫酷的网页效果都会忍不住想自己也制作一份,哪怕事模仿,也必须自己手动敲一边代码。自己身边也囤积了蛮多的实例,今后我会陆续把以前写的一些CSS3和jQuery案例拿出来分享并加以注释,一方面提供给大家,一方面也算是温故而知新吧。

今天所展示的案例,主要使用到了2个CSS3属性animation和keyframes。如果大家会Flash,相信就会很容易搞懂。根据例子中的代码,我们可以这样理解:
animation:实例名称 动画时长 动画方式;
keyframes:实例名称 { 从{起始位置} 到{结束位置} }; [ 查看全文... ]

CSS3 绘制iPhone 4s

10

July

2012

以tJrus的实例为参考,自己也制作了个,就当陶冶情操吧。整个页面没用一张图片,打开速度绝对给力。功能方面,时间有限,只做了个最简单的开机关机效果-。-莫要拍砖 嘿嘿 [ 查看全文... ]

CSS3 Animation – snow

09

July

2012

随着移动终端的大量普及,如何节约流量,也成了移动端网页的新课题。CSS3的动画效果不需要使Javascript,就能实现一些简单的动画效果,能为网站介绍不少“体积”。本文所展示的,就是一个比较简单的CSS3动画实例。主要运动到的CSS3属性有:animation、animation-duration、keyframes、transform [ 查看全文... ]

jQuery图片切换效果 – Ublue jQuery Slideshow 1.0

09

March

2012

这是我之前写的一个jQuery图片切换效果(通常人们也称为:jQuery焦点图、jQuery幻灯片)。由于是为了练习jQuery而写,所以并没有针对IE做兼容性调整。毕竟大家如果拿去使用的话,样式方面还是会根据自己的需求做修改,所以我就偷个懒了,嘿嘿!
[ 查看全文... ]