LOOOM
你以为我是谁? 我可是傻逼啊!
<html>
<head>
<title>LOOOM</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
max-height: 100vh;
max-width: 100vw;
overflow: hidden;
background: url('./img/0.jpg') center center repeat;
}
#CONTAIN {
width: 100%;
height: 100%;
overflow: hidden;
animation: contain 4s infinite;
}
#LOOOM {
position: absolute;
left: -20%;
top: -20%;
padding: 0;
margin: 0;
overflow: visible;
width: 400%;
height: 200%;
rotate: 25deg;
font-size: 80px;
font-weight: bold;
color: #2B3046;
display: grid;
grid-template-columns: repeat(auto-fill, 350px);
grid-template-rows: repeat(auto-fill, 100px);
}
#MOTTO {
position: absolute;
max-width: 100%;
overflow: hidden;
left: 5%;
top: 0%;
color: #40496b;
font-size: 80px;
font-weight: bold;
}
#SHOT {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
opacity: 0.9;
font-size: 100px;
font-weight: bold;
}
#SHOT_text {
display: block;
position: relative;
animation: shot 0.4s infinite;
}
#WORK {
position: fixed;
right: 0%;
bottom: 0px;
width: 30%;
z-index: -1;
}
@keyframes shot {
0% {
color: #000000;
/* transform: scale(1.5); */
top: 10px;
left: 10px;
}
25% {
top: -10px;
right: 10px;
}
50% {
color: #000000;
top: 10px;
right: 10px;
}
75% {
top: -10px;
left: -10px;
}
100% {
top: 10px;
left: 10px;
}
}
@keyframes contain {
50% {
opacity: 0.6;
}
}
</style>
<body>
<div id="CONTAIN">
<div id="LOOOM">
<span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span><span>LOOOM</span>
</div>
<div id="MOTTO">
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
<p>大专大专 进厂搬砖</p>
</div>
<div id="WORK"><img src="./img/1.jpg"></div>
</div>
<div id="SHOT"><span id="SHOT_text">你以为我是谁?<br>我可是傻逼啊!</span></div>
</body>
</html>