杭州网站建设
055月

CSS3平移渐入效果

一个效果,却能大大提高档次。

现今网站建设最火热的技术是什么?答案非HTML5与CSS3莫属不可,如果现在的你还没有真正去接触使用这些技术的话,那真的是out非常了。今天佚站互联就针对CSS3的变换效果,为大家带来简单的实例演示。

首先要了解一个CSS3中非常重要的新属性,这是一切变换的来源,这个属性就是transition,具体的属性概念大家可以从该链接了解学习,我们就不在这里展开了,简而言之,transition就是定义了你想要变化的某种方式的属性。

 

具体实例参照整站建设页面的海报文字,该文字在载入页面的时候会产生一个平移+渐入的效果,让人感觉十分舒服平滑,如果是以往的效果需要JS进行代码编写,虽然算不得复杂,但跟现如今的CSS3比较起来,确实略显繁琐。

 

 

让我们来具体分解。

 

HTML代码:

 

<img id="text-poster" height="450" width="980" alt="杭州网站建设">

 

代码分析:我们在IMG中设置了ID方便选择,当然你也可以采用其他选择器方法选择图片。

 

 

CSS代码:

 

#text-poster {     position: relative;     left: -20px;     opacity: 0;     -webkit-transition: all 1s ease-in-out;     -moz-transition: all 1s ease-in-out;     -o-transition: all 1s ease-in-out;}

 

#text-poster.animate{     position: relative;     left: 0px;     opacity: 1;}

 

代码分析:通过transition来设定变换的效果,包括类型、时间、以及变换曲线。

 

 

jQuery代码:

 

$(document).ready(function() {     $(#text-poster").addClass("animate");});

 

代码分析:加载页面的时候为该元素添加animate类,从而进行平移与渐入变换。

 

 

通过CSS3代码进行元素变换的好处在于性能有了更大的提升,缺点在于低级的浏览器无法很好地兼容,不过学习和使用更多更强大的CSS3效果从而优化用户体验和交互效果,是现今的WEB前端开发大势所趋。

 

希望本文能够起到抛砖引玉的效果,欢迎大家的探讨、分享与批评指正。


版权属于:佚站互联 - 杭州网站建设

原文地址:http://www.yeahzan.com/blog/item/42-41.html

转载时必须以链接形式注明原始出处及本声明。

文章作者: Benz , 文章分类: 网站建设

关于作者

Benz

评论 (2)

  • 报告调研

    报告调研

    2013-05-06 13:53:41 |
    师傅说,看了不回,木有jj。马克下文章,慢慢看;忠实粉丝,期待更新。我是一鸣SEO,回访一下吧。。。
    • benz

      benz

      2013-05-06 23:02:12 |
      感谢您的支持,已回访,欢迎多多交流:)

发表评论

请登陆后发表评论。