CSS3动画手风琴菜单代码

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

书写css代码。* { margin: 0px; padding: 0px; box-sizing: border-box; }body { align-items: center; justify-content: center; min-height: 100vh; background-color: #eee; font-family: 'Lato', sans-serif; }body .container { width: 300px; font-size: 1.2em; border-radius: 8px; overflow: hidden; box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.1); cursor: pointer; margin: 30px auto; }body .container .box { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 80px; padding: 0px 20px; transition: all 0.3s; color: white; }body .container .box.box1 { background-color: #7986CB; }body .container .box.box2 { background-color: #FF8A65; }body .container .box.box3 { background-color: #F06292; }body .container .box.box4 { background-color: #4DB6AC; }body .container .box .name { width: 80px; }body .container .box .name h4, body .container .box .name h5 { font-weight: 300; }body .container .box .name h5 { font-size: 0em; line-height: 1.5; }body .container .box p { font-size: 0.8em; font-weight: 300; }body .container .box:before { content: ''; height: 0px; width: 0px; border: 2px solid white; border-radius: 50%; margin-left: -50%; background-color: white; background-size: contain; background-position: center; background-repeat: no-repeat; }body .container .box.box1:before, body .container .box.box3:before { background-image: url('../img/011-girl.png'); }body .container .box.box2:before, body .container .box.box4:before { background-image: url('../img/163807.png'); }body .container .box:hover:before { content: ''; height: 50px; width: 50px; border-radius: 50%; margin-left: 0%; transition: all 0.4s; }body .container .box:hover { height: 120px; transition: all 0.3s; }body .container .box:hover .name h5 { font-size: 0.7em; transition: all 0.6s; }

代码整体结构。

查看效果。