diff --git a/Components/Backgrounds/Squares-Animation-Background/index.html b/Components/Backgrounds/Squares-Animation-Background/index.html new file mode 100644 index 00000000..dec77097 --- /dev/null +++ b/Components/Backgrounds/Squares-Animation-Background/index.html @@ -0,0 +1,20 @@ + + + + + + Square Animation Background + + + +
+
Squares Animation
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/Components/Backgrounds/Squares-Animation-Background/style.css b/Components/Backgrounds/Squares-Animation-Background/style.css new file mode 100644 index 00000000..eb92ba30 --- /dev/null +++ b/Components/Backgrounds/Squares-Animation-Background/style.css @@ -0,0 +1,93 @@ +@import url("https://fonts.googleapis.com/css?family=Montserrat:700"); + +*{ + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.hero { + background-color: #975212; + position: relative; + height: 100vh; + overflow: hidden; + font-family: "Montserrat", sans-serif; +} + +.hero__title { + color: #f6fa17; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 50px; + z-index: 1; +} + +.cube { + position: absolute; + top: 80vh; + left: 45vw; + width: 10px; + height: 10px; + border: solid 1px #d38b2d; + transform-origin: top left; + transform: scale(0) rotate(0deg) translate(-50%, -50%); + -webkit-animation: cube 12s ease-in forwards infinite; + animation: cube 12s ease-in forwards infinite; +} +.cube:nth-child(2n) { + border-color: #eec84a; +} +.cube:nth-child(2) { + -webkit-animation-delay: 2s; + animation-delay: 2s; + left: 25vw; + top: 40vh; +} +.cube:nth-child(3) { + -webkit-animation-delay: 4s; + animation-delay: 4s; + left: 75vw; + top: 50vh; +} +.cube:nth-child(4) { + -webkit-animation-delay: 6s; + animation-delay: 6s; + left: 90vw; + top: 10vh; +} +.cube:nth-child(5) { + -webkit-animation-delay: 8s; + animation-delay: 8s; + left: 10vw; + top: 85vh; +} +.cube:nth-child(6) { + -webkit-animation-delay: 10s; + animation-delay: 10s; + left: 50vw; + top: 10vh; +} + +@-webkit-keyframes cube { + from { + transform: scale(0) rotate(0deg) translate(-50%, -50%); + opacity: 1; + } + to { + transform: scale(20) rotate(960deg) translate(-50%, -50%); + opacity: 0; + } +} + +@keyframes cube { + from { + transform: scale(0) rotate(0deg) translate(-50%, -50%); + opacity: 1; + } + to { + transform: scale(20) rotate(960deg) translate(-50%, -50%); + opacity: 0; + } +} \ No newline at end of file