CSS-ONLY 内容展示切换效果

[ 作者:笑傲江湖 发布于:2012年-6月-13日 15:44 星期三  分类:百 宝 箱 ]

  此展示效果,宽高自适应浏览器窗口大小,且仅使用CSS完成切换效果。切换导航按钮使用的是Radio button组合,通过CSS来切换不同内容,切换效果平滑。因为是使用了CSS3的很多属性,所以IE9以下的全军覆没,看不到效果,但还能切换。新版浏览器如Chrome、Firefox、Opera、Safari都没啥问题。
  原先演示内容英文的,俺翻译+替换成了中文,增加了图片背景,其他未动。喜欢的同学可以自己定制。点击下面图片查看演示。
CSS-ONLY 内容展示切换效果原文:http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

SmoothTransitionsResponsiveLayout.zip
200.31KB

微信支付宝

标签: CSS CSS3 HTML TRANSITION SCROLL

评论2 引用0 浏览2400

信息列表:

楼主

xiaoyaoju
2012-09-18 19:56
这个貌似有点小bug,从第一个点到最后一个,中间的标签全部要闪一遍才行,倒过来跳序也一样
笑傲江湖
2012-09-18 20:16
@xiaoyaoju:你没有认真看全文吧,和你的浏览器有关系,不是BUG,浏览器需要支持CSS3,否则就有你说的问题,你换用新版的Chrome,Firefox,Opera等都很正常。
说点什么:

正文内容:

 




图片博文