HTML5和css3已经是将来的发展趋势,现在有很多移动端还有一些游戏公司已然使用它们开
发了比较成功的产品。我在2011年的时候也跟着技术潮流初浅的学习了html5+css3。毕竟那
时候我没有把学习的知识与实际工作结合起来。因此,这种没有实践的学习很容易忘记。在
去年年底的时候公司有个页面的浮层图标需要优化,就是鼠标划过能变大,划出复原。其实
要做这个功能很简单,也有很多的方法。但是,我后来就用了css3的transition属性。
简单的示例结构:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #scrollTop { margin:0; _margin-bottom:30px; padding:0; height:77px; position:fixed; _position:absolute; right:2px; bottom:30px; _bottom:0; _top:expression(eval(document.documentElement.scrollTop +document.documentElement.clientHeight-this.offsetHeight-(parseInt (this.currentStyle.marginTop,10)||0)-(parseInt (this.currentStyle.marginBottom,10)||0))); z-index:60000;} #scrollTop a {display:block; width:28px; height:77px; margin:0; padding:0; text-decoration:none; background:#FFF url (http://s.hqbcdn.com/assets/v3/images/scrollTop_ico.png) no-repeat;} </style> </head> <body> <div style="display:none;" id="scrollTop"><a href="javascript:;"> </a></div> </body> </html>