以图明志

CSS

使用CSS3线性渐变实现图片闪光划过效果

线性渐变linear-gradient
在百度音乐 http://music.baidu.com/ 看到这么一个图片效果,当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。

CSS

用CSS3可以很简单地实现文字渐变效果

background-clip , text-fill-color
首先要说明,你的浏览器支持CSS3的话,才能看到正确的演示效果。如果你现在用的浏览器是Chrome、Safari等,就是你的浏览器支持background-clip + text-fill-color等CSS3属性,那么你可以看到下面文字渐变的漂亮效果。文字渐变本身就是装饰性的功能,所以,本着渐进增强的原则,我们在实际项目中其实是可以大胆使用的。

JavaScript

JavaScript渐变效果的实现

同一个页面多个渐变效果
上面的元素,鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小。根据目标值和当时值的对比,来决定是正向还是负向速度。然后给每一个元素加上各自的透明度值,各自的透明度变化分开。最后实现同一个页面多个渐变效果。

CSS

用IE滤镜实现的一些特效

透明度/阴影/渐变等
CSS3是当下非常火的一个话题,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫无作为,很多有经验的开发者都听知道IE的滤镜,看看下面的内容将告诉大家,IE是如何通过这些滤镜,实现CSS3效果的。
1 / 1 首页 < Prev 1 Next > 尾页 页码: