cyrneko/pages
cyrneko/pages
0
1
Fork 0
mirror of https://codeberg.org/cyrneko/pages.git synced 2025-05-04 18:13:07 +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 {
margin: 0px;
padding: 0px;
height: 100vh;
width: 100vw;
overflow: hidden;
}
marquee {
@ -23,15 +26,46 @@
img {
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>
</head>
<body>
<marquee behavior="alternate" direction="right" scrollamount="12">
<marquee behavior="alternate" direction="down" scrollamount="12">
<div><img src="/assets/dvd.png" alt="the DVD logo" width="88px"></div>
</marquee>
</marquee>
<div id="dvd">
<img src="/assets/dvd.png" alt="the DVD logo" width="88px">
</div>
</body>
</html>
</html>