7.一个简单的Pop-out
最后的例子是一个简单的使用了一些在WebKit中可用的视觉效果的弹出框。
CSS和JavaScript 代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
#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;
} |
1
2
3
4
5
|
<script>
function popout() {
document.getElementById('slider').style.webkitTransform = 'translate(105px,0)';
}
</script> |
这里有个父级盒子，以及在它下面的一个滑动层。滑动层上的”transition”属性定义动作将花费半分钟，并使用一个”ease-in”时间特效。 通过JavaScript设置”transform”属性到滑动层，从而在用户点击一个链接时引发动作。也就是说，动画只是在用户执行一个像点击链接一样的动作之后才会运行。
这个例子的HTML代码如下：
1
2
3
4
5
6
|
<div id="slider">
Slider<br/>Content
</div>
<div id="box1">
<a href="javascript:popout();">Popout</a>
</div> |
运行结果：
截图8. 滑动层在弹出之前。
如果你在链接上点击，那么这个滑动元素就会很快的滑出。
截图9. 滑出之后的滑动层
这些例子的绝大部分功能是由CSS实现的，只是有很少的JavaScript。
未来走向
关于在WebKit中使用新的和独特的CSS，这篇文章只是描述了一个一小部分。有各种各样的新的CSS特性可以用来创建独特的、有视觉冲击力的效果，你可以单独的实现他们，也可以联合使用，前端开发社区等不及你来跟进了！
题记：这篇文章来自于Apple开发者社区，专门介绍WebKit核心的浏览器的一些新的特性，其中最主要的是对CSS3的支持。如果你想开发一些很酷的界面效果，前端观察建议你使用WebKit核心的浏览器，因为目前来说，无论是Safari还是Chrome，都可谓是浏览器中的先锋——对W3C的支持最好，JS引擎的效率最高，浏览器的执行效率和反应速度也是最快的。我们不能被落后的浏览器拖住了我们前进的步伐，我们固然要考虑比较落后的浏览器，但是对于前端开发人员来说，进步更重要。
更多的WebKit中可用的CSS高级特性请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源：
互联网
日期：2009-3-10
