diff --git a/param-animation/car.css b/param-animation/car.css new file mode 100644 index 0000000..bd69710 --- /dev/null +++ b/param-animation/car.css @@ -0,0 +1,78 @@ +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; + } + .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); + } + } + + + @keyframes moveCar { + 0% { + left: 0; + } + 100% { + left: 100%; + } + } + + + @keyframes moveText { + 0% { + left: 0; + opacity: 10; + } + 70% { + color: #ffd900; + } + 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..b5014ac --- /dev/null +++ b/param-animation/car.html @@ -0,0 +1,16 @@ + + + + + + Car + + + +
+
+
+
+
Vroom........
+ + \ No newline at end of file