timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 19:13:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

dont know what i did but i like it

Browse Source
This commit is contained in:
Timothy Pidashev
2022-01-08 12:03:43 -08:00
parent 64718e30e5
commit e207049644
2 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
css/login.less
View File

@@ -145,15 +145,16 @@ form{
z-index: 1; z-index: 1;
li{ li{
position: relative; position: absolute;
// list-style: none; // list-style: none;
display: block; display: block;
width: 40px; width: 40px;
height: 40px; height: 40px;
background-color: fade(white, 15%); background-color: fade(white, 15%);
// bottom: -160px; // bottom: -160px;
// make bottom the edge of the screen // make the squares spawn from the bottom of the screen determined by the height of the screen
bottom: -600px; // bottom: calc(-100% + 100px);
bottom: calc(100% - 1000px);
-webkit-animation: square 25s infinite; -webkit-animation: square 25s infinite;
animation: square 25s infinite; animation: square 25s infinite;
@@ -240,21 +241,26 @@ form{
} }
} }
// add sqaure animation that moves from bottom up and rotates then fades with steps
@-webkit-keyframes square { @-webkit-keyframes square {
0% { transform: translateY(0); } 0% { transform: translateY(0); }
100% { transform: translateY(-10000px) rotate(600deg); } 100% { transform: translateY(-10000px) rotate(600deg); }
} }
@keyframes square { @keyframes square {
0% { transform: translateY(0); } 0% { transform: translateY(0); }
100% { transform: translateY(-1000px) rotate(600deg); } 90% { transform: translateY(-1000px) rotate(600deg); }
// add fade after the animation
} }
// animation for square to fade out // animation for square to fade out
@-webkit-keyframes fade { // @-webkit-keyframes fade {
0% { opacity: 1; } // 0% { opacity: 1; }
100% { opacity: 0; } // 100% { opacity: 0; }
} // }
@keyframes fade { // @keyframes fade {
0% { opacity: 1; } // 0% { opacity: 1; }
100% { opacity: 0; } // 100% { opacity: 0; }
} // }

6
login.html
View File

@@ -32,10 +32,4 @@
</ul> </ul>
</div> </div>
</body> </body>
<script>
less = {
env: "production",
};
</script>
<!-- <script src="js/less.js" type="text/javascript"></script> -->
<script src="js/less.js" data-env="production"></script> <script src="js/less.js" data-env="production"></script>