├── .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 |
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 |
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 |
--------------------------------------------------------------------------------