先上效果图
上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>会展开的画</title> <style> *{ box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; margin: 0; height: 100vh; } .container{ display: flex; height: 80vh; width: 80vw; } .pic{ /*子绝父相*/ position: relative; color: #fff; background-size: cover; background-repeat: no-repeat; background-position: center; margin: 10px; border-radius: 50px; flex: 0.5; transition: all 0.7s ease-in; } .pic h3{ font-size: 20px; position: absolute; left: 20px; bottom: 20px; opacity: 0; } .pic.expand{ flex:5; } .expand h3{ opacity: 1; transition: opacity 0.3s ease-in 0.4s; } </style> </head> <body> <div class="container"> <div class="pic expand" style="background-image: url('../images/sunnybeach.jpg')"> <h3>Sunny Beach</h3> </div> <div class="pic" style="background-image: url('../images/explortheworld.jpg')"> <h3>Explore The World</h3> </div> <div class="pic" style="background-image: url('../images/wildforest.jpg')"> <h3>Wild Forest</h3> </div> <div class="pic" style="background-image: url('../images/cityonthewater.jpg')"> <h3>City On Water</h3> </div> <div class="pic" style="background-image: url('../images/mountains.jpg')"> <h3>Mountains</h3> </div> </div> <script> const pics=document.querySelectorAll(".pic"); pics.forEach((item)=>{ item.addEventListener("click",clickHandler) }); function clickHandler(e){ if (!e.target.classList.contains("expand")){ const cur=document.querySelector(".expand"); cur.classList.remove("expand"); e.target.classList.add("expand"); } } </script> </body> </html>
路漫漫其修远兮,吾将上下而求索~