From 8d278bb860e13cafe9d46e3b89ac0c679ea0c990 Mon Sep 17 00:00:00 2001 From: Zero to Mastery Date: Mon, 2 Oct 2023 18:49:51 +0000 Subject: [PATCH] (CI) format code --- Art/jnovak5/index.html | 24 +++++------ Art/jnovak5/style.css | 94 ++++++++++++++++++++++++------------------ 2 files changed, 65 insertions(+), 53 deletions(-) diff --git a/Art/jnovak5/index.html b/Art/jnovak5/index.html index 05d800f2a..8badd7045 100644 --- a/Art/jnovak5/index.html +++ b/Art/jnovak5/index.html @@ -1,14 +1,14 @@ - - - - - Novak CSS Animation - - -
-
-
- - \ No newline at end of file + + + + + Novak CSS Animation + + +
+
+
+ + diff --git a/Art/jnovak5/style.css b/Art/jnovak5/style.css index 0aacc7341..89659e6a3 100644 --- a/Art/jnovak5/style.css +++ b/Art/jnovak5/style.css @@ -1,55 +1,67 @@ body { - margion: 0px; - background-color: whitesmoke; + margion: 0px; + background-color: whitesmoke; } #leftLine { - display: inline-block; - background-color: red; - height: 20rem; - width: 10rem; - margin: 0px; - animation-name: flag; - animation-duration: 5s; - animation-iteration-count: infinite; - animation-direction: alternate; + display: inline-block; + background-color: red; + height: 20rem; + width: 10rem; + margin: 0px; + animation-name: flag; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-direction: alternate; } #middleLine { - display: inline-block; - background-color: white; - height: 20rem; - width: 10rem; - margin: 0px; - animation-name: flag; - animation-duration: 5s; - animation-iteration-count: infinite; - animation-direction: alternate; + display: inline-block; + background-color: white; + height: 20rem; + width: 10rem; + margin: 0px; + animation-name: flag; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-direction: alternate; } #rightLine { - display: inline-block; - background-color: green; - height: 20rem; - width: 10rem; - margin: 0px; - animation-name: flag; - animation-duration: 5s; - animation-iteration-count: infinite; - animation-direction: alternate; + display: inline-block; + background-color: green; + height: 20rem; + width: 10rem; + margin: 0px; + animation-name: flag; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-direction: alternate; } @keyframes flag { + 0% { + box-shadow: 10px 10px black; + border-radius: 0px; + } + 25% { + box-shadow: 20px 20px black; + border-radius: 5px; + } + 50% { + box-shadow: 50px 50px black; + border-radius: 10px; + } + 100% { + box-shadow: 75px 75px black; + border-radius: 15px; + } - 0% {box-shadow: 10px 10px black; border-radius: 0px;} - 25% {box-shadow: 20px 20px black; border-radius: 5px;} - 50% {box-shadow: 50px 50px black; border-radius: 10px;} - 100% {box-shadow: 75px 75px black; border-radius: 15px;} - - from { - transform: skew(0deg, 0deg) rotateY(0deg) translate(0rem, 0rem) scale(0, 0); - } - to { - transform: skew(-20deg, -10deg) rotateY(45deg) translate(15rem, 10rem) scale(1, 1); - } -} \ No newline at end of file + from { + transform: skew(0deg, 0deg) rotateY(0deg) translate(0rem, 0rem) scale(0, 0); + } + to { + transform: skew(-20deg, -10deg) rotateY(45deg) translate(15rem, 10rem) + scale(1, 1); + } +}