├── 10_radar_spinner ├── index.html └── style.css ├── 11_rhombus-spinner ├── index.html └── style.css ├── 12_spring-spinner ├── index.html └── style.css ├── 13_semipolar-spinner ├── index.html └── style.css ├── 14_Loader_Animation ├── index.html └── style.css ├── 15_Button Hover Effects ├── index.html └── style.css ├── 16_Website Loaders ├── index.html └── style.css ├── 17_Website Loader_2 ├── index.html └── style.css ├── 18_Battery Charge Animation ├── index.html └── style.css ├── 19_Fun Color Change_bar ├── index.html └── style.css ├── 1_pixel-spinner ├── index.html └── style.css ├── 20_Animated Loader ├── index.html └── style.css ├── 21_Atomic Flower ├── index.html └── style.css ├── 22_Rotate and Transform squares ├── index.html ├── style.css ├── style.css.map └── style.scss ├── 23_3d-animation_food-shop ├── index.html └── style.css ├── 24_See_Saw_Ball_Animation ├── index.html └── style.css ├── 25_Blob_Liquid_Button ├── index.html ├── style.css ├── style.css.map └── style.scss ├── 26_circle_loader ├── index.html └── style.css ├── 27_Button_Border_Animation ├── index.html └── style.css ├── 28_जय_श्री_राम ├── index.html └── style.css ├── 29_BTN_Keyframe-Sample ├── index.html └── style.css ├── 2_atom-spinner ├── index.html └── style.css ├── 30_Ping-pong_balls ├── index.html └── style.css ├── 31_Blinking_Eye ├── index.html └── style.css ├── 32_Shadow-Text-Effect ├── index.html └── style.css ├── 33_Checkmark ├── index.html └── style.css ├── 34_scroll_down_BTN ├── index.html └── style.css ├── 35_Neon_Square_Loader ├── index.html └── style.css ├── 3_fingerprint-spinner ├── index.html └── style.css ├── 4_Rainbow_border ├── index.html ├── style.css ├── style.css.map └── style.scss ├── 5_flower_spinner ├── index.html └── style.css ├── 6_hollow_dots_spinner ├── index.html └── style.css ├── 7_circles_spinner ├── index.html └── style.css ├── 8_CloudMaxis ├── index.html └── style.css └── 9_progressBar ├── index.html └── style.css /10_radar_spinner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | radar-spinner 8 | 9 | 10 | 11 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /10_radar_spinner/style.css: -------------------------------------------------------------------------------- 1 | .radar-spinner, 2 | .radar-spinner * { 3 | box-sizing: border-box; 4 | } 5 | 6 | .radar-spinner { 7 | height: 60px; 8 | width: 60px; 9 | position: relative; 10 | } 11 | 12 | .radar-spinner .circle { 13 | position: absolute; 14 | height: 100%; 15 | width: 100%; 16 | top: 0; 17 | left: 0; 18 | animation: radar-spinner-animation 2s infinite; 19 | } 20 | 21 | .radar-spinner .circle:nth-child(1) { 22 | padding: calc(60px * 5 * 2 * 0 / 110); 23 | animation-delay: 300ms; 24 | } 25 | 26 | .radar-spinner .circle:nth-child(2) { 27 | padding: calc(60px * 5 * 2 * 1 / 110); 28 | animation-delay: 300ms; 29 | } 30 | 31 | .radar-spinner .circle:nth-child(3) { 32 | padding: calc(60px * 5 * 2 * 2 / 110); 33 | animation-delay: 300ms; 34 | } 35 | 36 | .radar-spinner .circle:nth-child(4) { 37 | padding: calc(60px * 5 * 2 * 3 / 110); 38 | animation-delay: 0ms; 39 | } 40 | 41 | .radar-spinner .circle-inner, 42 | .radar-spinner .circle-inner-container { 43 | height: 100%; 44 | width: 100%; 45 | border-radius: 50%; 46 | border: calc(60px * 5 / 110) solid transparent; 47 | } 48 | 49 | .radar-spinner .circle-inner { 50 | border-left-color: #ff1d5e; 51 | border-right-color: #ff1d5e; 52 | } 53 | 54 | @keyframes radar-spinner-animation { 55 | 50% { 56 | transform: rotate(180deg); 57 | } 58 | 100% { 59 | transform: rotate(0deg); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /11_rhombus-spinner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | radar-spinner 8 | 9 | 10 | 11 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /11_rhombus-spinner/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #1e1e1e; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | height: 90vh; 7 | } 8 | 9 | .breeding-rhombus-spinner { 10 | height: 65px; 11 | width: 65px; 12 | position: relative; 13 | transform: rotate(45deg); 14 | } 15 | 16 | .breeding-rhombus-spinner, 17 | .breeding-rhombus-spinner * { 18 | box-sizing: border-box; 19 | } 20 | 21 | .breeding-rhombus-spinner .rhombus { 22 | height: calc(65px / 7.5); 23 | width: calc(65px / 7.5); 24 | border-radius: 50%; 25 | animation-duration: 2000ms; 26 | top: calc(65px / 2.3077); 27 | left: calc(65px / 2.3077); 28 | background-color: #ff1d5e; 29 | position: absolute; 30 | animation-iteration-count: infinite; 31 | } 32 | 33 | .breeding-rhombus-spinner .rhombus:nth-child(2n + 0) { 34 | margin-right: 0; 35 | } 36 | 37 | .breeding-rhombus-spinner .rhombus.child-1 { 38 | animation-name: spinner-child-1; 39 | animation-delay: calc(100ms * 1); 40 | } 41 | 42 | .breeding-rhombus-spinner .rhombus.child-2 { 43 | animation-name: spinner-child-2; 44 | animation-delay: calc(100ms * 2); 45 | } 46 | 47 | .breeding-rhombus-spinner .rhombus.child-3 { 48 | animation-name: spinner-child-3; 49 | animation-delay: calc(100ms * 3); 50 | } 51 | 52 | .breeding-rhombus-spinner .rhombus.child-4 { 53 | animation-name: spinner-child-4; 54 | animation-delay: calc(100ms * 4); 55 | } 56 | 57 | .breeding-rhombus-spinner .rhombus.child-5 { 58 | animation-name: spinner-child-5; 59 | animation-delay: calc(100ms * 5); 60 | } 61 | 62 | .breeding-rhombus-spinner .rhombus.child-6 { 63 | animation-name: spinner-child-6; 64 | animation-delay: calc(100ms * 6); 65 | } 66 | 67 | .breeding-rhombus-spinner .rhombus.child-7 { 68 | animation-name: spinner-child-7; 69 | animation-delay: calc(100ms * 7); 70 | } 71 | 72 | .breeding-rhombus-spinner .rhombus.child-8 { 73 | animation-name: spinner-child-8; 74 | animation-delay: calc(100ms * 8); 75 | } 76 | 77 | .breeding-rhombus-spinner .rhombus.big { 78 | height: calc(65px / 3); 79 | width: calc(65px / 3); 80 | animation-duration: 2000ms; 81 | top: calc(65px / 3); 82 | left: calc(65px / 3); 83 | background-color: #ff1d5e; 84 | animation: spinner-child-big 2s infinite; 85 | animation-delay: 0.5s; 86 | } 87 | 88 | @keyframes spinner-child-1 { 89 | 50% { 90 | transform: translate(-325%, -325%); 91 | } 92 | } 93 | 94 | @keyframes spinner-child-2 { 95 | 50% { 96 | transform: translate(0, -325%); 97 | } 98 | } 99 | 100 | @keyframes spinner-child-3 { 101 | 50% { 102 | transform: translate(325%, -325%); 103 | } 104 | } 105 | 106 | @keyframes spinner-child-4 { 107 | 50% { 108 | transform: translate(325%, 0); 109 | } 110 | } 111 | 112 | @keyframes spinner-child-5 { 113 | 50% { 114 | transform: translate(325%, 325%); 115 | } 116 | } 117 | 118 | @keyframes spinner-child-6 { 119 | 50% { 120 | transform: translate(0, 325%); 121 | } 122 | } 123 | 124 | @keyframes spinner-child-7 { 125 | 50% { 126 | transform: translate(-325%, 325%); 127 | } 128 | } 129 | 130 | @keyframes spinner-child-8 { 131 | 50% { 132 | transform: translate(-325%, 0); 133 | } 134 | } 135 | 136 | @keyframes spinner-child-big { 137 | 50% { 138 | transform: scale(0.5); 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /12_spring-spinner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | radar-spinner 8 | 9 | 10 | 11 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /12_spring-spinner/style.css: -------------------------------------------------------------------------------- 1 | .spring-spinner, 2 | .spring-spinner * { 3 | box-sizing: border-box; 4 | } 5 | 6 | .spring-spinner { 7 | height: 60px; 8 | width: 60px; 9 | } 10 | 11 | .spring-spinner .spring-spinner-part { 12 | overflow: hidden; 13 | height: calc(60px / 2); 14 | width: 60px; 15 | } 16 | 17 | .spring-spinner .spring-spinner-part.bottom { 18 | transform: rotate(180deg) scale(-1, 1); 19 | } 20 | 21 | .spring-spinner .spring-spinner-rotator { 22 | width: 60px; 23 | height: 60px; 24 | border: calc(60px / 7) solid transparent; 25 | border-right-color: #ff1d5e; 26 | border-top-color: #ff1d5e; 27 | border-radius: 50%; 28 | box-sizing: border-box; 29 | animation: spring-spinner-animation 3s ease-in-out infinite; 30 | transform: rotate(-200deg); 31 | } 32 | 33 | @keyframes spring-spinner-animation { 34 | 0% { 35 | border-width: calc(60px / 7); 36 | } 37 | 25% { 38 | border-width: calc(60px / 23.33); 39 | } 40 | 50% { 41 | transform: rotate(115deg); 42 | border-width: calc(60px / 7); 43 | } 44 | 75% { 45 | border-width: calc(60px / 23.33); 46 | } 47 | 100% { 48 | border-width: calc(60px / 7); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /13_semipolar-spinner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | semipolar-spinner 8 | 9 | 10 | 11 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /13_semipolar-spinner/style.css: -------------------------------------------------------------------------------- 1 | .semipolar-spinner, 2 | .semipolar-spinner * { 3 | box-sizing: border-box; 4 | } 5 | 6 | .semipolar-spinner { 7 | height: 65px; 8 | width: 65px; 9 | position: relative; 10 | } 11 | 12 | .semipolar-spinner .ring { 13 | border-radius: 50%; 14 | position: absolute; 15 | border: calc(65px * 0.05) solid transparent; 16 | border-top-color: #ff1d5e; 17 | border-left-color: #ff1d5e; 18 | animation: semipolar-spinner-animation 2s infinite; 19 | } 20 | 21 | .semipolar-spinner .ring:nth-child(1) { 22 | height: calc(65px - 65px * 0.2 * 0); 23 | width: calc(65px - 65px * 0.2 * 0); 24 | top: calc(65px * 0.1 * 0); 25 | left: calc(65px * 0.1 * 0); 26 | animation-delay: calc(2000ms * 0.1 * 4); 27 | z-index: 5; 28 | } 29 | 30 | .semipolar-spinner .ring:nth-child(2) { 31 | height: calc(65px - 65px * 0.2 * 1); 32 | width: calc(65px - 65px * 0.2 * 1); 33 | top: calc(65px * 0.1 * 1); 34 | left: calc(65px * 0.1 * 1); 35 | animation-delay: calc(2000ms * 0.1 * 3); 36 | z-index: 4; 37 | } 38 | 39 | .semipolar-spinner .ring:nth-child(3) { 40 | height: calc(65px - 65px * 0.2 * 2); 41 | width: calc(65px - 65px * 0.2 * 2); 42 | top: calc(65px * 0.1 * 2); 43 | left: calc(65px * 0.1 * 2); 44 | animation-delay: calc(2000ms * 0.1 * 2); 45 | z-index: 3; 46 | } 47 | 48 | .semipolar-spinner .ring:nth-child(4) { 49 | height: calc(65px - 65px * 0.2 * 3); 50 | width: calc(65px - 65px * 0.2 * 3); 51 | top: calc(65px * 0.1 * 3); 52 | left: calc(65px * 0.1 * 3); 53 | animation-delay: calc(2000ms * 0.1 * 1); 54 | z-index: 2; 55 | } 56 | 57 | .semipolar-spinner .ring:nth-child(5) { 58 | height: calc(65px - 65px * 0.2 * 4); 59 | width: calc(65px - 65px * 0.2 * 4); 60 | top: calc(65px * 0.1 * 4); 61 | left: calc(65px * 0.1 * 4); 62 | animation-delay: calc(2000ms * 0.1 * 0); 63 | z-index: 1; 64 | } 65 | 66 | @keyframes semipolar-spinner-animation { 67 | 50% { 68 | transform: rotate(360deg) scale(0.7); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /14_Loader_Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Loader Animation 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /14_Loader_Animation/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .container { 7 | width: 100%; 8 | height: 100vh; 9 | position: relative; 10 | background: #0c0404; 11 | } 12 | 13 | .span-container { 14 | width: 100px; 15 | height: 100px; 16 | transform: translate(-50% -50%); 17 | position: absolute; 18 | top: 42%; 19 | left: 45%; 20 | } 21 | 22 | span { 23 | display: block; 24 | position: absolute; 25 | width: 40%; 26 | height: 40%; 27 | border-radius: 50%; 28 | animation: speed 2s infinite ease-in-out; 29 | } 30 | 31 | .one { 32 | background: #c9ba12; 33 | animation-delay: 1.5s; 34 | } 35 | 36 | .two { 37 | background: #a11cc7; 38 | animation-delay: 1s; 39 | } 40 | 41 | .three { 42 | background: #237ead; 43 | animation-delay: 0.5s; 44 | } 45 | 46 | .four { 47 | background: #e0bcbc; 48 | } 49 | 50 | @keyframes speed { 51 | 0% { 52 | transform: translate(0%); 53 | border-radius: 50%; 54 | } 55 | 56 | 25% { 57 | transform: translate(150%) scale(0.5); 58 | border-radius: 0%; 59 | } 60 | 61 | 50% { 62 | transform: translate(150%, 150%); 63 | border-radius: 50%; 64 | } 65 | 66 | 75% { 67 | transform: translate(0, 150%) scale(0.5); 68 | border-radius: 0%; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /15_Button Hover Effects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Hover Effects 8 | 9 | 10 | 11 | Get Started 12 | 13 | 14 | -------------------------------------------------------------------------------- /15_Button Hover Effects/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | 8 | body { 9 | background: black; 10 | 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | min-height: 100vh; 15 | } 16 | 17 | a { 18 | position: relative; 19 | background: #0690fd; 20 | color: #fff; 21 | width: 60px; 22 | height: 60px; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | transition: 0.5s; 27 | box-shadow: 0 20px 25px #0690fd44; 28 | overflow: hidden; 29 | text-decoration: none; 30 | text-transform: uppercase; 31 | letter-spacing: 0.1em; 32 | font-size: 1.1em; 33 | } 34 | 35 | a:hover { 36 | width: 200px; 37 | transition-delay: 0.5s; 38 | } 39 | 40 | a::before { 41 | content: ""; 42 | position: absolute; 43 | right: 25px; 44 | width: 12px; 45 | height: 12px; 46 | border-top: 3px solid #fff; 47 | border-right: 3px solid #fff; 48 | transform: rotate(45deg); 49 | } 50 | 51 | a:hover::before { 52 | transform: rotate(45deg) translate(50px, -50px); 53 | } 54 | 55 | a::after { 56 | content: ""; 57 | position: absolute; 58 | left: -50px; 59 | width: 12px; 60 | height: 12px; 61 | border-top: 3px solid #fff; 62 | border-right: 3px solid #fff; 63 | transform: rotate(45deg) translate(-50px, 50px); 64 | } 65 | 66 | a:hover::after { 67 | transform: rotate(45deg) translate(50px, -50px); 68 | transition-delay: 1s; 69 | } 70 | 71 | a span { 72 | visibility: hidden; 73 | opacity: 0; 74 | white-space: nowrap; 75 | transition: 0.5s; 76 | transform: translate(-30px); 77 | } 78 | 79 | a:hover span { 80 | visibility: visible; 81 | opacity: 1; 82 | transition-delay: 0.75s; 83 | transform: translateX(10px); 84 | } 85 | -------------------------------------------------------------------------------- /16_Website Loaders/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Hover Effects 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /16_Website Loaders/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html { 10 | font-size: 62.5%; 11 | } 12 | 13 | body { 14 | background: #000; 15 | } 16 | 17 | .container { 18 | width: 100%; 19 | height: 100vh; 20 | display: flex; 21 | justify-content: space-evenly; 22 | align-items: center; 23 | } 24 | 25 | .loader-3 { 26 | width: 40rem; 27 | display: flex; 28 | justify-content: space-evenly; 29 | align-items: center; 30 | } 31 | 32 | .circle { 33 | width: 4rem; 34 | height: 4rem; 35 | border-radius: 50%; 36 | position: relative; 37 | } 38 | 39 | .circle:nth-child(1) { 40 | background-color: #90be6d; 41 | } 42 | .circle:nth-child(2) { 43 | background-color: #f9c74f; 44 | } 45 | .circle:nth-child(3) { 46 | background-color: #f8961e; 47 | } 48 | .circle:nth-child(4) { 49 | background-color: #f3722c; 50 | } 51 | .circle:nth-child(5) { 52 | background-color: #f94346; 53 | } 54 | 55 | .circle::before { 56 | content: ""; 57 | width: 100%; 58 | height: 100%; 59 | position: absolute; 60 | border-radius: 50%; 61 | opacity: 0.5; 62 | animation: animateLoader3 2s ease-out infinite; 63 | } 64 | 65 | .circle:nth-child(1)::before { 66 | background-color: #90be6d; 67 | } 68 | .circle:nth-child(2)::before { 69 | background-color: #f9c74f; 70 | animation-delay: 0.2s; 71 | } 72 | .circle:nth-child(3)::before { 73 | background-color: #f8961e; 74 | animation-delay: 0.4s; 75 | } 76 | .circle:nth-child(4)::before { 77 | background-color: #f3722c; 78 | animation-delay: 0.6s; 79 | } 80 | .circle:nth-child(5)::before { 81 | background-color: #f94346; 82 | animation-delay: 0.8s; 83 | } 84 | 85 | @keyframes animateLoader3 { 86 | 0% { 87 | transform: scale(1); 88 | } 89 | 90 | 50%, 91 | 75% { 92 | transform: scale(2.5); 93 | } 94 | 95 | 80%, 96 | 100% { 97 | opacity: 0; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /17_Website Loader_2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WEb Loader 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /17_Website Loader_2/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html { 10 | font-size: 62.5%; 11 | } 12 | 13 | body { 14 | background: #000; 15 | } 16 | 17 | .container { 18 | width: 100%; 19 | height: 100vh; 20 | display: flex; 21 | justify-content: space-evenly; 22 | align-items: center; 23 | } 24 | 25 | .loader-2 { 26 | width: 25rem; 27 | display: flex; 28 | justify-content: space-evenly; 29 | align-items: center; 30 | } 31 | 32 | .line { 33 | width: 1.5rem; 34 | height: 5rem; 35 | background-color: #4169e1; 36 | border-radius: 1rem; 37 | } 38 | 39 | .line:nth-child(1) { 40 | animation: animateLoader2 0.7s 0.6s infinite; 41 | } 42 | .line:nth-child(2) { 43 | animation: animateLoader2 0.7s 0.3s infinite; 44 | } 45 | .line:nth-child(3) { 46 | animation: animateLoader2 0.7s infinite; 47 | } 48 | .line:nth-child(4) { 49 | animation: animateLoader2 0.7s 0.3s infinite; 50 | } 51 | .line:nth-child(5) { 52 | animation: animateLoader2 0.7s 0.6s infinite; 53 | } 54 | 55 | @keyframes animateLoader2 { 56 | 0% { 57 | height: 5rem; 58 | } 59 | 50% { 60 | height: 18rem; 61 | } 62 | 100% { 63 | height: 5rem; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /18_Battery Charge Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Battery_Charge_Animation 8 | 9 | 13 | 14 | 15 |
16 |
17 |
18 | 19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /18_Battery Charge Animation/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --red: #ff0000; 3 | --orange: #ff9100; 4 | --yellow: #fff200; 5 | --yellow-green: #d7fc03; 6 | --green: #00ff00; 7 | --black: #000000; 8 | --gray: #9e9e9e; 9 | --white: #ffffff; 10 | } 11 | 12 | @keyframes battery-bolt { 13 | 50% { 14 | transform: scale(1.3); 15 | } 16 | 17 | 100% { 18 | transform: scale(1); 19 | } 20 | } 21 | 22 | @keyframes battery-charge { 23 | 0% { 24 | height: 0%; 25 | background: var(--red); 26 | } 27 | 28 | 25% { 29 | height: 25%; 30 | background: var(--orange); 31 | } 32 | 33 | 50% { 34 | height: 50%; 35 | background: var(--yellow); 36 | } 37 | 38 | 75% { 39 | height: 75%; 40 | background: var(--yellow-green); 41 | } 42 | 43 | 100% { 44 | height: 100%; 45 | background: var(--green); 46 | } 47 | } 48 | .battery { 49 | margin-top: 5rem; 50 | } 51 | body { 52 | width: 100vw; 53 | height: 100vh; 54 | background: #1e1e1e; 55 | overflow: hidden; 56 | } 57 | 58 | .battery-head { 59 | width: 30px; 60 | height: 10px; 61 | background: var(--black); 62 | margin: 0 auto; 63 | border: 4px solid var(--gray); 64 | border-top-right-radius: 8px; 65 | border-top-left-radius: 8px; 66 | } 67 | 68 | .battery-body { 69 | width: 100px; 70 | height: 200px; 71 | background: var(--black); 72 | position: relative; 73 | margin: 0 auto; 74 | border: 4px solid var(--gray); 75 | border-radius: 18px; 76 | } 77 | 78 | i.fa-bolt { 79 | color: var(--white); 80 | font-size: 40px; 81 | position: absolute; 82 | left: 38%; 83 | top: 40%; 84 | z-index: 1; 85 | animation: battery-bolt 2s linear infinite; 86 | } 87 | 88 | .charge { 89 | width: 100%; 90 | position: absolute; 91 | bottom: 0; 92 | border-radius: 14px; 93 | animation: battery-charge 8s linear infinite; 94 | } 95 | -------------------------------------------------------------------------------- /19_Fun Color Change_bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fun_Color_Change_bar 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /19_Fun Color Change_bar/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: rgb(0, 0, 0); 9 | display: grid; 10 | place-items: center; 11 | } 12 | 13 | section { 14 | height: 100vh; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | flex-direction: row; 19 | } 20 | 21 | .slider { 22 | overflow: hidden; 23 | background-color: white; 24 | margin: 0 30px; 25 | height: 300px; 26 | width: 50px; 27 | border-radius: 30px; 28 | position: relative; 29 | } 30 | 31 | .slider::after { 32 | content: ""; 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | height: 100%; 37 | width: 100%; 38 | z-index: 10; 39 | border-radius: 30px; 40 | box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1), -15px -15px 30px rgba(), 41 | inset -5px -5px 10px rgba(0, 0, 0, 0.2), 42 | inset 5px 5px 5px rgba(0, 0, 0, 0.1); 43 | } 44 | 45 | .slider::before { 46 | content: ""; 47 | position: absolute; 48 | top: 0; 49 | left: 0; 50 | height: 50px; 51 | width: 50px; 52 | border-radius: 50%; 53 | background-color: white; 54 | box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #2697f3, 55 | inset 5px 5px 5px rgba(0, 0, 0, 0.1); 56 | animation: animate 2.5s ease-in-out infinite; 57 | animation-delay: calc(-0.5s * var(--i)); 58 | } 59 | 60 | @keyframes animate { 61 | 0% { 62 | transform: translateY(250px); 63 | filter: hue-rotate(0deg); 64 | } 65 | 50% { 66 | transform: translateY(0); 67 | } 68 | 100% { 69 | transform: translateY(250px); 70 | filter: hue-rotate(180deg); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /1_pixel-spinner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | pixel-spinner 9 | 10 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /1_pixel-spinner/style.css: -------------------------------------------------------------------------------- 1 | .pixel-spinner, 2 | .pixel-spinner * { 3 | box-sizing: border-box; 4 | } 5 | 6 | .pixel-spinner { 7 | height: 95vh; 8 | width: 98vw; 9 | display: flex; 10 | flex-direction: row; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .pixel-spinner .pixel-spinner-inner { 16 | width: calc(70px / 7); 17 | height: calc(70px / 7); 18 | background-color: #ff1d5e; 19 | color: #ff1d5e; 20 | box-shadow: 15px 15px 0 0, -15px -15px 0 0, 15px -15px 0 0, -15px 15px 0 0, 21 | 0 15px 0 0, 15px 0 0 0, -15px 0 0 0, 0 -15px 0 0; 22 | animation: pixel-spinner-animation 2000ms linear infinite; 23 | } 24 | 25 | @keyframes pixel-spinner-animation { 26 | 50% { 27 | box-shadow: 20px 20px 0px 0px, -20px -20px 0px 0px, 20px -20px 0px 0px, 28 | -20px 20px 0px 0px, 0px 10px 0px 0px, 10px 0px 0px 0px, -10px 0px 0px 0px, 29 | 0px -10px 0px 0px; 30 | } 31 | 75% { 32 | box-shadow: 20px 20px 0px 0px, -20px -20px 0px 0px, 20px -20px 0px 0px, 33 | -20px 20px 0px 0px, 0px 10px 0px 0px, 10px 0px 0px 0px, -10px 0px 0px 0px, 34 | 0px -10px 0px 0px; 35 | } 36 | 100% { 37 | transform: rotate(360deg); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /20_Animated Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animated Loader 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /20_Animated Loader/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #000; 3 | margin: 0; 4 | height: 100vh; 5 | } 6 | 7 | .loader-holder { 8 | display: flex; 9 | height: 100%; 10 | width: 100%; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .block { 16 | width: 20px; 17 | height: 20px; 18 | border-radius: 50%; 19 | margin: 0 5px; 20 | position: relative; 21 | animation: block-animation 1.5s infinite ease-in-out; 22 | } 23 | 24 | .block:nth-child(1) {animation-delay: 0.030s;} 25 | .block:nth-child(2) {animation-delay: calc(0.030s * 2);} 26 | .block:nth-child(3) {animation-delay: calc(0.030s * 3);} 27 | .block:nth-child(4) {animation-delay: calc(0.030s * 4);} 28 | .block:nth-child(5) {animation-delay: calc(0.030s * 5);} 29 | 30 | .purple-block {background-color: #7d55f5;} 31 | .yellow-block {background-color: #f4950c;} 32 | .red-block {background-color: #f2512d;} 33 | .blue-block {background-color: #4460f1;} 34 | .green-block {background-color: #0bc466;} 35 | 36 | @keyframes block-animation { 37 | 0% { 38 | margin-top: 0; 39 | } 40 | 41 | 30% { 42 | margin-top: -150px; 43 | } 44 | 45 | 50% { 46 | margin-top: -150px; 47 | } 48 | 49 | 80% { 50 | margin-top: 0; 51 | } 52 | 53 | 100% { 54 | margin-top: 0; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /21_Atomic Flower/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Atomic_Flower 8 | 9 | 10 | 11 |
12 | 13 | 14 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /21_Atomic Flower/style.css: -------------------------------------------------------------------------------- 1 | /*GENERAL------------------------*/ 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | .box { 7 | flex: 1 1 auto; 8 | display: flex; 9 | width: 100wv; 10 | height: 100vh; 11 | } 12 | svg { 13 | width: 400px; 14 | height: 400px; 15 | display: block; 16 | margin: auto; 17 | } 18 | 19 | /*BACKGROUND-COLORS---------------*/ 20 | .black { 21 | background-color: #000; 22 | } 23 | 24 | @keyframes rotacion3 { 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | .girar3 { 30 | animation: rotacion3 4s cubic-bezier(0.67, 0.09, 0.01, 1.68) infinite 31 | alternate; 32 | transform-origin: center center; 33 | } 34 | -------------------------------------------------------------------------------- /22_Rotate and Transform squares/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rotate and Transform squares 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /22_Rotate and Transform squares/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | -webkit-box-sizing: border-box; 3 | box-sizing: border-box; 4 | } 5 | 6 | *, 7 | *:before, 8 | *:after { 9 | -webkit-box-sizing: inherit; 10 | box-sizing: inherit; 11 | } 12 | 13 | body { 14 | background: linear-gradient(130deg, #0479c3 0%, #00d4ff 50%, #0485cb 100%); 15 | } 16 | 17 | .wrapper { 18 | height: 100vh; 19 | } 20 | 21 | .square { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | right: 0; 26 | bottom: 0; 27 | -webkit-animation-duration: 5s; 28 | animation-duration: 5s; 29 | -webkit-animation-iteration-count: infinite; 30 | animation-iteration-count: infinite; 31 | border: 3px solid white; 32 | margin: auto; 33 | height: 20rem; 34 | width: 20rem; 35 | } 36 | 37 | .r-0 { 38 | -webkit-animation-name: r0; 39 | animation-name: r0; 40 | } 41 | 42 | @-webkit-keyframes r0 { 43 | 50% { 44 | border-radius: 50%; 45 | -webkit-transform: rotate(270deg); 46 | transform: rotate(270deg); 47 | height: 6rem; 48 | } 49 | } 50 | 51 | @keyframes r0 { 52 | 50% { 53 | border-radius: 50%; 54 | -webkit-transform: rotate(270deg); 55 | transform: rotate(270deg); 56 | height: 6rem; 57 | } 58 | } 59 | 60 | .r-1 { 61 | -webkit-animation-name: r1; 62 | animation-name: r1; 63 | } 64 | 65 | @-webkit-keyframes r1 { 66 | 50% { 67 | border-radius: 50%; 68 | -webkit-transform: rotate(260deg); 69 | transform: rotate(260deg); 70 | height: 6rem; 71 | } 72 | } 73 | 74 | @keyframes r1 { 75 | 50% { 76 | border-radius: 50%; 77 | -webkit-transform: rotate(260deg); 78 | transform: rotate(260deg); 79 | height: 6rem; 80 | } 81 | } 82 | 83 | .r-2 { 84 | -webkit-animation-name: r2; 85 | animation-name: r2; 86 | } 87 | 88 | @-webkit-keyframes r2 { 89 | 50% { 90 | border-radius: 50%; 91 | -webkit-transform: rotate(250deg); 92 | transform: rotate(250deg); 93 | height: 6rem; 94 | } 95 | } 96 | 97 | @keyframes r2 { 98 | 50% { 99 | border-radius: 50%; 100 | -webkit-transform: rotate(250deg); 101 | transform: rotate(250deg); 102 | height: 6rem; 103 | } 104 | } 105 | 106 | .r-3 { 107 | -webkit-animation-name: r3; 108 | animation-name: r3; 109 | } 110 | 111 | @-webkit-keyframes r3 { 112 | 50% { 113 | border-radius: 50%; 114 | -webkit-transform: rotate(240deg); 115 | transform: rotate(240deg); 116 | height: 6rem; 117 | } 118 | } 119 | 120 | @keyframes r3 { 121 | 50% { 122 | border-radius: 50%; 123 | -webkit-transform: rotate(240deg); 124 | transform: rotate(240deg); 125 | height: 6rem; 126 | } 127 | } 128 | 129 | .r-4 { 130 | -webkit-animation-name: r4; 131 | animation-name: r4; 132 | } 133 | 134 | @-webkit-keyframes r4 { 135 | 50% { 136 | border-radius: 50%; 137 | -webkit-transform: rotate(230deg); 138 | transform: rotate(230deg); 139 | height: 6rem; 140 | } 141 | } 142 | 143 | @keyframes r4 { 144 | 50% { 145 | border-radius: 50%; 146 | -webkit-transform: rotate(230deg); 147 | transform: rotate(230deg); 148 | height: 6rem; 149 | } 150 | } 151 | 152 | .r-5 { 153 | -webkit-animation-name: r5; 154 | animation-name: r5; 155 | } 156 | 157 | @-webkit-keyframes r5 { 158 | 50% { 159 | border-radius: 50%; 160 | -webkit-transform: rotate(220deg); 161 | transform: rotate(220deg); 162 | height: 6rem; 163 | } 164 | } 165 | 166 | @keyframes r5 { 167 | 50% { 168 | border-radius: 50%; 169 | -webkit-transform: rotate(220deg); 170 | transform: rotate(220deg); 171 | height: 6rem; 172 | } 173 | } 174 | 175 | .r-6 { 176 | -webkit-animation-name: r6; 177 | animation-name: r6; 178 | } 179 | 180 | @-webkit-keyframes r6 { 181 | 50% { 182 | border-radius: 50%; 183 | -webkit-transform: rotate(210deg); 184 | transform: rotate(210deg); 185 | height: 6rem; 186 | } 187 | } 188 | 189 | @keyframes r6 { 190 | 50% { 191 | border-radius: 50%; 192 | -webkit-transform: rotate(210deg); 193 | transform: rotate(210deg); 194 | height: 6rem; 195 | } 196 | } 197 | 198 | .r-7 { 199 | -webkit-animation-name: r7; 200 | animation-name: r7; 201 | } 202 | 203 | @-webkit-keyframes r7 { 204 | 50% { 205 | border-radius: 50%; 206 | -webkit-transform: rotate(200deg); 207 | transform: rotate(200deg); 208 | height: 6rem; 209 | } 210 | } 211 | 212 | @keyframes r7 { 213 | 50% { 214 | border-radius: 50%; 215 | -webkit-transform: rotate(200deg); 216 | transform: rotate(200deg); 217 | height: 6rem; 218 | } 219 | } 220 | 221 | .r-8 { 222 | -webkit-animation-name: r8; 223 | animation-name: r8; 224 | } 225 | 226 | @-webkit-keyframes r8 { 227 | 50% { 228 | border-radius: 50%; 229 | -webkit-transform: rotate(190deg); 230 | transform: rotate(190deg); 231 | height: 6rem; 232 | } 233 | } 234 | 235 | @keyframes r8 { 236 | 50% { 237 | border-radius: 50%; 238 | -webkit-transform: rotate(190deg); 239 | transform: rotate(190deg); 240 | height: 6rem; 241 | } 242 | } 243 | 244 | .r-9 { 245 | -webkit-animation-name: r9; 246 | animation-name: r9; 247 | } 248 | 249 | @-webkit-keyframes r9 { 250 | 50% { 251 | border-radius: 50%; 252 | -webkit-transform: rotate(180deg); 253 | transform: rotate(180deg); 254 | height: 6rem; 255 | } 256 | } 257 | 258 | @keyframes r9 { 259 | 50% { 260 | border-radius: 50%; 261 | -webkit-transform: rotate(180deg); 262 | transform: rotate(180deg); 263 | height: 6rem; 264 | } 265 | } 266 | 267 | .r-10 { 268 | -webkit-animation-name: r10; 269 | animation-name: r10; 270 | } 271 | 272 | @-webkit-keyframes r10 { 273 | 50% { 274 | border-radius: 50%; 275 | -webkit-transform: rotate(170deg); 276 | transform: rotate(170deg); 277 | height: 6rem; 278 | } 279 | } 280 | 281 | @keyframes r10 { 282 | 50% { 283 | border-radius: 50%; 284 | -webkit-transform: rotate(170deg); 285 | transform: rotate(170deg); 286 | height: 6rem; 287 | } 288 | } 289 | 290 | .r-11 { 291 | -webkit-animation-name: r11; 292 | animation-name: r11; 293 | } 294 | 295 | @-webkit-keyframes r11 { 296 | 50% { 297 | border-radius: 50%; 298 | -webkit-transform: rotate(160deg); 299 | transform: rotate(160deg); 300 | height: 6rem; 301 | } 302 | } 303 | 304 | @keyframes r11 { 305 | 50% { 306 | border-radius: 50%; 307 | -webkit-transform: rotate(160deg); 308 | transform: rotate(160deg); 309 | height: 6rem; 310 | } 311 | } 312 | 313 | .r-12 { 314 | -webkit-animation-name: r12; 315 | animation-name: r12; 316 | } 317 | 318 | @-webkit-keyframes r12 { 319 | 50% { 320 | border-radius: 50%; 321 | -webkit-transform: rotate(150deg); 322 | transform: rotate(150deg); 323 | height: 6rem; 324 | } 325 | } 326 | 327 | @keyframes r12 { 328 | 50% { 329 | border-radius: 50%; 330 | -webkit-transform: rotate(150deg); 331 | transform: rotate(150deg); 332 | height: 6rem; 333 | } 334 | } 335 | 336 | .r-13 { 337 | -webkit-animation-name: r13; 338 | animation-name: r13; 339 | } 340 | 341 | @-webkit-keyframes r13 { 342 | 50% { 343 | border-radius: 50%; 344 | -webkit-transform: rotate(140deg); 345 | transform: rotate(140deg); 346 | height: 6rem; 347 | } 348 | } 349 | 350 | @keyframes r13 { 351 | 50% { 352 | border-radius: 50%; 353 | -webkit-transform: rotate(140deg); 354 | transform: rotate(140deg); 355 | height: 6rem; 356 | } 357 | } 358 | 359 | .r-14 { 360 | -webkit-animation-name: r14; 361 | animation-name: r14; 362 | } 363 | 364 | @-webkit-keyframes r14 { 365 | 50% { 366 | border-radius: 50%; 367 | -webkit-transform: rotate(130deg); 368 | transform: rotate(130deg); 369 | height: 6rem; 370 | } 371 | } 372 | 373 | @keyframes r14 { 374 | 50% { 375 | border-radius: 50%; 376 | -webkit-transform: rotate(130deg); 377 | transform: rotate(130deg); 378 | height: 6rem; 379 | } 380 | } 381 | 382 | .r-15 { 383 | -webkit-animation-name: r15; 384 | animation-name: r15; 385 | } 386 | 387 | @-webkit-keyframes r15 { 388 | 50% { 389 | border-radius: 50%; 390 | -webkit-transform: rotate(120deg); 391 | transform: rotate(120deg); 392 | height: 6rem; 393 | } 394 | } 395 | 396 | @keyframes r15 { 397 | 50% { 398 | border-radius: 50%; 399 | -webkit-transform: rotate(120deg); 400 | transform: rotate(120deg); 401 | height: 6rem; 402 | } 403 | } 404 | 405 | .r-16 { 406 | -webkit-animation-name: r16; 407 | animation-name: r16; 408 | } 409 | 410 | @-webkit-keyframes r16 { 411 | 50% { 412 | border-radius: 50%; 413 | -webkit-transform: rotate(110deg); 414 | transform: rotate(110deg); 415 | height: 6rem; 416 | } 417 | } 418 | 419 | @keyframes r16 { 420 | 50% { 421 | border-radius: 50%; 422 | -webkit-transform: rotate(110deg); 423 | transform: rotate(110deg); 424 | height: 6rem; 425 | } 426 | } 427 | 428 | .r-17 { 429 | -webkit-animation-name: r17; 430 | animation-name: r17; 431 | } 432 | 433 | @-webkit-keyframes r17 { 434 | 50% { 435 | border-radius: 50%; 436 | -webkit-transform: rotate(100deg); 437 | transform: rotate(100deg); 438 | height: 6rem; 439 | } 440 | } 441 | 442 | @keyframes r17 { 443 | 50% { 444 | border-radius: 50%; 445 | -webkit-transform: rotate(100deg); 446 | transform: rotate(100deg); 447 | height: 6rem; 448 | } 449 | } 450 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /22_Rotate and Transform squares/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,IAAI,CAAC;EACH,UAAU,EAAE,UAAU;CACvB;;AAED,AAAA,CAAC;AACD,CAAC,AAAA,OAAO;AACR,CAAC,AAAA,MAAM,CAAC;EACN,UAAU,EAAE,OAAO;CACpB;;AAED,AAAA,IAAI,CAAC;EACH,UAAU,EAAE,8DAA8D;CAC3E;;AAED,AAAA,QAAQ,CAAC;EACP,MAAM,EAAE,KAAK;CACd;;AAED,AAAA,OAAO,CAAC;EACN,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,kBAAkB,EAAE,EAAE;EACtB,yBAAyB,EAAE,QAAQ;EACnC,MAAM,EAAE,eAAe;EACvB,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;CACb;;AAKC,AAAA,IAAI,CAAK;EACP,cAAc,EAAE,EAAM;CACvB;;AAED,UAAU,CAAV,EAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,IAAI,CAAK;EACP,cAAc,EAAE,EAAM;CACvB;;AAED,UAAU,CAAV,EAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,IAAI,CAAK;EACP,cAAc,EAAE,EAAM;CACvB;;AAED,UAAU,CAAV,EAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,IAAI,CAAK;EACP,cAAc,EAAE,EAAM;CACvB;;AAED,UAAU,CAAV,EAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,IAAI,CAAK;EACP,cAAc,EAAE,EAAM;CACvB;;AAED,UAAU,CAAV,EAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,IAAI,CAAK;EACP,cAAc,EAAE,EAAM;CACvB;;AAED,UAAU,CAAV,EAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,IAAI,CAAK;EACP,cAAc,EAAE,EAAM;CACvB;;AAED,UAAU,CAAV,EAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,IAAI,CAAK;EACP,cAAc,EAAE,EAAM;CACvB;;AAED,UAAU,CAAV,EAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,IAAI,CAAK;EACP,cAAc,EAAE,EAAM;CACvB;;AAED,UAAU,CAAV,EAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,IAAI,CAAK;EACP,cAAc,EAAE,EAAM;CACvB;;AAED,UAAU,CAAV,EAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,KAAK,CAAI;EACP,cAAc,EAAE,GAAM;CACvB;;AAED,UAAU,CAAV,GAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,KAAK,CAAI;EACP,cAAc,EAAE,GAAM;CACvB;;AAED,UAAU,CAAV,GAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,KAAK,CAAI;EACP,cAAc,EAAE,GAAM;CACvB;;AAED,UAAU,CAAV,GAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,KAAK,CAAI;EACP,cAAc,EAAE,GAAM;CACvB;;AAED,UAAU,CAAV,GAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,KAAK,CAAI;EACP,cAAc,EAAE,GAAM;CACvB;;AAED,UAAU,CAAV,GAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,KAAK,CAAI;EACP,cAAc,EAAE,GAAM;CACvB;;AAED,UAAU,CAAV,GAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,KAAK,CAAI;EACP,cAAc,EAAE,GAAM;CACvB;;AAED,UAAU,CAAV,GAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI;;;;AARhB,AAAA,KAAK,CAAI;EACP,cAAc,EAAE,GAAM;CACvB;;AAED,UAAU,CAAV,GAAU;EACR,GAAG;IACD,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,cAA0B;IACrC,MAAM,EAAE,IAAI", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /22_Rotate and Transform squares/style.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *:before, 7 | *:after { 8 | box-sizing: inherit; 9 | } 10 | 11 | body { 12 | background: linear-gradient(130deg, #0479c3 0%, #00d4ff 50%, #0485cb 100%); 13 | } 14 | 15 | .wrapper { 16 | height: 100vh; 17 | } 18 | 19 | .square { 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | animation-duration: 5s; 26 | animation-iteration-count: infinite; 27 | border: 3px solid white; 28 | margin: auto; 29 | height: 20rem; 30 | width: 20rem; 31 | } 32 | 33 | $squares-number: 17; 34 | 35 | @for $i from 0 through $squares-number { 36 | .r-#{$i} { 37 | animation-name: r + $i; 38 | } 39 | 40 | @keyframes r#{$i} { 41 | 50% { 42 | border-radius: 50%; 43 | transform: rotate(270deg - (10 * $i)); 44 | height: 6rem; 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /23_3d-animation_food-shop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 3d-animation_food-shop 8 | 9 | 10 | 11 |
12 |
13 |
14 |

F

15 |

S

16 |
17 |
18 |
19 |
20 |

O

21 |

H

22 |
23 |
24 |
25 |
26 |

O

27 |

O

28 |
29 |
30 |
31 |
32 |

D

33 |

P

34 |
35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /23_3d-animation_food-shop/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-style: italic; 4 | font-size: 9em; 5 | background-color: #000000; 6 | } 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | flex-wrap: nowrap; 11 | margin-top: 15vh; 12 | } 13 | 14 | .panel { 15 | background-color: transparent; 16 | width: 200px; 17 | height: 300px; 18 | perspective: 1000px; 19 | } 20 | 21 | .panel-inner { 22 | position: relative; 23 | width: 100%; 24 | height: 100%; 25 | text-align: center; 26 | transform-style: preserve-3d; 27 | animation: flip 4s linear forwards infinite; 28 | animation-direction: normal; 29 | } 30 | 31 | .panel-front, 32 | .panel-back { 33 | position: absolute; 34 | width: 100%; 35 | height: 100%; 36 | backface-visibility: hidden; 37 | } 38 | 39 | .panel-front { 40 | background-color: tomato; 41 | color: black; 42 | } 43 | 44 | .panel-back { 45 | background-color: teal; 46 | color: white; 47 | transform: rotateY(180deg); 48 | } 49 | 50 | .panel-front img { 51 | width: 300px; 52 | height: 300px; 53 | } 54 | 55 | @keyframes flip { 56 | from { 57 | transform: rotateY(0deg); 58 | } 59 | to { 60 | transform: rotateY(360deg); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /24_See_Saw_Ball_Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | See_Saw_Ball_Animation 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /24_See_Saw_Ball_Animation/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | background: #000000; 7 | } 8 | .ball { 9 | position: relative; 10 | bottom: 100px; 11 | left: calc(100% - 70px); 12 | width: 100px; 13 | height: 100px; 14 | background: #ffdaaf; 15 | border-radius: 50%; 16 | animation: ball-move 3s ease-in-out 1s infinite alternate; 17 | } 18 | .ball::after { 19 | position: absolute; 20 | content: ""; 21 | top: 50px; 22 | right: 10px; 23 | width: 10px; 24 | height: 10px; 25 | background: #fff; 26 | border-radius: 50%; 27 | } 28 | .bar { 29 | width: 500px; 30 | height: 25px; 31 | background: #a760ff; 32 | border-radius: 30px; 33 | transform: rotate(-15deg); 34 | animation: up-down 3s ease-in-out 1s infinite alternate; 35 | } 36 | @keyframes up-down { 37 | from { 38 | transform: rotate(-15deg); 39 | } 40 | to { 41 | transform: rotate(15deg); 42 | } 43 | } 44 | @keyframes ball-move { 45 | from { 46 | left: calc(100% - 70px); 47 | transform: rotate(360deg); 48 | } 49 | to { 50 | left: calc(0% - 35px); 51 | transform: rotate(0deg); 52 | } 53 | } 54 | .credits { 55 | position: fixed; 56 | bottom: 8px; 57 | right: 2px; 58 | padding: 10px; 59 | border-radius: 10px; 60 | background: #333; 61 | color: #fff; 62 | cursor: pointer; 63 | font-size: 10px; 64 | } 65 | .credits a { 66 | background: #333; 67 | color: #fff; 68 | cursor: pointer; 69 | } 70 | -------------------------------------------------------------------------------- /25_Blob_Liquid_Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blob_Liquid_Button 8 | 9 | 10 | 11 | 12 | hover me 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /25_Blob_Liquid_Button/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 100px; 3 | display: -webkit-box; 4 | display: -ms-flexbox; 5 | display: flex; 6 | -webkit-box-pack: center; 7 | -ms-flex-pack: center; 8 | justify-content: center; 9 | -webkit-box-align: center; 10 | -ms-flex-align: center; 11 | align-items: center; 12 | background: #000000; 13 | } 14 | 15 | .blob-btn { 16 | position: relative; 17 | z-index: 2; 18 | -webkit-transition: 1s ease all; 19 | transition: 1s ease all; 20 | -webkit-animation-delay: 1s; 21 | animation-delay: 1s; 22 | background: none; 23 | color: #212738; 24 | font-size: 20px; 25 | font-weight: 600; 26 | text-decoration: none; 27 | font-family: sans-serif; 28 | padding: 20px 26px; 29 | display: inline-block; 30 | } 31 | 32 | .blob-btn::before, .blob-btn::after { 33 | content: ""; 34 | display: block; 35 | position: absolute; 36 | top: 50%; 37 | left: 50%; 38 | -webkit-transform: translate(-50%, -50%); 39 | transform: translate(-50%, -50%); 40 | z-index: -1; 41 | -webkit-transition: 1s ease all; 42 | transition: 1s ease all; 43 | border-radius: 0; 44 | -webkit-animation-delay: 0.5s; 45 | animation-delay: 0.5s; 46 | } 47 | 48 | .blob-btn::before { 49 | border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 50 | background: #d1d646; 51 | width: 90%; 52 | height: 90%; 53 | } 54 | 55 | .blob-btn::after { 56 | border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%; 57 | background: #fc440f; 58 | width: 95%; 59 | height: 95%; 60 | } 61 | 62 | .blob-btn:hover::before, .blob-btn:focus::before { 63 | width: 107%; 64 | height: 122%; 65 | -webkit-animation: blob 4.5s linear infinite; 66 | animation: blob 4.5s linear infinite; 67 | opacity: 1; 68 | } 69 | 70 | .blob-btn:hover::after, .blob-btn:focus::after { 71 | width: 105%; 72 | height: 120%; 73 | -webkit-animation: blob-two 5s linear infinite; 74 | animation: blob-two 5s linear infinite; 75 | opacity: 1; 76 | } 77 | 78 | @-webkit-keyframes blob { 79 | 0% { 80 | border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%; 81 | -webkit-transform: translate(-50%, -50%) rotate(0); 82 | transform: translate(-50%, -50%) rotate(0); 83 | } 84 | 20% { 85 | border-radius: 61% 39% 14% 86% / 67% 43% 57% 33%; 86 | -webkit-transform: translate(-48%, -52%) rotate(1deg); 87 | transform: translate(-48%, -52%) rotate(1deg); 88 | } 89 | 45% { 90 | border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 91 | -webkit-transform: translate(-52%, -54%) rotate(0); 92 | transform: translate(-52%, -54%) rotate(0); 93 | } 94 | 85% { 95 | border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%; 96 | -webkit-transform: translate(-49%, -48%) rotate(-1deg); 97 | transform: translate(-49%, -48%) rotate(-1deg); 98 | } 99 | 100% { 100 | border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%; 101 | -webkit-transform: translate(-50%, -50%) rotate(0); 102 | transform: translate(-50%, -50%) rotate(0); 103 | } 104 | } 105 | 106 | @keyframes blob { 107 | 0% { 108 | border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%; 109 | -webkit-transform: translate(-50%, -50%) rotate(0); 110 | transform: translate(-50%, -50%) rotate(0); 111 | } 112 | 20% { 113 | border-radius: 61% 39% 14% 86% / 67% 43% 57% 33%; 114 | -webkit-transform: translate(-48%, -52%) rotate(1deg); 115 | transform: translate(-48%, -52%) rotate(1deg); 116 | } 117 | 45% { 118 | border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 119 | -webkit-transform: translate(-52%, -54%) rotate(0); 120 | transform: translate(-52%, -54%) rotate(0); 121 | } 122 | 85% { 123 | border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%; 124 | -webkit-transform: translate(-49%, -48%) rotate(-1deg); 125 | transform: translate(-49%, -48%) rotate(-1deg); 126 | } 127 | 100% { 128 | border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%; 129 | -webkit-transform: translate(-50%, -50%) rotate(0); 130 | transform: translate(-50%, -50%) rotate(0); 131 | } 132 | } 133 | 134 | @-webkit-keyframes blob-two { 135 | 0% { 136 | border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%; 137 | -webkit-transform: translate(-50%, -50%) rotate(0deg); 138 | transform: translate(-50%, -50%) rotate(0deg); 139 | } 140 | 15% { 141 | border-radius: 26% 74% 82% 18% / 48% 41% 59% 52%; 142 | -webkit-transform: translate(-48%, -53%) rotate(1deg); 143 | transform: translate(-48%, -53%) rotate(1deg); 144 | } 145 | 40% { 146 | border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%; 147 | -webkit-transform: translate(-52%, -57%) rotate(0); 148 | transform: translate(-52%, -57%) rotate(0); 149 | } 150 | 75% { 151 | border-radius: 61% 39% 14% 86% / 67% 43% 57% 33%; 152 | -webkit-transform: translate(-47%, -52%) rotate(-1deg); 153 | transform: translate(-47%, -52%) rotate(-1deg); 154 | } 155 | 100% { 156 | border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%; 157 | -webkit-transform: translate(-50%, -50%) rotate(0); 158 | transform: translate(-50%, -50%) rotate(0); 159 | } 160 | } 161 | 162 | @keyframes blob-two { 163 | 0% { 164 | border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%; 165 | -webkit-transform: translate(-50%, -50%) rotate(0deg); 166 | transform: translate(-50%, -50%) rotate(0deg); 167 | } 168 | 15% { 169 | border-radius: 26% 74% 82% 18% / 48% 41% 59% 52%; 170 | -webkit-transform: translate(-48%, -53%) rotate(1deg); 171 | transform: translate(-48%, -53%) rotate(1deg); 172 | } 173 | 40% { 174 | border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%; 175 | -webkit-transform: translate(-52%, -57%) rotate(0); 176 | transform: translate(-52%, -57%) rotate(0); 177 | } 178 | 75% { 179 | border-radius: 61% 39% 14% 86% / 67% 43% 57% 33%; 180 | -webkit-transform: translate(-47%, -52%) rotate(-1deg); 181 | transform: translate(-47%, -52%) rotate(-1deg); 182 | } 183 | 100% { 184 | border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%; 185 | -webkit-transform: translate(-50%, -50%) rotate(0); 186 | transform: translate(-50%, -50%) rotate(0); 187 | } 188 | } 189 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /25_Blob_Liquid_Button/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,IAAI,CAAC;EACH,OAAO,EAAE,KAAK;EACd,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,OAAO;CACpB;;AACD,AAAA,SAAS,CAAC;EACR,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,WAAW;EACvB,eAAe,EAAE,EAAE;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;EAChB,eAAe,EAAE,IAAI;EACrB,WAAW,EAAE,UAAU;EACvB,OAAO,EAAE,SAAS;EAClB,OAAO,EAAE,YAAY;CA8CtB;;AA1DD,AAcE,SAdO,AAcN,QAAQ,EAdX,SAAS,AAeN,OAAO,CAAC;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,qBAAqB;EAChC,OAAO,EAAE,EAAE;EACX,UAAU,EAAE,WAAW;EACvB,aAAa,EAAE,CAAC;EAChB,eAAe,EAAE,IAAI;CACtB;;AA1BH,AA4BE,SA5BO,AA4BN,QAAQ,CAAC;EACR,aAAa,EAAE,iCAAiC;EAChD,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CACZ;;AAjCH,AAmCE,SAnCO,AAmCN,OAAO,CAAC;EACP,aAAa,EAAE,iCAAiC;EAChD,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CACZ;;AAxCH,AA4CI,SA5CK,AA0CN,MAAM,AAEJ,QAAQ,EA5Cb,SAAS,AA2CN,MAAM,AACJ,QAAQ,CAAC;EACR,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,yBAAyB;EACpC,OAAO,EAAE,CAAC;CACX;;AAjDL,AAmDI,SAnDK,AA0CN,MAAM,AASJ,OAAO,EAnDZ,SAAS,AA2CN,MAAM,AAQJ,OAAO,CAAC;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,2BAA2B;EACtC,OAAO,EAAE,CAAC;CACX;;AAIL,UAAU,CAAV,IAAU;EACR,EAAE;IACA,aAAa,EAAE,iCAAiC;IAChD,SAAS,EAAE,qBAAqB,CAAC,SAAS;;EAE5C,GAAG;IACD,aAAa,EAAE,iCAAiC;IAChD,SAAS,EAAE,qBAAqB,CAAC,YAAY;;EAE/C,GAAG;IACD,aAAa,EAAE,iCAAiC;IAChD,SAAS,EAAE,qBAAqB,CAAC,SAAS;;EAE5C,GAAG;IACD,aAAa,EAAE,iCAAiC;IAChD,SAAS,EAAE,qBAAqB,CAAC,aAAa;;EAEhD,IAAI;IACF,aAAa,EAAE,iCAAiC;IAChD,SAAS,EAAE,qBAAqB,CAAC,SAAS;;;;AAI9C,UAAU,CAAV,QAAU;EACR,EAAE;IACA,aAAa,EAAE,iCAAiC;IAChD,SAAS,EAAE,qBAAqB,CAAC,YAAY;;EAE/C,GAAG;IACD,aAAa,EAAE,iCAAiC;IAChD,SAAS,EAAE,qBAAqB,CAAC,YAAY;;EAE/C,GAAG;IACD,aAAa,EAAE,iCAAiC;IAChD,SAAS,EAAE,qBAAqB,CAAC,SAAS;;EAE5C,GAAG;IACD,aAAa,EAAE,iCAAiC;IAChD,SAAS,EAAE,qBAAqB,CAAC,aAAa;;EAEhD,IAAI;IACF,aAAa,EAAE,iCAAiC;IAChD,SAAS,EAAE,qBAAqB,CAAC,SAAS", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /25_Blob_Liquid_Button/style.scss: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 100px; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | background: #000000; 7 | } 8 | .blob-btn { 9 | position: relative; 10 | z-index: 2; 11 | transition: 1s ease all; 12 | animation-delay: 1s; 13 | background: none; 14 | color: #212738; 15 | font-size: 20px; 16 | font-weight: 600; 17 | text-decoration: none; 18 | font-family: sans-serif; 19 | padding: 20px 26px; 20 | display: inline-block; 21 | 22 | &::before, 23 | &::after { 24 | content: ""; 25 | display: block; 26 | position: absolute; 27 | top: 50%; 28 | left: 50%; 29 | transform: translate(-50%, -50%); 30 | z-index: -1; 31 | transition: 1s ease all; 32 | border-radius: 0; 33 | animation-delay: 0.5s; 34 | } 35 | 36 | &::before { 37 | border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 38 | background: #d1d646; 39 | width: 90%; 40 | height: 90%; 41 | } 42 | 43 | &::after { 44 | border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%; 45 | background: #fc440f; 46 | width: 95%; 47 | height: 95%; 48 | } 49 | 50 | &:hover, 51 | &:focus { 52 | &::before { 53 | width: 107%; 54 | height: 122%; 55 | animation: blob 4.5s linear infinite; 56 | opacity: 1; 57 | } 58 | 59 | &::after { 60 | width: 105%; 61 | height: 120%; 62 | animation: blob-two 5s linear infinite; 63 | opacity: 1; 64 | } 65 | } 66 | } 67 | 68 | @keyframes blob { 69 | 0% { 70 | border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%; 71 | transform: translate(-50%, -50%) rotate(0); 72 | } 73 | 20% { 74 | border-radius: 61% 39% 14% 86% / 67% 43% 57% 33%; 75 | transform: translate(-48%, -52%) rotate(1deg); 76 | } 77 | 45% { 78 | border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 79 | transform: translate(-52%, -54%) rotate(0); 80 | } 81 | 85% { 82 | border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%; 83 | transform: translate(-49%, -48%) rotate(-1deg); 84 | } 85 | 100% { 86 | border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%; 87 | transform: translate(-50%, -50%) rotate(0); 88 | } 89 | } 90 | 91 | @keyframes blob-two { 92 | 0% { 93 | border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%; 94 | transform: translate(-50%, -50%) rotate(0deg); 95 | } 96 | 15% { 97 | border-radius: 26% 74% 82% 18% / 48% 41% 59% 52%; 98 | transform: translate(-48%, -53%) rotate(1deg); 99 | } 100 | 40% { 101 | border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%; 102 | transform: translate(-52%, -57%) rotate(0); 103 | } 104 | 75% { 105 | border-radius: 61% 39% 14% 86% / 67% 43% 57% 33%; 106 | transform: translate(-47%, -52%) rotate(-1deg); 107 | } 108 | 100% { 109 | border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%; 110 | transform: translate(-50%, -50%) rotate(0); 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /26_circle_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | circle_loader 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /26_circle_loader/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #000000; 3 | height: 100vh; 4 | margin: 0; 5 | padding: 0; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | } 10 | .flex { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | .bg { 16 | width: 160px; 17 | height: 160px; 18 | background: #79dae8; 19 | position: absolute; 20 | border-radius: 50%; 21 | overflow: hidden; 22 | display: flex; 23 | animation: anim 2s; 24 | animation-iteration-count: infinite; 25 | } 26 | 27 | .c { 28 | position: relative; 29 | width: 100px; 30 | height: 100px; 31 | background: #0aa1dd; 32 | border-radius: 50%; 33 | } 34 | 35 | .r1 { 36 | background: #2155cd; 37 | position: absolute; 38 | width: 20px; 39 | height: 20px; 40 | border-radius: 50%; 41 | transform: translateX(-50px); 42 | } 43 | 44 | .r2 { 45 | background: #2155cd; 46 | position: absolute; 47 | width: 20px; 48 | height: 20px; 49 | border-radius: 50%; 50 | transform: translateX(50px); 51 | } 52 | 53 | .line { 54 | width: 80px; 55 | height: 80px; 56 | border-radius: 50%; 57 | background: transparent; 58 | position: absolute; 59 | border: 20px solid transparent; 60 | border-bottom-color: #2155cd; 61 | border-right-color: #2155cd; 62 | transform: rotate(45deg); 63 | } 64 | 65 | @keyframes anim { 66 | 0% { 67 | transform: rotate(0deg) sacle(1); 68 | } 69 | 25% { 70 | transform: rotate(180deg) scale(1.3); 71 | } 72 | 50% { 73 | transform: rotate(360deg) scale(1.3); 74 | } 75 | 100% { 76 | transform: rotate(360deg) scale(1); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /27_Button_Border_Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button_Border_Animation 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Button 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /27_Button_Border_Animation/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #000000; 5 | font-family: sans-serif; 6 | } 7 | a { 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | transform: translate(-50%, -50%); 12 | text-transform: uppercase; 13 | color: #1670f0; 14 | padding: 30px 60px; 15 | font-size: 30px; 16 | letter-spacing: 2px; 17 | text-decoration: none; 18 | box-shadow: 0 20px 50px rgba(255, 255, 255, 0.05); 19 | overflow: hidden; 20 | } 21 | a:before { 22 | position: absolute; 23 | top: 2px; 24 | left: 2px; 25 | bottom: 2px; 26 | content: ""; 27 | width: 50%; 28 | background: rgba(255, 255, 255, 0.05); 29 | } 30 | a span:nth-child(1) { 31 | position: absolute; 32 | top: 0; 33 | left: 0; 34 | width: 100%; 35 | height: 2px; 36 | background: linear-gradient(to right, #0c002b, #1779ff); 37 | animation: animate1 2s linear infinite; 38 | } 39 | @keyframes animate1 { 40 | 0% { 41 | transform: translateX(-100%); 42 | } 43 | 44 | 100% { 45 | transform: translateX(100%); 46 | } 47 | } 48 | a span:nth-child(2) { 49 | position: absolute; 50 | bottom: 0; 51 | left: 0; 52 | width: 100%; 53 | height: 2px; 54 | background: linear-gradient(to left, #0c002b, #1779ff); 55 | animation: animate2 2s linear infinite; 56 | } 57 | @keyframes animate2 { 58 | 0% { 59 | transform: translateX(100%); 60 | } 61 | 62 | 100% { 63 | transform: translateX(-100%); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /28_जय_श्री_राम/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | जय_श्री_राम 8 | 9 | 10 | 11 | 12 |
13 |

जय श्री राम

14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /28_जय_श्री_राम/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Sanskrit&display=swap"); 2 | 3 | html { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #000000; 9 | color: #c23616; 10 | font: 5em "Tiro Devanagari Sanskrit", serif; 11 | margin: 0; 12 | max-height: 100vh; 13 | text-transform: uppercase; 14 | 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | div { 21 | animation: animate 5s linear infinite forwards; 22 | } 23 | 24 | @keyframes animate { 25 | 0% { 26 | transform: scale(1); 27 | } 28 | 25% { 29 | transform: scale(1.1); 30 | } 31 | 45% { 32 | transform: scale(1.4) skewX(-20deg); 33 | } 34 | 90% { 35 | transform: scale(1.1) skewX(-50deg); 36 | } 37 | 100% { 38 | transform: scale(1) skewX(-90deg); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /29_BTN_Keyframe-Sample/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BTN_Keyframe_Sample 8 | 9 | 10 | 11 | 12 |
13 |
14 |
PULSE
15 |
16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /29_BTN_Keyframe-Sample/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #000000; 3 | font-size: 16px; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | height: 100vh; 8 | } 9 | .circle { 10 | font-weight: bold; 11 | letter-spacing: 0.1rem; 12 | width: 100px; 13 | height: 100px; 14 | border-radius: 50%; 15 | background: #efeb24; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | color: #1d1f20; 20 | animation: 1.5s linear 0s infinite normal pulse; 21 | } 22 | .circle:hover { 23 | animation: none; 24 | } 25 | @keyframes pulse { 26 | 0% { 27 | transform: scale(0.9); 28 | box-shadow: 0px 1px 0px 3px #aba81a30, 0px 0px 0px 0px #efeb2450; 29 | } 30 | 30% { 31 | box-shadow: 0px 1px 0px 3px #aba81a30, 0px 0px 0px 25px #efeb2450; 32 | } 33 | 70% { 34 | box-shadow: 0px 1px 0px 3px #aba81a30, 0px 0px 0px 75px #efeb2410; 35 | } 36 | 100% { 37 | transform: scale(1); 38 | box-shadow: 1px 1px 3px 1px #aba81a30, 0px 0px 0px 100px transparent; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /2_atom-spinner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | atom-spinner 9 | 10 | 11 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /2_atom-spinner/style.css: -------------------------------------------------------------------------------- 1 | .atom-spinner, 2 | .atom-spinner * { 3 | box-sizing: border-box; 4 | } 5 | 6 | .atom-spinner { 7 | height: 60px; 8 | width: 60px; 9 | overflow: hidden; 10 | } 11 | 12 | .atom-spinner .spinner-inner { 13 | position: relative; 14 | display: block; 15 | height: 100%; 16 | width: 100%; 17 | } 18 | 19 | .atom-spinner .spinner-circle { 20 | display: block; 21 | position: absolute; 22 | color: #ff1d5e; 23 | font-size: calc(60px * 0.24); 24 | top: 50%; 25 | left: 50%; 26 | transform: translate(-50%, -50%); 27 | } 28 | 29 | .atom-spinner .spinner-line { 30 | position: absolute; 31 | width: 100%; 32 | height: 100%; 33 | border-radius: 50%; 34 | animation-duration: 1s; 35 | border-left-width: calc(60px / 25); 36 | border-top-width: calc(60px / 25); 37 | border-left-color: #ff1d5e; 38 | border-left-style: solid; 39 | border-top-style: solid; 40 | border-top-color: transparent; 41 | } 42 | 43 | .atom-spinner .spinner-line:nth-child(1) { 44 | animation: atom-spinner-animation-1 1s linear infinite; 45 | transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg); 46 | } 47 | 48 | .atom-spinner .spinner-line:nth-child(2) { 49 | animation: atom-spinner-animation-2 1s linear infinite; 50 | transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg); 51 | } 52 | 53 | .atom-spinner .spinner-line:nth-child(3) { 54 | animation: atom-spinner-animation-3 1s linear infinite; 55 | transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg); 56 | } 57 | 58 | @keyframes atom-spinner-animation-1 { 59 | 100% { 60 | transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg); 61 | } 62 | } 63 | 64 | @keyframes atom-spinner-animation-2 { 65 | 100% { 66 | transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg); 67 | } 68 | } 69 | 70 | @keyframes atom-spinner-animation-3 { 71 | 100% { 72 | transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg); 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /30_Ping-pong_balls/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ping pong balls 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /30_Ping-pong_balls/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #000000; 3 | } 4 | 5 | .container { 6 | width: 200px; 7 | height: 60px; 8 | margin: auto; 9 | margin-top: 40%; 10 | margin-left: 50%; 11 | transform: translate(-50%, -50%); 12 | } 13 | 14 | .ball { 15 | width: 20px; 16 | height: 20px; 17 | position: absolute; 18 | border-radius: 50%; 19 | left: 15%; 20 | animation: ball 0.5s alternate infinite ease; 21 | } 22 | 23 | @keyframes ball { 24 | 0% { 25 | top: 60px; 26 | height: 5px; 27 | border-radius: 50px 50px 25px 25px; 28 | transform: scaleX(1.7); 29 | background-color: #ff3ea5ff; 30 | } 31 | 32 | 40% { 33 | height: 20px; 34 | border-radius: 50%; 35 | transform: scaleX(1); 36 | background-color: #edff00ff; 37 | } 38 | 39 | 100% { 40 | top: 0%; 41 | background-color: #00a4ccff; 42 | } 43 | } 44 | 45 | .ball:nth-child(2) { 46 | left: 45%; 47 | animation-delay: 0.2s; 48 | } 49 | 50 | .ball:nth-child(3) { 51 | left: auto; 52 | right: 15%; 53 | animation-delay: 0.3s; 54 | } 55 | 56 | /*for shadow*/ 57 | 58 | .shadow { 59 | width: 20px; 60 | height: 4px; 61 | border-radius: 50%; 62 | background-color: #ffffff59; 63 | position: absolute; 64 | top: 62px; 65 | z-index: -1; 66 | left: 15%; 67 | filter: blur(1px); 68 | animation: shadow 0.5s alternate infinite ease; 69 | } 70 | 71 | @keyframes shadow { 72 | 0% { 73 | transform: scaleX(1.5); 74 | background-color: #ff3ea56b; 75 | } 76 | 77 | 40% { 78 | transform: scaleX(1); 79 | opacity: 0.7; 80 | background-color: #edff0066; 81 | } 82 | 83 | 100% { 84 | transform: scaleX(0.2); 85 | opacity: 0.4; 86 | background-color: #00a4cc6b; 87 | } 88 | } 89 | 90 | .shadow:nth-child(4) { 91 | left: 45%; 92 | animation-delay: 0.2s; 93 | } 94 | 95 | .shadow:nth-child(5) { 96 | left: auto; 97 | right: 15%; 98 | animation-delay: 0.3s; 99 | } 100 | -------------------------------------------------------------------------------- /31_Blinking_Eye/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blinking_Eye 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /31_Blinking_Eye/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 20px 0; 3 | width: 100vw; 4 | } 5 | 6 | .eye-outer { 7 | width: 200px; 8 | height: 200px; 9 | border-radius: 100% 0; 10 | background: #e84501; 11 | margin: auto; 12 | transform: rotate(45deg); 13 | position: relative; 14 | overflow: hidden; 15 | } 16 | 17 | .eye-outer::before { 18 | content: ""; 19 | position: absolute; 20 | width: 360px; 21 | height: 100px; 22 | border-top-left-radius: 100px; 23 | border-top-right-radius: 100px; 24 | background: #d74200; 25 | top: -65px; 26 | right: -18px; 27 | transform: rotate(315deg); 28 | animation: closeDown 2.5s ease infinite; 29 | z-index: 900; 30 | } 31 | 32 | @keyframes closeDown { 33 | 10% { 34 | top: 41px; 35 | } 36 | 11%, 37 | 100% { 38 | top: -67px; 39 | } 40 | } 41 | 42 | .eye-outer::after { 43 | content: ""; 44 | position: absolute; 45 | width: 360px; 46 | height: 100px; 47 | border-top-left-radius: 100px; 48 | border-top-right-radius: 100px; 49 | background: #d74200; 50 | bottom: -60px; 51 | transform: rotate(135deg); 52 | left: -20px; 53 | animation: closeUp 2.5s ease infinite; 54 | } 55 | 56 | @keyframes closeUp { 57 | 10% { 58 | bottom: 36px; 59 | } 60 | 11%, 61 | 100% { 62 | bottom: -60px; 63 | } 64 | } 65 | 66 | .eye-inner { 67 | width: 100px; 68 | height: 100px; 69 | border-radius: 50%; 70 | background: #fff; 71 | position: absolute; 72 | top: 47px; 73 | left: 53px; 74 | animation: rotate 1.5s ease infinite; 75 | } 76 | 77 | @keyframes rotate { 78 | 0% { 79 | transform: rotate(360deg) translate(0, 0px) rotate(-360deg); 80 | } 81 | 25% { 82 | transform: rotate(360deg) translate(-15px, 15px) rotate(360deg); 83 | } 84 | 50% { 85 | transform: rotate(360deg) translate(0px, 10px) rotate(-360deg); 86 | } 87 | 75% { 88 | transform: rotate(360deg) translate(15px, -15px) rotate(-360deg); 89 | } 90 | 100% { 91 | transform: rotate(360deg) translate(-2px, -2px) rotate(-360deg); 92 | } 93 | } 94 | 95 | .inner-circle { 96 | width: 76px; 97 | height: 76px; 98 | border-radius: 50%; 99 | background: #82320f; 100 | margin: 12px; 101 | } 102 | 103 | /* a { 104 | cursor: url(https://jenniferheintz.com/assets/circle-cursor@2x.png) 8 8,auto; 105 | } */ 106 | 107 | .eye { 108 | width: 100px; 109 | height: 100px; 110 | border-radius: 50%; 111 | background: #000; 112 | } 113 | -------------------------------------------------------------------------------- /32_Shadow-Text-Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Shadow-Text-Effect 8 | 9 | 10 | 11 |
12 |
13 | H 14 | E 15 | L 16 | L 17 | O 18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /32_Shadow-Text-Effect/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | border: 0; 3 | padding: 0; 4 | background-color: #000000; 5 | font-family: "Fredoka One", cursive; 6 | } 7 | 8 | .container { 9 | height: 100vh; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .text { 16 | font-size: 80px; 17 | letter-spacing: 10px; 18 | text-transform: uppercase; 19 | } 20 | 21 | .text .letter.r { 22 | animation-delay: 0.3s; 23 | color: #cc4c31; 24 | text-shadow: 6px 6px #fbaa95, 3px 3px #fbaa95; 25 | } 26 | 27 | .text .letter.b { 28 | animation-delay: 0.15s; 29 | color: #7cc0be; 30 | text-shadow: 6px 6px #b4e0e3, 3px 3px #b4e0e3; 31 | } 32 | 33 | .text .letter.o { 34 | animation-delay: 0.4s; 35 | color: #fdaa35; 36 | text-shadow: 6px 6px #f6c17e, 3px 3px #f6c17e; 37 | } 38 | 39 | .text .letter.g { 40 | animation-delay: 0.25s; 41 | color: #58a473; 42 | text-shadow: 6px 6px #a6caa1, 3px 3px #a6caa1; 43 | } 44 | 45 | .text .letter.p { 46 | animation-delay: 0.5s; 47 | color: #453876; 48 | text-shadow: 6px 6px #a49bc0, 3px 3px #a49bc0; 49 | } 50 | 51 | .text .letter { 52 | position: relative; 53 | animation: move 1.85s infinite; 54 | } 55 | @keyframes move { 56 | 0% { 57 | top: 0; 58 | } 59 | 50% { 60 | top: -25px; 61 | } 62 | 100% { 63 | top: 0; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /33_Checkmark/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Checkmark 8 | 9 | 10 | 11 | 12 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /33_Checkmark/style.css: -------------------------------------------------------------------------------- 1 | .checkmark { 2 | max-width: 40px; 3 | } 4 | 5 | .check { 6 | stroke-dasharray: 116; 7 | stroke-dashoffset: 0; 8 | animation: checked 3s linear alternate infinite; 9 | } 10 | 11 | @keyframes checked { 12 | 0%, 13 | 100% { 14 | stroke-dashoffset: 116; 15 | } 16 | 30%, 17 | 70% { 18 | stroke-dashoffset: 0; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /34_scroll_down_BTN/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | scroll_down_BTN 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /34_scroll_down_BTN/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #000000; 5 | } 6 | .center { 7 | position: absolute; 8 | top: 50%; 9 | left: 50%; 10 | transform: translate(-50%, -50%); 11 | } 12 | .down { 13 | position: relative; 14 | width: 50px; 15 | height: 80px; 16 | border-radius: 25px; 17 | background: transparent; 18 | border: 4px solid #fff; 19 | overflow: hidden; 20 | } 21 | .down:before { 22 | content: ""; 23 | position: absolute; 24 | width: 6px; 25 | height: 6px; 26 | border-radius: 50%; 27 | background: #fff; 28 | left: 50%; 29 | top: 10px; 30 | transform: translate(-50%, 0); 31 | animation: animate 1s infinite linear; 32 | } 33 | .down:after { 34 | content: ""; 35 | position: absolute; 36 | width: 6px; 37 | height: 15px; 38 | border-radius: 50%; 39 | background: #fff; 40 | left: 50%; 41 | top: 5px; 42 | transform: translate(-50%, 0); 43 | border-radius: 3px; 44 | } 45 | @keyframes animate { 46 | 0% { 47 | transform: translate(-50%, 20px); 48 | opacity: 0; 49 | } 50 | 50% { 51 | transform: translate(-50%, 60px); 52 | opacity: 1; 53 | } 54 | 100% { 55 | transform: translate(-50%, 100px); 56 | opacity: 0; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /35_Neon_Square_Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Neon_Square_Loader 8 | 9 | 10 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /35_Neon_Square_Loader/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | position: relative; 8 | background-color: #000000; 9 | } 10 | 11 | *, 12 | *::before, 13 | *::after { 14 | box-sizing: border-box; 15 | } 16 | 17 | .codepad-logo, 18 | .codepad-logo::before, 19 | .codepad-logo::after { 20 | position: absolute; 21 | top: 0; 22 | bottom: 0; 23 | left: 0; 24 | right: 0; 25 | } 26 | 27 | .codepad-logo { 28 | width: 200px; 29 | height: 200px; 30 | margin: auto; 31 | color: #3498db; 32 | border-radius: 6px; 33 | box-shadow: inset 0 0 0 1px #3498db; 34 | transform: rotate(45deg); 35 | } 36 | 37 | .logo { 38 | width: 100%; 39 | height: 100%; 40 | transform: rotate(-45deg); 41 | } 42 | 43 | .codepad-logo::before, 44 | .codepad-logo::after { 45 | content: ""; 46 | z-index: -1; 47 | margin: -5%; 48 | box-shadow: inset 0 0 0 2px; 49 | border-radius: 6px; 50 | animation: clipIt 8s linear infinite; 51 | } 52 | .codepad-logo::before { 53 | animation-delay: -4s; 54 | } 55 | 56 | @keyframes clipIt { 57 | 0%, 58 | 100% { 59 | clip: rect(0px, 220px, 2px, 0px); 60 | } 61 | 25% { 62 | clip: rect(0px, 2px, 220px, 0px); 63 | } 64 | 50% { 65 | clip: rect(218px, 220px, 220px, 0px); 66 | } 67 | 75% { 68 | clip: rect(0px, 220px, 220px, 218px); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /3_fingerprint-spinner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | fingerprint-spinner 9 | 10 | 11 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /3_fingerprint-spinner/style.css: -------------------------------------------------------------------------------- 1 | .fingerprint-spinner, 2 | .fingerprint-spinner * { 3 | box-sizing: border-box; 4 | } 5 | 6 | .fingerprint-spinner { 7 | height: 64px; 8 | width: 64px; 9 | padding: 2px; 10 | overflow: hidden; 11 | position: relative; 12 | } 13 | 14 | .fingerprint-spinner .spinner-ring { 15 | position: absolute; 16 | border-radius: 50%; 17 | border: 2px solid transparent; 18 | border-top-color: #ff1d5e; 19 | animation: fingerprint-spinner-animation 1500ms 20 | cubic-bezier(0.68, -0.75, 0.265, 1.75) infinite forwards; 21 | margin: auto; 22 | bottom: 0; 23 | left: 0; 24 | right: 0; 25 | top: 0; 26 | } 27 | 28 | .fingerprint-spinner .spinner-ring:nth-child(1) { 29 | height: calc(60px / 9 + 0 * 60px / 9); 30 | width: calc(60px / 9 + 0 * 60px / 9); 31 | animation-delay: calc(50ms * 1); 32 | } 33 | 34 | .fingerprint-spinner .spinner-ring:nth-child(2) { 35 | height: calc(60px / 9 + 1 * 60px / 9); 36 | width: calc(60px / 9 + 1 * 60px / 9); 37 | animation-delay: calc(50ms * 2); 38 | } 39 | 40 | .fingerprint-spinner .spinner-ring:nth-child(3) { 41 | height: calc(60px / 9 + 2 * 60px / 9); 42 | width: calc(60px / 9 + 2 * 60px / 9); 43 | animation-delay: calc(50ms * 3); 44 | } 45 | 46 | .fingerprint-spinner .spinner-ring:nth-child(4) { 47 | height: calc(60px / 9 + 3 * 60px / 9); 48 | width: calc(60px / 9 + 3 * 60px / 9); 49 | animation-delay: calc(50ms * 4); 50 | } 51 | 52 | .fingerprint-spinner .spinner-ring:nth-child(5) { 53 | height: calc(60px / 9 + 4 * 60px / 9); 54 | width: calc(60px / 9 + 4 * 60px / 9); 55 | animation-delay: calc(50ms * 5); 56 | } 57 | 58 | .fingerprint-spinner .spinner-ring:nth-child(6) { 59 | height: calc(60px / 9 + 5 * 60px / 9); 60 | width: calc(60px / 9 + 5 * 60px / 9); 61 | animation-delay: calc(50ms * 6); 62 | } 63 | 64 | .fingerprint-spinner .spinner-ring:nth-child(7) { 65 | height: calc(60px / 9 + 6 * 60px / 9); 66 | width: calc(60px / 9 + 6 * 60px / 9); 67 | animation-delay: calc(50ms * 7); 68 | } 69 | 70 | .fingerprint-spinner .spinner-ring:nth-child(8) { 71 | height: calc(60px / 9 + 7 * 60px / 9); 72 | width: calc(60px / 9 + 7 * 60px / 9); 73 | animation-delay: calc(50ms * 8); 74 | } 75 | 76 | .fingerprint-spinner .spinner-ring:nth-child(9) { 77 | height: calc(60px / 9 + 8 * 60px / 9); 78 | width: calc(60px / 9 + 8 * 60px / 9); 79 | animation-delay: calc(50ms * 9); 80 | } 81 | 82 | @keyframes fingerprint-spinner-animation { 83 | 100% { 84 | transform: rotate(360deg); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /4_Rainbow_border/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Rainbow border 9 | 10 | 11 |
Rainbow border
12 | 13 | 14 | -------------------------------------------------------------------------------- /4_Rainbow_border/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: -webkit-box; 3 | display: -ms-flexbox; 4 | display: flex; 5 | -webkit-box-pack: center; 6 | -ms-flex-pack: center; 7 | justify-content: center; 8 | -webkit-box-align: center; 9 | -ms-flex-align: center; 10 | align-items: center; 11 | height: 100vh; 12 | } 13 | 14 | *, 15 | *::before, 16 | *::after { 17 | -webkit-box-sizing: border-box; 18 | box-sizing: border-box; 19 | } 20 | 21 | @-webkit-keyframes rotate { 22 | 100% { 23 | -webkit-transform: rotate(1turn); 24 | transform: rotate(1turn); 25 | } 26 | } 27 | 28 | @keyframes rotate { 29 | 100% { 30 | -webkit-transform: rotate(1turn); 31 | transform: rotate(1turn); 32 | } 33 | } 34 | 35 | .rainbow { 36 | position: relative; 37 | z-index: 0; 38 | width: 400px; 39 | height: 300px; 40 | border-radius: 10px; 41 | overflow: hidden; 42 | padding: 2rem; 43 | } 44 | 45 | .rainbow::before { 46 | content: ""; 47 | position: absolute; 48 | z-index: -2; 49 | left: -50%; 50 | top: -50%; 51 | width: 200%; 52 | height: 200%; 53 | background-color: #399953; 54 | background-repeat: no-repeat; 55 | background-size: 50% 50%, 50% 50%; 56 | background-position: 0 0, 100% 0, 100% 100%, 0 100%; 57 | background-image: -webkit-gradient(linear, left top, left bottom, from(#399953), to(#399953)), -webkit-gradient(linear, left top, left bottom, from(#fbb300), to(#fbb300)), -webkit-gradient(linear, left top, left bottom, from(#d53e33), to(#d53e33)), -webkit-gradient(linear, left top, left bottom, from(#377af5), to(#377af5)); 58 | background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5); 59 | -webkit-animation: rotate 4s linear infinite; 60 | animation: rotate 4s linear infinite; 61 | } 62 | 63 | .rainbow::after { 64 | content: ""; 65 | position: absolute; 66 | z-index: -1; 67 | left: 6px; 68 | top: 6px; 69 | width: calc(100% - 12px); 70 | height: calc(100% - 12px); 71 | background: white; 72 | border-radius: 5px; 73 | } 74 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /4_Rainbow_border/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,KAAK;CACd;;AAED,AAAA,CAAC;AACD,CAAC,AAAA,QAAQ;AACT,CAAC,AAAA,OAAO,CAAC;EACP,UAAU,EAAE,UAAU;CACvB;;AAED,UAAU,CAAV,MAAU;EACR,IAAI;IACF,SAAS,EAAE,aAAa;;;;AAI5B,AAAA,QAAQ,CAAC;EACP,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;EACV,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,IAAI;CA+Bd;;AAtCD,AASE,QATM,AASL,QAAQ,CAAC;EACR,OAAO,EAAE,EAAE;EACX,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,EAAE;EACX,IAAI,EAAE,IAAI;EACV,GAAG,EAAE,IAAI;EACT,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;EACzB,iBAAiB,EAAE,SAAS;EAC5B,eAAe,EAAE,gBAAgB;EACjC,mBAAmB,EAAE,8BAA8B;EACnD,gBAAgB,EAAE,iCAAiC,EACjD,iCAAiC,EAAE,iCAAiC,EACpE,iCAAiC;EACnC,SAAS,EAAE,yBAAyB;CACrC;;AAzBH,AA2BE,QA3BM,AA2BL,OAAO,CAAC;EACP,OAAO,EAAE,EAAE;EACX,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,EAAE;EACX,IAAI,EAAE,GAAG;EACT,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,iBAAiB;EACxB,MAAM,EAAE,iBAAiB;EACzB,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,GAAG;CACnB", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /4_Rainbow_border/style.scss: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | } 7 | 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: border-box; 12 | } 13 | 14 | @keyframes rotate { 15 | 100% { 16 | transform: rotate(1turn); 17 | } 18 | } 19 | 20 | .rainbow { 21 | position: relative; 22 | z-index: 0; 23 | width: 400px; 24 | height: 300px; 25 | border-radius: 10px; 26 | overflow: hidden; 27 | padding: 2rem; 28 | 29 | &::before { 30 | content: ""; 31 | position: absolute; 32 | z-index: -2; 33 | left: -50%; 34 | top: -50%; 35 | width: 200%; 36 | height: 200%; 37 | background-color: #399953; 38 | background-repeat: no-repeat; 39 | background-size: 50% 50%, 50% 50%; 40 | background-position: 0 0, 100% 0, 100% 100%, 0 100%; 41 | background-image: linear-gradient(#399953, #399953), 42 | linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), 43 | linear-gradient(#377af5, #377af5); 44 | animation: rotate 4s linear infinite; 45 | } 46 | 47 | &::after { 48 | content: ""; 49 | position: absolute; 50 | z-index: -1; 51 | left: 6px; 52 | top: 6px; 53 | width: calc(100% - 12px); 54 | height: calc(100% - 12px); 55 | background: white; 56 | border-radius: 5px; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /5_flower_spinner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | flower-spinner 8 | 9 | 10 | 11 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /5_flower_spinner/style.css: -------------------------------------------------------------------------------- 1 | .flower-spinner, 2 | .flower-spinner * { 3 | box-sizing: border-box; 4 | } 5 | 6 | .flower-spinner { 7 | height: 70px; 8 | width: 70px; 9 | display: flex; 10 | flex-direction: row; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .flower-spinner .dots-container { 16 | height: calc(70px / 7); 17 | width: calc(70px / 7); 18 | } 19 | 20 | .flower-spinner .smaller-dot { 21 | background: #ff1d5e; 22 | height: 100%; 23 | width: 100%; 24 | border-radius: 50%; 25 | animation: flower-spinner-smaller-dot-animation 2.5s 0s infinite both; 26 | } 27 | 28 | .flower-spinner .bigger-dot { 29 | background: #ff1d5e; 30 | height: 100%; 31 | width: 100%; 32 | padding: 10%; 33 | border-radius: 50%; 34 | animation: flower-spinner-bigger-dot-animation 2.5s 0s infinite both; 35 | } 36 | 37 | @keyframes flower-spinner-bigger-dot-animation { 38 | 0%, 39 | 100% { 40 | box-shadow: rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px, 41 | rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px, 42 | rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px, 43 | rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px; 44 | } 45 | 46 | 50% { 47 | transform: rotate(180deg); 48 | } 49 | 50 | 25%, 51 | 75% { 52 | box-shadow: rgb(255, 29, 94) 26px 0px 0px, rgb(255, 29, 94) -26px 0px 0px, 53 | rgb(255, 29, 94) 0px 26px 0px, rgb(255, 29, 94) 0px -26px 0px, 54 | rgb(255, 29, 94) 19px -19px 0px, rgb(255, 29, 94) 19px 19px 0px, 55 | rgb(255, 29, 94) -19px -19px 0px, rgb(255, 29, 94) -19px 19px 0px; 56 | } 57 | 58 | 100% { 59 | transform: rotate(360deg); 60 | box-shadow: rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px, 61 | rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px, 62 | rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px, 63 | rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px; 64 | } 65 | } 66 | 67 | @keyframes flower-spinner-smaller-dot-animation { 68 | 0%, 69 | 100% { 70 | box-shadow: rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px, 71 | rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px, 72 | rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px, 73 | rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px; 74 | } 75 | 76 | 25%, 77 | 75% { 78 | box-shadow: rgb(255, 29, 94) 14px 0px 0px, rgb(255, 29, 94) -14px 0px 0px, 79 | rgb(255, 29, 94) 0px 14px 0px, rgb(255, 29, 94) 0px -14px 0px, 80 | rgb(255, 29, 94) 10px -10px 0px, rgb(255, 29, 94) 10px 10px 0px, 81 | rgb(255, 29, 94) -10px -10px 0px, rgb(255, 29, 94) -10px 10px 0px; 82 | } 83 | 84 | 100% { 85 | box-shadow: rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px, 86 | rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px, 87 | rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px, 88 | rgb(255, 29, 94) 0px 0px 0px, rgb(255, 29, 94) 0px 0px 0px; 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /6_hollow_dots_spinner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | hollow-dots-spinner 9 | 10 | 11 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /6_hollow_dots_spinner/style.css: -------------------------------------------------------------------------------- 1 | .hollow-dots-spinner, 2 | .hollow-dots-spinner * { 3 | box-sizing: border-box; 4 | } 5 | 6 | .hollow-dots-spinner { 7 | height: 15px; 8 | width: calc(30px * 3); 9 | } 10 | 11 | .hollow-dots-spinner .dot { 12 | width: 15px; 13 | height: 15px; 14 | margin: 0 calc(15px / 2); 15 | border: calc(15px / 5) solid #ff1d5e; 16 | border-radius: 50%; 17 | float: left; 18 | transform: scale(0); 19 | animation: hollow-dots-spinner-animation 1000ms ease infinite 0ms; 20 | } 21 | 22 | .hollow-dots-spinner .dot:nth-child(1) { 23 | animation-delay: calc(300ms * 1); 24 | } 25 | 26 | .hollow-dots-spinner .dot:nth-child(2) { 27 | animation-delay: calc(300ms * 2); 28 | } 29 | 30 | .hollow-dots-spinner .dot:nth-child(3) { 31 | animation-delay: calc(300ms * 3); 32 | } 33 | 34 | @keyframes hollow-dots-spinner-animation { 35 | 50% { 36 | transform: scale(1); 37 | opacity: 1; 38 | } 39 | 100% { 40 | opacity: 0; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /7_circles_spinner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | intersecting-circles-spinner 8 | 9 | 10 | 11 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /7_circles_spinner/style.css: -------------------------------------------------------------------------------- 1 | .intersecting-circles-spinner, 2 | .intersecting-circles-spinner * { 3 | box-sizing: border-box; 4 | } 5 | 6 | .intersecting-circles-spinner { 7 | height: 70px; 8 | width: 70px; 9 | position: relative; 10 | display: flex; 11 | flex-direction: row; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .intersecting-circles-spinner .spinnerBlock { 17 | animation: intersecting-circles-spinners-animation 1200ms linear infinite; 18 | transform-origin: center; 19 | display: block; 20 | height: 35px; 21 | width: 35px; 22 | } 23 | 24 | .intersecting-circles-spinner .circle { 25 | display: block; 26 | border: 2px solid #ff1d5e; 27 | border-radius: 50%; 28 | height: 100%; 29 | width: 100%; 30 | position: absolute; 31 | left: 0; 32 | top: 0; 33 | } 34 | 35 | .intersecting-circles-spinner .circle:nth-child(1) { 36 | left: 0; 37 | top: 0; 38 | } 39 | 40 | .intersecting-circles-spinner .circle:nth-child(2) { 41 | left: calc(35px * -0.36); 42 | top: calc(35px * 0.2); 43 | } 44 | 45 | .intersecting-circles-spinner .circle:nth-child(3) { 46 | left: calc(35px * -0.36); 47 | top: calc(35px * -0.2); 48 | } 49 | 50 | .intersecting-circles-spinner .circle:nth-child(4) { 51 | left: 0; 52 | top: calc(35px * -0.36); 53 | } 54 | 55 | .intersecting-circles-spinner .circle:nth-child(5) { 56 | left: calc(35px * 0.36); 57 | top: calc(35px * -0.2); 58 | } 59 | 60 | .intersecting-circles-spinner .circle:nth-child(6) { 61 | left: calc(35px * 0.36); 62 | top: calc(35px * 0.2); 63 | } 64 | 65 | .intersecting-circles-spinner .circle:nth-child(7) { 66 | left: 0; 67 | top: calc(35px * 0.36); 68 | } 69 | 70 | @keyframes intersecting-circles-spinners-animation { 71 | from { 72 | transform: rotate(0deg); 73 | } 74 | to { 75 | transform: rotate(360deg); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /8_CloudMaxis/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CloudMaxis 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /8_CloudMaxis/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #1e1e1e; 3 | } 4 | 5 | .container { 6 | position: absolute; 7 | left: 50%; 8 | width: 20em; 9 | height: 20em; 10 | top: 50%; 11 | transition: 0.5s; 12 | -webkit-transition: 0.5s; 13 | -moz-transition: 0.5s; 14 | transform: translate(-50%, -50%) scale(0.5, 0.5); 15 | -webkit-transform: translate(-50%, -50%) scale(0.5, 0.5); 16 | -moz-transform: translate(-50%, -50%) scale(0.5, 0.5); 17 | } 18 | .container span { 19 | width: 6em; 20 | height: 6em; 21 | display: inline-block; 22 | position: absolute; 23 | transition: 0.5s; 24 | -webkit-transition: 0.5s; 25 | -moz-transition: 0.5s; 26 | border-radius: 50%; 27 | background-color: #29a3d6; 28 | } 29 | .container span.topLeft { 30 | left: 3em; 31 | top: 4em; 32 | width: 5em; 33 | height: 5em; 34 | } 35 | .container span.bottomLeft { 36 | left: 0; 37 | top: 6em; 38 | } 39 | .container span.middleTop { 40 | width: 11em; 41 | height: 11em; 42 | left: 6em; 43 | } 44 | .container span.rightTop { 45 | left: 14em; 46 | top: 6em; 47 | } 48 | .container span.rightBottom { 49 | border-radius: 0; 50 | width: 14em; 51 | height: 5em; 52 | top: 7em; 53 | left: 2.8em; 54 | } 55 | .container:hover { 56 | transition: 0.5s; 57 | -webkit-transition: 0.5s; 58 | -moz-transition: 0.5s; 59 | } 60 | .container:hover span { 61 | width: 5em; 62 | height: 10em; 63 | display: inline-block; 64 | position: absolute; 65 | transform: rotate(45deg); 66 | -webkit-transform: rotate(45deg); 67 | -moz-transform: rotate(45deg); 68 | margin: 0; 69 | } 70 | .container:hover span.topLeft { 71 | top: 0; 72 | left: 4em; 73 | height: 5em; 74 | border-radius: 0 2.5em 0 0; 75 | transform: rotate(-45deg); 76 | -webkit-transform: rotate(-45deg); 77 | -moz-transform: rotate(-45deg); 78 | transition: 0.3s; 79 | -webkit-transition: 0.3s; 80 | -moz-transition: 0.3s; 81 | background-color: #46b902; 82 | } 83 | .container:hover span.bottomLeft { 84 | top: 2.75em; 85 | left: 2.25em; 86 | border-radius: 2.5em 0 0 0; 87 | transform: rotate(-45deg); 88 | -webkit-transform: rotate(-45deg); 89 | -moz-transform: rotate(-45deg); 90 | transition: 0.3s; 91 | -webkit-transition: 0.3s; 92 | -moz-transition: 0.3s; 93 | background-color: #eb1d41; 94 | } 95 | .container:hover span.middleTop { 96 | left: 9.3em; 97 | top: -0.75em; 98 | border-radius: 2.5em 0 0 0; 99 | transition: 0.3s; 100 | -webkit-transition: 0.3s; 101 | -moz-transition: 0.3s; 102 | background-color: #00a6d3; 103 | } 104 | .container:hover span.rightTop { 105 | height: 5em; 106 | border-radius: 0 2.5em 0 0; 107 | left: 14.55em; 108 | top: 3.55em; 109 | transition: 0.3s; 110 | -webkit-transition: 0.3s; 111 | -moz-transition: 0.3s; 112 | background-color: #f9c203; 113 | } 114 | .container:hover span.rightBottom { 115 | border-radius: 0 0 2.5em 0; 116 | left: 9.25em; 117 | top: 6.25em; 118 | transition: 0.3s; 119 | -webkit-transition: 0.3s; 120 | -moz-transition: 0.3s; 121 | background-color: #f37101; 122 | } 123 | -------------------------------------------------------------------------------- /9_progressBar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9_progressBar/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | color-scheme: light dark; 3 | block-size: 100%; 4 | } 5 | 6 | * { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | } 11 | 12 | body { 13 | background-color: #1e1e1e; 14 | min-block-size: 100%; 15 | display: grid; 16 | place-content: center; 17 | } 18 | --------------------------------------------------------------------------------