├── .gitignore ├── Folding Cube Loader ├── index.html └── style.css ├── Isometric Design ├── index.html └── style.css ├── README.md └── Xbox SmartGlass Loader ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humblemuzzu/Tried-CSS-Projects/4767a51b2c3e1de9f57fdec99bcad740207203b1/.gitignore -------------------------------------------------------------------------------- /Folding Cube Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Folding Cube Loader 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Folding Cube Loader/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #1d1f20; 3 | min-height: 100vh; 4 | display: grid; 5 | place-content: center; 6 | } 7 | 8 | .folding-cube { 9 | width: 4em; 10 | height: 4em; 11 | position: relative; 12 | margin: auto; 13 | transform: rotateZ(45deg); 14 | } 15 | 16 | .folding-cube .cube { 17 | float: left; 18 | width: 50%; 19 | height: 50%; 20 | position: relative; 21 | transform: scale(1.1); 22 | } 23 | 24 | .folding-cube .cube::before { 25 | content: ""; 26 | position: absolute; 27 | top: 0; 28 | left: 0; 29 | width: 100%; 30 | height: 100%; 31 | background-color: #57fcff; 32 | animation: folding-cube 2.4s infinite linear both; 33 | transform-origin: 100% 100%; 34 | } 35 | 36 | .folding-cube .cube-2 { 37 | transform: scale(1.1) rotateZ(90deg); 38 | } 39 | 40 | .folding-cube .cube-3 { 41 | transform: scale(1.1) rotateZ(180deg); 42 | } 43 | 44 | .folding-cube .cube-4 { 45 | transform: scale(1.1) rotateZ(270deg); 46 | } 47 | 48 | .folding-cube .cube-2::before { 49 | animation-delay: 0.3s; 50 | } 51 | 52 | .folding-cube .cube-3::before { 53 | animation-delay: 0.6s; 54 | } 55 | 56 | .folding-cube .cube-4::before { 57 | animation-delay: 0.9s; 58 | } 59 | 60 | @keyframes folding-cube { 61 | 0%, 62 | 10% { 63 | transform: perspective(140px) rotateX(-180deg); 64 | opacity: 0; 65 | } 66 | 67 | 25%, 68 | 75% { 69 | transform: perspective(140px) rotateX(0deg); 70 | opacity: 1; 71 | } 72 | 73 | 90%, 74 | 100% { 75 | transform: perspective(140px) rotateY(180deg); 76 | opacity: 0; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /Isometric Design/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS Animation 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /Isometric Design/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background: #434750; 13 | overflow: hidden; 14 | } 15 | 16 | .loader { 17 | position: relative; 18 | transform: skewY(-15deg) translateX(50px) translateY(50px); 19 | animation: animateColor 2.5s linear infinite; 20 | } 21 | 22 | @keyframes animateColor { 23 | 0% { 24 | filter: hue-rotate(0deg); 25 | } 26 | 100% { 27 | filter: hue-rotate(360deg); 28 | } 29 | } 30 | 31 | .loader::before { 32 | content: ''; 33 | position: absolute; 34 | top: 300px; 35 | width: 300px; 36 | height: 200px; 37 | background: rgba(0, 0, 0, 0.1); 38 | transform: skewX(45deg); 39 | transform-origin: bottom; 40 | filter: blur(20px); 41 | } 42 | 43 | .loader span { 44 | position: relative; 45 | width: 200px; 46 | height: 40px; 47 | display: block; 48 | background: #3e3f46; 49 | transition: 0.5s; 50 | z-index: var(--i); 51 | animation: animate 5s ease-in-out infinite; 52 | animation-delay: calc(-1s * var(--i)); 53 | } 54 | 55 | @keyframes animate { 56 | 0%,100% { 57 | transform: translateX(-70px); 58 | } 59 | 50% { 60 | transform: translateX(70px); 61 | } 62 | } 63 | 64 | .loader span:hover { 65 | background: #33a3ee; 66 | transition: 0s; 67 | } 68 | 69 | .loader span::before { 70 | content: ''; 71 | position: absolute; 72 | top: 0; 73 | left: -150px; 74 | height: 100%; 75 | width: 150px; 76 | background: #2e3133; 77 | transform-origin: right; 78 | transform: skewY(45deg); 79 | transition: 0.5s; 80 | } 81 | 82 | .loader span:hover::before { 83 | background: #1f5378; 84 | transition: 0s; 85 | } 86 | 87 | .loader span::after { 88 | content: ''; 89 | position: absolute; 90 | top: -150px; 91 | left: 0; 92 | width: 100%; 93 | height: 150px; 94 | background: #35383e; 95 | transform-origin: bottom; 96 | transform: skewX(45deg); 97 | transition: 0.5s; 98 | } 99 | 100 | .loader span:hover::after { 101 | background: #2982b9; 102 | transition: 0s; 103 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tried-CSS-Projects 2 | This is the Repository of my Tried CSS Projects 3 | 4 | This repository will have the full code of what I will be trying 5 | -------------------------------------------------------------------------------- /Xbox SmartGlass Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Xbox SmartGlass Loader 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /Xbox SmartGlass Loader/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #1a1a1a; 3 | } 4 | 5 | .loader { 6 | position: absolute; 7 | top: 50%; 8 | left: 50%; 9 | margin: -90px 0 0 -90px; 10 | } 11 | 12 | .circle { 13 | position: absolute; 14 | border: 3px solid transparent; 15 | border-top-color: #9ee925; 16 | border-radius: 50%; 17 | animation: rotate linear infinite; 18 | } 19 | 20 | .circle.one { 21 | height: 50px; 22 | width: 50px; 23 | left: 50px; 24 | top: 50px; 25 | animation-duration: 0.85s; 26 | } 27 | 28 | .circle.two { 29 | height: 75px; 30 | width: 75px; 31 | top: 38px; 32 | left: 38px; 33 | animation-duration: 0.95s; 34 | } 35 | 36 | .circle.three { 37 | height: 100px; 38 | width: 100px; 39 | top: 25px; 40 | left: 25px; 41 | animation-duration: 1.05s; 42 | } 43 | 44 | @keyframes rotate { 45 | from { 46 | transform: rotateZ(360deg); 47 | } 48 | 49 | to { 50 | transform: rotateZ(0deg); 51 | } 52 | } 53 | --------------------------------------------------------------------------------