Css3制作风琴动画效果
Css3制作风琴动画效果
开发工具与关键技术：DW
作者：谢嘉浚
撰写时间：2019-03-30
使用css3来制作风琴动画效果，首先在html放一个大的div，设置它的宽高、背景颜色。再在div里面嵌套几个小的div，用定位固定到窗口的左侧，然后用transform的translateX()把小的div往左边移动进去，达到一个开始隐藏的效果。
再给所有的div写一个伪类，当鼠标移到上面的时候div的宽度变回原来的宽度。再给它加一个动画的效果，给每一个div加上动画延迟transition-delay。给第一个延迟0.5s在移动，下一个再加0.5s，然后后面的以此类推。这样就把风琴动画效果完成了。