苹果官网小屏状态的交互效果

Question

苹果官网小屏状态下点击展开导航栏的交互效果是如何写出来的
感觉 这个动画好难写
求大神知道
苹果官网地址：https://www.apple.com/cn//?af...

Answer 1

1、css3 媒体查询，简单的来说，就是根据屏幕尺寸的不同，采用不同的样式，传送门2、高度渐变，css3 transition:height 1s; 3、最后一个ICON跑出去,也是transition:right 1s; 4、元素波浪形出现，如果把transition:height 1s;加上的话，出现的方式应该差不多，类似于波浪，或者给子元素也加上 transition 应该会差不多