济南手机网站制作

CSS3过渡动画这样使用才更有效果

作者:admin 分类:济南手机网站制作 2017-05-29 09:30:10 我要评论(0)

通过CSS3,咱们能够在不运用js的情况下,当元素从一种款式变换为另一种款式时为元素增加作用。他的特点为:transition,可是他也有他的缺陷,InternetExplorer9以及更早的版本,不支持transition特点。那么他是怎样运用的呢,比方咱们官网首页效劳流程的几个小图标,鼠标滑上去会滚动:

  

  他的款式是这么去写的:

  

  transition:transform1sease-out0s;

  font-style:italic;

  这么的话当鼠标滑过成为另一种款式就有了一个过渡作用。那么他详细有那些特点呢:

  假如你想让他变宽,时刻长为两秒,你就能够这么去写,

  div

  {

  transition:width1s;

  -moz-transition:width1s;/*Firefox4*/

  -webkit-transition:width1s;/*Safari和Chrome*/

  -o-transition:width1s;}/*Opera*/

  }

  不一样的浏览器兼容的写法是不一样的,上面已标明。假如是改变高度,只需要把width改成height即可

  详细特点为:transition-property:规则运用过渡的CSS特点的称号。transition-duration:界说过渡作用花费的时刻。默许是0。transition-timing-function:规则过渡作用的时刻曲线。默许是ease。transition-delay:规则过渡作用何时开始。默许是0。

  济南手机网站建设留意:假如网站请求兼容IE那么仍是不主张去运用。由于这个特点只兼容到IE10,IE9及以下不兼容!

  


1.本站文章源自网络,大部分原创内容。如有发现侵权等问题,请联系删除,谢谢。
2.更多原创内容源自济南网站建设公司
        3.济南网站建设公司提供:济南建设济南手机网站制作济南网站开发济南网站优化等服务

相关文章
网友点评

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新留言
    标签列表