HTML、CSS实现手风琴效果
1 展示2代码2.1 HTML2.2 CSS 3解释1 展示
点击前往在线展示
2代码
2.1 HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手风琴</title><link rel="stylesheet" href="./index.css"></head><body><div class="shell"><div><span>one</span></div><div><span>two</span></div><div><span>three</span></div><div><span>four</span></div><div><span>five</span></div></div></body></html>
2.2 CSS
*{margin: 0;padding: 0;}body{display: flex;justify-content: center;align-items: center;height: 100vh;background-color:rgb(243,230,241);}.shell{width: 90%;height: 700px;display: flex;}.shell div{flex: 1;overflow: hidden;transition: .5s;margin: 0 20px;box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);border-radius: 20px;border: 10px solid #fff;background-color: #fff;}.shell div:hover{flex-basis: 40%;}.shell div span{font:200 45px '';text-align: center;height: 15%;display: flex;justify-content: center;align-items: center;}
3解释
该案例采用flex布局实现手风琴效果
