x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-06 17:16:50 +03:00 committed by GitHub
parent 9705a89a4b
commit 4bf0db5801
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
100_projects/13-mix-blend-loading/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<span>Loading</span>
</div>
</body>
</html>

40
100_projects/13-mix-blend-loading/style.css Normal file
View File

@ -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);
}
}