搜索框:动画

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

元素从一个状态变化到另一个状态的时候, 我们可以给它们添加点过渡的效果 .. 先找到 search-form .. 添加一个 transition 属性,表示过渡 .. all 表示所有的可以应用过渡效果的属性 .. 后面的 .5s 表示过渡的时间是半秒 ..

transition: all .5s;

这个 transition 属性应该用在元素的初始状态上 ..

下面这块样式,是元素的另一个状态 .. 在它的初始状态上,它的 Y 轴的移动距离是 -120 像素 .. 点击了搜索小图标,在 content 元素上添加了 searching 类以后,这个 search-form 元素会到另一个状态,这里它在 Y 轴的移动距离是 -50 像素 ..

元素在这两个状态之间切换的时候,就应用一个过渡效果 ..

我们可以在初始状态上再用一个 opactiy ,把元素的不透明度设置成 0,也就是让它完全透明 ..

在结束的状态上,再用一下 opacity ,值可以是 1,表示完全不透明 .. 从透明到不透明也会有个过渡效果 .. 因为我们在元素上应用的 transition 状态里面,用了 all ,表示过渡所有可以过渡的属性, 你也可以设置允许过渡的属性 ..

在 header 上面,也可以用一下这个 transition ..

transition: all .5s;

再找到 menu .. 也用一下 transition .. all .4s ..

再去设置一下它们在搜索状态的样式 .. 可以把 opacity 设置成 0

到浏览器上再去试一下 ..

点一下搜索小图标 .. 隐藏还有显示元素的时候,都会有一个过渡的动画效果 ...

搜索框:动画《 网页设计案例:导航栏 》

统计

13799
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点