首页
系统开发
Android
CSS3页面平滑过渡效果

CSS3页面平滑过渡效果

0 次浏览 0 条评论
zip
zip

页面元素的颜色、大小、位置能自然变换，不跳不闪，全靠CSS3 的平滑过渡。你只要加几行代码，动画效果立马就有，不用写复杂的 JavaScript，体验提升可不止一点点。

最核心的属性就是transition，你可以选具体的 CSS 属性，比如width、background-color，也可以直接写all，省事还全能。搭配transition-duration设置时间，动画就“活”了。

时间函数也是关键，比如ease-in-out，就能让动画一头一尾慢，中间快，看着更自然。别忘了transition-delay，可以控制动画晚点开始，有时真挺好用。

比如做个按钮，用:hover加点变化，鼠标一碰上去，尺寸和颜色慢慢变化，响应也快，代码也简单：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}
.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

不过要注意，像display、visibility这种“直接消失”的属性，不支持过渡，用animation更合适。

如果你想玩得更花，CSS 动画、JavaScript 事件都能搭起来，效果会更炫，体验更顺。

还有几个不错的资源可以看看：

如果你正在做网页交互动效，或者想让界面更灵动一点，transition真的是入门的首选。熟了之后再进阶到animation，会更有意思哦。

zip 文件大小：124.53KB