Create style.css

CSS Background/style.css

@@ -0,0 +1,86 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+.animation-area {
+ background: linear-gradient(to left, #ff0ac8, #ffc80f);
+ width: 100%;
+ height: 100vh;
+}
+
+.box-area {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.box-area li {
+ position: absolute;
+ display: block;
+ list-style: none;
+ width: 25px;
+ height: 25px;
+ background: rgba(255, 255, 255, 0.2);
+ animation: animate 20s linear infinite;
+ bottom: -150px;
+}
+
+.box-area li:nth-child(1) {
+ left: 86%;
+ width: 100px;
+ height: 100px;
+ animation-delay: 0s;
+}
+
+.box-area li:nth-child(2) {
+ left: 12%;
+ width: 50px;
+ height: 50px;
+ animation-delay: 1.5s;
+ animation-duration: 10s;
+}
+
+.box-area li:nth-child(3) {
+ left: 70%;
+ width: 120px;
+ height: 120px;
+ animation-delay: 0s;
+ animation-duration: 10s;
+}
+
+.box-area li:nth-child(4) {
+ left: 42%;
+ width: 170px;
+ height: 170px;
+ animation-delay: 0s;
+ animation-duration: 15s;
+}
+
+.box-area li:nth-child(5) {
+ left: 65%;
+ width: 80px;
+ height: 80px;
+ animation-delay: 0s;
+}
+
+.box-area li:nth-child(6) {
+ left: 15%;
+ width: 110px;
+ height: 110px;
+ animation-delay: 3.5s;
+}
+
+@keyframes animate {
+ 0% {
+ transform: translateY(0) rotate(0deg);
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(-800px) rotate(360deg);
+ opacity: 2;
+ }
+}