From 6a1da7a6b57497bb59ec579558f5269dcd13f2c3 Mon Sep 17 00:00:00 2001 From: Param Khodiyar Date: Thu, 5 Dec 2024 09:40:59 +0530 Subject: [PATCH 1/2] added car animation html and css by param --- param-animation/car.css | 80 ++++++++++++++++++++++++++++++++++++++++ param-animation/car.html | 16 ++++++++ 2 files changed, 96 insertions(+) create mode 100644 param-animation/car.css create mode 100644 param-animation/car.html diff --git a/param-animation/car.css b/param-animation/car.css new file mode 100644 index 0000000..9e3a84f --- /dev/null +++ b/param-animation/car.css @@ -0,0 +1,80 @@ +body{ + margin: 0; + padding: 0; + background-color: #000000; +} +.car { + width: 150px; + height: 50px; + background-color: #3498db; + border-radius: 5px; + position: absolute; + bottom: 100px; + left: 0; + animation: moveCar 3s linear infinite; + } + + /* Wheels */ + .wheel { + width: 30px; + height: 30px; + background-color: #333; + border-radius: 50%; + position: absolute; + bottom: -15px; + animation: rotate 1s linear infinite; + } + + .wheel.left { + left: 15px; + } + + .wheel.right { + right: 15px; + } + + + .text { + position: absolute; + bottom: 160px; + left: 0; + font-size: 20px; + color: #333; + opacity: 0; + animation: moveText 2s linear infinite; + } + + + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + /* Car movement animation */ + @keyframes moveCar { + 0% { + left: 0; + } + 100% { + left: 100%; + } + } + + /* Text trail animation */ + @keyframes moveText { + 0% { + left: 0; + opacity: 1; + } + 70% { + color: #3498db; + } + 100% { + left: 100%; + + } + } \ No newline at end of file diff --git a/param-animation/car.html b/param-animation/car.html new file mode 100644 index 0000000..9b3d6ec --- /dev/null +++ b/param-animation/car.html @@ -0,0 +1,16 @@ + + + + + + Car + + + +
+
+
+
+
Animation
+ + \ No newline at end of file From 82056faecc6ea496a5fb5371b77b9d3441163b26 Mon Sep 17 00:00:00 2001 From: Param Khodiyar Date: Thu, 5 Dec 2024 09:41:18 +0530 Subject: [PATCH 2/2] added car animation html and css by param --- param-animation/car.css | 10 ++++------ param-animation/car.html | 2 +- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/param-animation/car.css b/param-animation/car.css index 9e3a84f..bd69710 100644 --- a/param-animation/car.css +++ b/param-animation/car.css @@ -13,8 +13,6 @@ body{ left: 0; animation: moveCar 3s linear infinite; } - - /* Wheels */ .wheel { width: 30px; height: 30px; @@ -54,7 +52,7 @@ body{ } } - /* Car movement animation */ + @keyframes moveCar { 0% { left: 0; @@ -64,14 +62,14 @@ body{ } } - /* Text trail animation */ + @keyframes moveText { 0% { left: 0; - opacity: 1; + opacity: 10; } 70% { - color: #3498db; + color: #ffd900; } 100% { left: 100%; diff --git a/param-animation/car.html b/param-animation/car.html index 9b3d6ec..b5014ac 100644 --- a/param-animation/car.html +++ b/param-animation/car.html @@ -11,6 +11,6 @@
-
Animation
+
Vroom........
\ No newline at end of file