HTML+CSS網(wǎng)頁(yè)：重制星穹鐵道大月卡
我試著做了一下：(嘿嘿嘿)
css最外面的盒子設(shè)置perspective樣式可以實(shí)現(xiàn)透視效果，同時(shí)還可以模擬光線的透視。把動(dòng)畫間隔區(qū)間拉長(zhǎng)設(shè)置相同的屬性就可以實(shí)現(xiàn)停頓的效果。
不過，邊框的四個(gè)角想要變成平角好麻煩啊，做不到_(:з」∠)_
下面是代碼：
<!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>
? ? <link rel="stylesheet" href="style.css">
<style>
? ? ? ? *{
? ? margin: 0;
? ? padding: 0;
? ? border: 0;
? ? box-sizing: border-box;
? ? transition: all 0.5s ease-in-out;
}
body{
? ? height: 100vh;
? ? background-color: rgb(39, 39, 39);
? ? perspective: 1000px;
? ? /* 透視 */
}
.center{
? ? display: flex;
? ? justify-content: center;
? ? align-items: center;
}
.big-box{
? ? position: relative;
? ? width: 170px;
? ? height: 230px;
? ? transform-style: preserve-3d;
? ? transform: rotateX(3deg) rotateY(-7deg) rotateZ(-22deg);
}
.box:hover{
? ? animation-play-state: paused;cursor: pointer;
}
.box{
? ? position: relative;
? ? /* border: solid darkblue; */
? ? width: 100%;
? ? height: 100%;
? ? transform-style: preserve-3d;
? ? /* 設(shè)置為3D展示子標(biāo)簽 */
? ? transform: rotateX(8deg) rotateY(7deg) rotateZ(0deg) ;
? ? animation: boxAnimation 16s linear 0.5s infinite normal;
}
.box>div{
? ? position: absolute;
? ? width: 100%;
? ? height: 100%;
? ? /* border: solid darkorange; */
? ? /* background-color: rgba(0, 255, 255, 0.582); */
}
.box>div:nth-child(1){
? ? transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(300px);
}
.box>div:nth-child(2){
? ? transform: rotateX(0deg) rotateY(51deg) rotateZ(0deg) translateZ(300px);
}
.box>div:nth-child(3){
? ? transform: rotateX(0deg) rotateY(102deg) rotateZ(0deg) translateZ(300px);
}
.box>div:nth-child(4){
? ? transform: rotateX(0deg) rotateY(153deg) rotateZ(0deg) translateZ(300px);
}
.box>div:nth-child(5){
? ? transform: rotateX(0deg) rotateY(204deg) rotateZ(0deg) translateZ(300px);
}
.box>div:nth-child(6){
? ? transform: rotateX(0deg) rotateY(255deg) rotateZ(0deg) translateZ(300px);
}
.box>div:nth-child(7){
? ? transform: rotateX(0deg) rotateY(306deg) rotateZ(0deg) translateZ(300px);
}
/* ------------- */
.box>div{
? ? transform-style: preserve-3d;
}
.box>div:hover img{
? ? transform: scale(1.5);
}
.box>div:hover >div:nth-child(1)>div{
? ? background-color: rgba(240, 248, 255, 0);
}
.box>div div{
? ? position: absolute;
? ? width: 100%;
? ? height: 100%;
? ? border-radius: 0% 0%;
}
/* 第一層相框 */
.box>div>div:nth-child(1){
? ?border: 3px solid rgb(193 161 59);
? ?border-radius: 5px;
? ?transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(15px);
}
.box>div>div:nth-child(1)>div{
? ? width: 90%;
? ? height: 90%;
? ? border: 2px solid rgb(241 197 159);
? ? background-color: rgba(253, 255, 240, 0.3);
? ? border-radius: 10px;
}
/* 第二層相框 */
.box>div>div:nth-child(2){
? ? overflow: hidden;
? ? background-color: black;
}
.box>div>div:nth-child(2) img{
? ? /* width: 100%; */
? ? height: 150%;
}
/* 第三層相框 */
.box>div>div:nth-child(3){
? ? background-color: rgba(240, 248, 255, 0.253);
? ? border-radius: 5px;
? ? transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-15px);
}
/* 動(dòng)畫 */
@keyframes boxAnimation{
? ? 0%{transform: rotateX(8deg) rotateY(7deg) rotateZ(0deg) ;}
? ? 10%{transform: rotateX(8deg) rotateY(7deg) rotateZ(0deg) ;}
? ? 14.2%{transform: rotateX(8deg) rotateY(-44.4deg) rotateZ(0deg) ;}
? ? 25%{transform: rotateX(8deg) rotateY(-44.4deg) rotateZ(0deg) ;}
? ? 28.4%{transform: rotateX(8deg) rotateY(-95.8deg) rotateZ(0deg) ;}
? ? 38%{transform: rotateX(8deg) rotateY(-95.8deg) rotateZ(0deg) ;}
? ? 42.6%{transform: rotateX(8deg) rotateY(-147.2deg) rotateZ(0deg) ;}
? ? 50%{transform: rotateX(8deg) rotateY(-147.2deg) rotateZ(0deg) ;}
? ? 56.8%{transform: rotateX(8deg) rotateY(-198.6deg) rotateZ(0deg) ;}
? ? 65%{transform: rotateX(8deg) rotateY(-198.6deg) rotateZ(0deg) ;}
? ? 71%{transform: rotateX(8deg) rotateY(-250deg) rotateZ(0deg) ;}
? ? 80%{transform: rotateX(8deg) rotateY(-250deg) rotateZ(0deg) ;}
? ? 85.6%{transform: rotateX(8deg) rotateY(-301.4deg) rotateZ(0deg) ;}
? ? 95%{transform: rotateX(8deg) rotateY(-301.4deg) rotateZ(0deg) ;}
? ? 100%{transform: rotateX(8deg) rotateY(-353deg) rotateZ(0deg) ;}
}
.light{
? ? position: absolute;
? ? top: -1300px;
? ? left: -145px;
? ? transform-style: preserve-3d;
? ? transform: ?rotateX(34deg) rotateY(12deg) rotateZ(-2deg);
}
.light>div{ ? ?
? ? width: 500px;
? ? height: 2000px;
? ? opacity: 0.7;
? ? /* background-image: linear-gradient( 方向/角度 , 顏色1，顏色2，顏色3....); */
? ? background-image: linear-gradient(90deg,rgba(202, 175, 23, 0),rgb(241 197 159),rgba(255, 217, 0, 0));
}
? ? </style>
</head>
<body class="center">
? ?
? ? <div class="big-box">
? ? ? ? <div class="light">
? ? ? ? ? ? <div></div>
? ? ? ? </div>
? ? ? ? <div class="box">
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div class="center"><div></div></div>
? ? ? ? ? ? ? ? <div class="center"><img src="img/1024px-丹恒立繪.png" alt=""></div>
? ? ? ? ? ? ? ? <div></div>
? ? ? ? ? ? </div> ? ? ?
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div class="center"><div></div></div>
? ? ? ? ? ? ? ? <div ?class="center"><img src="img/1024px-克拉拉立繪.png" alt=""></div>
? ? ? ? ? ? ? ? <div></div>
? ? ? ? ? ? </div> ?
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div class="center"><div></div></div>
? ? ? ? ? ? ? ? <div ?class="center"><img src="img/1024px-布洛妮婭立繪.png" alt=""></div>
? ? ? ? ? ? ? ? <div></div>
? ? ? ? ? ? </div> ? ? ?
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div class="center"><div></div></div>
? ? ? ? ? ? ? ? <div ?class="center"><img src="img/1024px-黑塔立繪.png" alt=""></div>
? ? ? ? ? ? ? ? <div></div>
? ? ? ? ? ? </div> ? ? ?
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div class="center"><div></div></div>
? ? ? ? ? ? ? ? <div ?class="center"><img src="img/ay8tjfkgzkd5uukukz1k08h81mxnfet.png" alt=""></div>
? ? ? ? ? ? ? ? <div></div>
? ? ? ? ? ? </div> ? ? ?
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div class="center"><div></div></div>
? ? ? ? ? ? ? ? <div ?class="center"><img src="img/hpdf4mq1yixk4ls9byavo1dqr1rc238.png" alt=""></div>
? ? ? ? ? ? ? ? <div></div>
? ? ? ? ? ? </div> ? ? ?
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div class="center"><div></div></div>
? ? ? ? ? ? ? ? <div class="center"><img src="img/mufzabhhwl33oz9mhqkx4bi5447rb1i.png" alt=""></div>
? ? ? ? ? ? ? ? <div></div>
? ? ? ? ? ? </div> ? ? ? ? ? ?
? ? ? ? </div>
? ? </div>
</body>
</html>
