imovies
当前位置:首 页>> 百 宝 箱 >>CSS-ONLY 内容展示切换效果

CSS-ONLY 内容展示切换效果

  此展示效果,宽高自适应浏览器窗口大小,且仅使用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
微信支付宝

标 签:CSSCSS3HTMLTRANSITIONSCROLL

评 论2 引 用0 浏 览2422

上一篇JQUERY & CSS3:Fullscreen Slit Slider 开门见山

下一篇[MOVIESHOW] Wrath of the Titans - 诸神之怒

信息列表:

楼主

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

正文内容:

 

图片博文

马勒戈壁的斯巴达!

订阅Rss