39 lines
730 B
CSS
39 lines
730 B
CSS
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
background-color: #383838;
|
|
}
|
|
|
|
.viewport {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
perspective: 600px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.field {
|
|
transform-origin: 50% 0;
|
|
top: 50%;
|
|
left: 50%;
|
|
height: 400%;
|
|
width: 1000%;
|
|
position: absolute;
|
|
transform: translateX(-50%) rotateX(85deg);
|
|
background-image: linear-gradient(to right, transparent 50%, #dbd9da 50%, #dbd9da 100%, transparent 100%);
|
|
background-size: 1% 100%;
|
|
border-top: 30px solid #dbd9da;
|
|
animation: panRight 30s linear infinite;
|
|
}
|
|
|
|
@keyframes panRight {
|
|
0% {
|
|
transform: translateX(-50%) rotateX(85deg);
|
|
}
|
|
100% {
|
|
transform: translateX(-75%) rotateX(85deg);
|
|
}
|
|
}
|