cyrneko/pages
cyrneko/pages
0
1
Fork 0
mirror of https://codeberg.org/cyrneko/pages.git synced 2025-05-28 14:17:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

DVD now in pure CSS!

Browse source
This commit is contained in:
cyrneko 2024-12-20 20:42:58 +01:00
parent 1f607ca35b
commit ff03bc4b9c
No known key found for this signature in database
GPG key ID: 801B4BD878A984A4
1 changed files with 40 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

46
dvd.html
View file

@ -14,6 +14,9 @@
body { body {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
height: 100vh;
width: 100vw;
overflow: hidden;
} }
marquee { marquee {
@ -23,15 +26,46 @@
img { img {
filter: invert(100); filter: invert(100);
} }
div[id^="marquee"] {
height: 100vh;
}
#dvd {
width: fit-content;
height: fit-content;
position: absolute;
animation:
marquee-horizontal 3s linear infinite alternate,
marquee-vertical 3.5s linear infinite alternate;
}
@keyframes marquee-horizontal {
from {
left: 0;
}
to {
left: calc(100vw - 88px);
}
}
@keyframes marquee-vertical {
from {
top: 0;
}
to {
top: calc(100vh - 38.77px);
}
}
</style> </style>
</head> </head>
<body> <body>
<marquee behavior="alternate" direction="right" scrollamount="12"> <div id="dvd">
<marquee behavior="alternate" direction="down" scrollamount="12"> <img src="/assets/dvd.png" alt="the DVD logo" width="88px">
<div><img src="/assets/dvd.png" alt="the DVD logo" width="88px"></div> </div>
</marquee>
</marquee>
</body> </body>
</html> </html>