Skip to content

Commit ed71849

Browse files
gaurovgirigaurovgiri
committed
feat: add dvd screensaver
1 parent 9871398 commit ed71849

File tree

5 files changed

+69
-1
lines changed

5 files changed

+69
-1
lines changed

‎DVD Screen Saver/dvd.png

8.95 KB
Loading

‎DVD Screen Saver/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="stylesheet" href="style.css">
8+
<title>DVD Screensaver</title>
9+
</head>
10+
<body>
11+
<div class="ball"></div>
12+
</body>
13+
</html>

‎DVD Screen Saver/style.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
:root {
2+
--width:250px;
3+
--height:calc(var(--width) / 2);
4+
}
5+
6+
7+
body {
8+
background-color: black;
9+
}
10+
11+
.ball {
12+
width: var(--width);
13+
height: var(--height);
14+
background: url('dvd.png');
15+
background-size: contain;
16+
background-repeat: no-repeat;
17+
position:absolute;
18+
19+
animation: toRight linear 6.8s infinite alternate, bounce linear 17s infinite alternate;
20+
}
21+
22+
@keyframes bounce {
23+
0% {
24+
top:0;
25+
}
26+
48% {
27+
}
28+
50% {
29+
top: calc(100% - var(--height));
30+
}
31+
52% {
32+
}
33+
100% {
34+
top: 0;
35+
}
36+
}
37+
38+
@keyframes toRight {
39+
40+
0% {
41+
left: 0;
42+
}
43+
44+
100% {
45+
left: calc(100% - var(--width));
46+
}
47+
}

‎README.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
8989
- [Contributing](#contributing)
9090
- [CSS Toggle](#toggle)
9191
- [Sliced Button](#slicedbutton)
92-
92+
- [DVD Screen Saver](#dvd-screen-saver)
9393

9494

9595
## <a id="toggle"></a>CSS Toggle
@@ -853,6 +853,14 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
853853
=======
854854
&nbsp;
855855

856+
## <a id="DVDScreenSaver"></a>DVD Screen Saver
857+
858+
![img_source](images/DVDScreenSaver.png)
859+
860+
**[⬆ back to top](#quick-links)**
861+
=======
862+
&nbsp;
863+
856864

857865
---
858866

‎images/DVDScreenSaver.png

58.9 KB
Loading

0 commit comments

Comments
 (0)