【HTML+CSS】咒術(shù)回戰(zhàn)橫板滾動(dòng)相冊
【HTML+CSS】咒術(shù)回戰(zhàn)橫板滾動(dòng)相冊
<!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>
記得三連噢！記得三連噢！記得三連噢！
你的三連就是對我創(chuàng)作的最大激勵(lì)，
感謝支持?。?！
