From 4bf0db58010efa7f3654b3c4fef2d78abb3fbb7d Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Mon, 6 Mar 2023 17:16:50 +0300
Subject: [PATCH] Add files via upload
---
100_projects/13-mix-blend-loading/index.html | 14 +++++++
100_projects/13-mix-blend-loading/style.css | 40 ++++++++++++++++++++
2 files changed, 54 insertions(+)
create mode 100644 100_projects/13-mix-blend-loading/index.html
create mode 100644 100_projects/13-mix-blend-loading/style.css
diff --git a/100_projects/13-mix-blend-loading/index.html b/100_projects/13-mix-blend-loading/index.html
new file mode 100644
index 0000000..2e8406d
--- /dev/null
+++ b/100_projects/13-mix-blend-loading/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ document
+
+
+
+
+ Loading
+
+
+
\ No newline at end of file
diff --git a/100_projects/13-mix-blend-loading/style.css b/100_projects/13-mix-blend-loading/style.css
new file mode 100644
index 0000000..cb1d571
--- /dev/null
+++ b/100_projects/13-mix-blend-loading/style.css
@@ -0,0 +1,40 @@
+* {
+ box-sizing: border-box;
+}
+body {
+ margin: 0;
+ background-color: #8A2BE2;
+}
+div {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ color: white;
+}
+div span {
+ font-size: 65pxS;
+ letter-spacing: 5px;
+ text-transform: uppercase;
+ line-height: 1;
+ mix-blend-mode: difference;
+}
+div::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100px;
+ height: 100%;
+ background-color: white;
+ animation: move 4s linear infinite;
+}
+@keyframes move {
+ 0%,
+ 100% {
+ left: 0;
+ }
+ 50% {
+ left: calc(100% - 100px);
+ }
+}
\ No newline at end of file