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