webkit CSS特效的小bug

来源：互联网发布：mac的qq可以远程吗编辑：程序博客网时间：2024/05/22 10:31

Webkit的强大，就在于它能执行transform和transition。

不过，因为CSS渲染比较新，而且很多人一直以来都坚持CSS不应该做动态的渲染。所以CSS的这些功能的支持，一直在进进退退。而HTML5中的Canvas大有可能替代CSS的这些特性。

今天在使用中发现了一个比较棘手的问题：本来想做一个图片缩放后倒影的效果，结果怎么都出不来，CSS代码如下：

position:absolute; left:291px; top:359px; width:298px; height:248px;z-index:2;-webkit-transform:scale(0.6,0.6);
-webkit-box-reflect: below 10px -webkit-gradient( linear, left center, left bottom,color-stop(0,transparent), color-stop(1,rgba(255, 255, 255,0.8)) );

去掉了缩放后，就可以了。

解决方案是让美工给图片加上倒影，不使用CSS生成倒影了。目前没有发现更好的方法，项目进度有限只能先这样了。

看了CSS的渲染，还是有很多坑的。不能放开手脚使用。而Canvas相对就没有这么多问题，但是开发工作量是CSS动画的几倍，而且开发难度相对也较高。