用html实现一个手风琴相册设计

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>手风琴相册设计</title><link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>Accordion Gallery</h1>
<div class="accordion"><!-- 在这里我们需要复制5个一样的代码，并修改内容 --><ul><li tabindex="1"><div><a href="#"><h2>Bagel</h2><p>The harder the crust is baked, the stronger the flavor and texture of the bread inside.</p></a></div></li><li tabindex="2"><div><a href="#"><h2>Cup Cake</h2><p>Cupcake is a dessert.</p></a></div></li><li tabindex="3"><div><a href="#"><h2>Chocolate Cake</h2><p>It is commonly used in birthday parties and weddings and is one of the common desserts.</p></a></div></li><li tabindex="4"><div><a href="#"><h2>Light Food</h2><p>The cooking method of food materials is simple, and the original nutrition and taste of food materials are retained.</p></a></div></li><li tabindex="5"><div><a href="#"><h2>Sashimi</h2><p>Sashimi refers to raw fish and other things, dipped in seasoning directly edible fish dishes.</p></a></div></li><li tabindex="6"><div><a href="#"><h2>Xaman Beer</h2><p>Guatemalan handcrafted Xaman beer bottle.</p></a></div></li></ul>
</div>
<p class="about">By <a href="https://Lavender-z.github.io/">橘子</a>
</p>
</body>
</html>

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);h1 {text-align: center;font-family: Montserrat, sans-serif;color: #333;
}.accordion {width: 100%;max-width: 1080px;height: 250px;overflow: hidden;margin: 50px auto;
}.accordion ul {width: 100%;display: table;table-layout: fixed;margin: 0;padding: 0;
}.accordion ul li {display: table-cell;vertical-align: bottom;position: relative;width: 16.666%;height: 250px;background-repeat: no-repeat;background-position: center center;transition: all 500ms ease;
}.accordion ul li div {display: block;overflow: hidden;width: 100%;
}.accordion ul li div a {display: block;height: 250px;width: 100%;position: relative;z-index: 3;padding: 15px 20px;box-sizing: border-box;color: #fff;text-decoration: none;font-family: Open Sans, sans-serif;transition: all 200ms ease;
}.accordion ul li div a * {opacity: 0;margin: 0;width: 100%;text-overflow: ellipsis;position: relative;z-index: 5;white-space: nowrap;overflow: hidden;-webkit-transform: translateX(-20px);transform: translateX(-20px);-webkit-transition: all 400ms ease;transition: all 400ms ease;
}.accordion ul li div a h2 {font-family: Montserrat, sans-serif;text-overflow: clip;font-size: 24px;text-transform: uppercase;margin-bottom: 2px;top: 160px;
}.accordion ul li div a p {top: 160px;font-size: 13.5px;
}.accordion ul li:nth-child(1) {background-image: url("https://source.unsplash.com/uYyLWm7V-9U");
}.accordion ul li:nth-child(2) {background-image: url("https://source.unsplash.com/LD4KsgYUjxI");
}
.accordion ul li:nth-child(3) {background-image: url("https://source.unsplash.com/MQFNx9pVPRQ");
}.accordion ul li:nth-child(4) {background-image: url("https://source.unsplash.com/7gM1R2yLfXk");
}.accordion ul li:nth-child(5) {background-image: url("https://source.unsplash.com/jso_yKod6-c");
}.accordion ul li:nth-child(6) {background-image: url("https://source.unsplash.com/46vZtdZhWAs");
}.accordion ul:hover li, .accordion ul:focus-within li {width: 8%;
}.accordion ul li:focus {outline: none;
}.accordion ul:hover li:hover,
.accordion ul li:focus, .accordion ul:focus-within li:focus {width: 60%;
}.accordion ul:hover li:hover a,
.accordion ul li:focus a, .accordion ul:focus-within li:focus a {background: rgba(0, 0, 0, 0.4);
}.accordion ul:hover li:hover a *,
.accordion ul li:focus a *, .accordion ul:focus-within li:focus a * {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);
}.accordion ul:hover li {width: 8% !important;
}.accordion ul:hover li a * {opacity: 0 !important;
}.accordion ul:hover li:hover {width: 60% !important;
}.accordion ul:hover li:hover a {background: rgba(0, 0, 0, 0.4);
}.accordion ul:hover li:hover a * {opacity: 1 !important;-webkit-transform: translateX(0);transform: translateX(0);
}@media screen and (max-width: 600px) {body {margin: 0;}.accordion {height: auto;}.accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover {position: relative;display: table;table-layout: fixed;width: 100%;-webkit-transition: none;transition: none;}
}.about {text-align: center;font-family: "Open Sans", sans-serif;font-size: 12px;color: #666;
}.about a {color: rgb(144, 144, 148);text-decoration: none;
}.about a:hover {text-decoration: underline;
}