用于WebKit的CSS诀窍[译]（7）

一个简单的Pop-out

最后的例子是一个简单的使用了一些在WebKit中可用的视觉效果的弹出框，使用的CSS和JavaScript 代码如下：

#box1 {
 z-index: 100;
 position:absolute;
 top:5px; left:5px;
 width:100px;
 height:250px;
 padding:5px;
 -webkit-border-radius:10px;
 border: 2px solid black;
 background: #dddddd;
 z-index: 200;
}
#slider {
 z-index: 100;
 position:absolute;
 top:30px; left:5px;
 height:200px;
 width:90px;
 padding-top:10px;
 padding-left:15px;
 -webkit-border-radius:10px;
 border: 1px solid black;
 background: #eeeeee;
 -webkit-transition: -webkit-transform 0.5s ease-in;
}

<script>
function popout() {
 document.getElementById('slider').style.webkitTransform = 'translate(105px,0)';
}
</script>

这里有个父级盒子，以及在它下面的一个滑动盒子。滑动盒子上的”transition”属性定义动作将花费半分钟，并使用一个”ease-in”时间特效。JavaScript 通过设置”transform”属性到滑动盒子，从而在用户点击一个链接时引发动作。也就是说，动画只是在用户执行一个像点击弹出链接一样的动作之后才会运行。

这个例子的HTML代码如下：

<div id="slider">
 Slider<br/>Content
</div>
<div id="box1">
 <a href="javascript:popout();">Popout</a>
</div>

你可以尝试这个例子，就像下面这样：

截图8. 滑动盒子在弹出之前。

如果你在链接上点击，那么这个滑动元素就会很快的滑出。

截图9. 滑出之后的滑出盒子

这些例子的绝大部分功能是由CSS实现的，只是有很少的JavaScript。

未来走向

当谈到在Safari和WebKit中用新的和独特的方式使用CSS，这篇文章只是描述了一个可行性。有各种各样的新的CSS特性可以用来创建独特的、有视觉冲击力的效果，你可以单独的实现他们，也可以联合使用！

题记：这篇文章来自于Apple开发者社区，专门介绍WebKit核心的浏览器的一些新的特性，其中最主要的是对CSS3的支持。如果你想开发一些很酷的界面效果，我建议你使用WebKit核心的浏览器，因为目前来说，无论是Safari还是Chrome，都可谓是浏览器中的先锋——对W3C的支持最好，JS引擎的效率最高，浏览器的执行效率和反应速度也是最快的。我们不能被落后的浏览器拖住了我们前进的步伐，我们固然要考虑比较落后的浏览器，但是对于前端开发人员来说，进步更重要。

译文链接：http://www.qianduan.net/?p=6105

原文来自：http://developer.apple.com