body { height:100%; margin:0; background-color:#782E63; } #app { width:180px; height:20px; margin:200px auto; } .button { width:20px; height:20px; float:left; margin-right:20px; background-color:#fff; border-radius:20px; cursor:pointer; /* 过渡动画 */ transition:0.3s ease width; } .button:last-child { margin-right:0; } .button.active { width:60px; }
css样式添加animation动画效果,通过js添加和删除类,以达到点击按钮实现翻页效果