响应式网站中的有趣过渡

发布日期:2015-09-10 14:17:38

一旦变成响应式设计的发烧友,你就会发现自己在浏览网页时总要调整一下浏览器窗口大小,以此确认该网站是不是响应式的。但这种习惯可能会激怒“普通”人,所以最好私下里做这件事。

我经常访问的一个讨论 CSS技术的好网站是 Chris Coyier的。在它重
新设计之后,我浏览时碰巧调整了浏览器窗口,在看到众多元素在屏幕上飞舞时,我露
出了会心的微笑。Chri给网页施了什么魔法使其具有了这种效果?其实代码如下
① :
* {
transition: all 1s;
}
此处, 我们使用 CSS通配选择器*来选择页面所有元素, 然后为所有元素都设置一个耗时
1 秒的过渡效果。声明中省略了过渡调速函数,浏览器默认会使用 ease ;声明中同样省
略了延迟时间,浏览器默认使用 none ,所以过渡效果不会有延迟。最终效果是什么样?
大多数效果(超链接、悬停状态,等等)和你所期望的一样。不过,因为所有元素都被
应用了过渡,自然也就包括媒体查询中的规则,所以当浏览器窗口大小发生变化时,页
面元素将从一种排列方式过渡为另外一种排列方式。必须这么做吗?当然不是!但这种
效果是不是既好看又好玩?没错!我的每个网站都用了这玩意,哈哈哈哈。


相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计