HTML5和css3已经是将来的发展趋势,现在有很多移动端还有一些游戏公司已然使用它们开
发了比较成功的产品。我在2011年的时候也跟着技术潮流初浅的学习了html5+css3。毕竟那
时候我没有把学习的知识与实际工作结合起来。因此,这种没有实践的学习很容易忘记。在
去年年底的时候公司有个页面的浮层图标需要优化,就是鼠标划过能变大,划出复原。其实
要做这个功能很简单,也有很多的方法。但是,我后来就用了css3的transition属性。

跟我学习css3之transition      跟我学习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:;">&nbsp;</a></div>
</body>
</html>
View Code

相关文章:

  • 2021-06-01
  • 2021-12-12
  • 2022-12-23
猜你喜欢
  • 2021-09-22
  • 2022-12-23
  • 2021-06-23
  • 2022-01-22
  • 2021-10-22
  • 2021-12-03
相关资源
相似解决方案