83 lines
2.2 KiB
HTML
83 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>SpaceTaxi Quittung</title>
|
|
<style>
|
|
body{
|
|
display: flex;
|
|
align-content: center;
|
|
background-color: black;
|
|
color: white;
|
|
overflow: hidden;
|
|
font-weight: bold;
|
|
font-size: 350%;
|
|
}
|
|
|
|
span{
|
|
color: goldenrod;
|
|
}
|
|
|
|
.plane {
|
|
/* Für möglichst symmetrisch, muss left proportional zu width sein*/
|
|
height: 50vw;
|
|
width: 60vw;
|
|
bottom: 0;
|
|
left: 20vw;
|
|
|
|
/*Erstellt eine Ebene mit einem Neigungsgrad von 20*/
|
|
transform: perspective(250px) rotateX(20deg);
|
|
transform-origin: 50% 100%;
|
|
|
|
text-align: center;
|
|
position: absolute;
|
|
}
|
|
.plane:after
|
|
{
|
|
bottom: 60%;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
|
|
content: ' ';
|
|
|
|
position: absolute;
|
|
}
|
|
|
|
.content
|
|
{
|
|
/* 60 Sekunden Animation, die in 3 Sekunden eingeblendet wird */
|
|
animation: scroll 60s linear 3s;
|
|
position: absolute;
|
|
top: 100%;
|
|
}
|
|
|
|
@keyframes scroll {
|
|
0% {
|
|
top: 100%;
|
|
}
|
|
|
|
100% {
|
|
top: -150%;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div class="plane">
|
|
<div class="content">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet dictum nunc. Phasellus a
|
|
metus purus. Mauris auctor neque ut efficitur condimentum. Vivamus in tortor consequat, rutrum neque in,
|
|
vehicula ipsum. Vestibulum venenatis, lorem sit amet ultricies feugiat, tortor nisi euismod velit, at
|
|
elementum mi mi id sem. Etiam nec dolor quis lacus volutpat lacinia eget eget ante. Suspendisse id
|
|
iaculis enim. Aenean cursus leo accumsan eros pharetra, non tempus ipsum rutrum. Cras vel eros id odio
|
|
lobortis imperdiet. Nunc urna dui, pretium a volutpat eu, imperdiet non ex. </p>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html> |