【HTML+CSS】咒术回战横板滚动相册
【HTML+CSS】咒术回战横板滚动相册
<!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>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: slateblue;
}
.shell{
display: flex;
overflow-x: auto;
padding: 50px;
gap: 185px;
align-items: flex-start;
}
.shell>div{
block-size: 200px;
aspect-ratio: 1;
background-color: whitesmoke;
border-radius: 25px;
}
.shell img{
height: 100%;
border-radius: 25px;
transition: all 0.5s;
}
.shell img:hover{
filter: brightness(1.4);
}
::-webkit-scrollbar{
height: 16px;
}
::-webkit-scrollbar-thumb{
background-color: slategrey;
border-radius: 25px;
box-shadow: 0px 0px 25px whitesmoke;
}
</style>
</head>
<body>
<div class="shell">
<div class="image"><img src="1.jpg"></div>
<div class="image"><img src="2.jpg"></div>
<div class="image"><img src="3.jpg"></div>
<div class="image"><img src="4.jpg"></div>
<div class="image"><img src="5.jpg"></div>
<div class="image"><img src="6.jpg"></div>
<div class="image"><img src="7.jpg"></div>
<div class="image"><img src="8.jpg"></div>
<div class="image"><img src="9.jpg"></div>
<div class="image"><img src="10.jpg"></div>
<div class="image"><img src="11.jpg"></div>
</div>
</body>
</html>
记得三连噢！记得三连噢！记得三连噢！
你的三连就是对我创作的最大激励，
感谢支持！！！
