├── README.md ├── ball-loading ├── index.css └── index.html ├── check-list ├── index.css └── index.html ├── childhood-game ├── index.css └── index.html ├── data-night-switch ├── index.css └── index.html ├── login-page ├── index.css └── index.html ├── one-div-ball-loading ├── index.css └── index.html ├── pencil-folder ├── index.css └── index.html ├── profile-card ├── avatar.svg ├── facebook.svg ├── index.css ├── index.html ├── instagram.svg ├── linkedIn.svg └── twitter.svg ├── ps5-loading-icon ├── index.css └── index.html └── yuanshen-calendar ├── index.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | ### CSS 案例目录 2 | 3 | 1. **[CSS案例： 元素周期表](https://github.com/Fengzhen8023/css-demo/tree/periodic_table)** 4 | 5 | 视频地址： [「CSS 案例」元素周期表](https://www.bilibili.com/video/av80244004/ ) 6 | 7 | 2. **[CSS案例： 太极八卦图](https://github.com/Fengzhen8023/css-demo/tree/taiji)** 8 | 9 | 视频地址： [「CSS 案例」太极八卦图](https://www.bilibili.com/video/av80849979/ ) 10 | 11 | 3. **[CSS案例： 手机充电动态图](https://github.com/Fengzhen8023/css-demo/tree/charge)** 12 | 13 | 视频地址： 14 | [「CSS 案例」手机充电特效（上）](https://www.bilibili.com/video/av81476442/ ) 15 | [「CSS 案例」手机充电特效（下）](https://www.bilibili.com/video/av81592657/ ) 16 | 17 | 4. **[CSS案例： CSS绘制40种基本图形](https://github.com/Fengzhen8023/css-demo/tree/basic_graph)** 18 | 19 | 视频地址： 20 | [「CSS 案例」CSS绘制40种常见图形（上）](https://www.bilibili.com/video/av82203155/ ) 21 | [「CSS 案例」CSS绘制40种常见图形（下）](https://www.bilibili.com/video/av82741876/ ) 22 | 23 | 5. **[CSS案例： 一键三连UI和动画效果]( https://github.com/Fengzhen8023/css-demo/tree/yi_jian_san_lian)** 24 | 25 | 视频地址： 26 | [「CSS 案例」B站一键三连UI效果](https://www.bilibili.com/video/av83146082/ ) 27 | [「CSS 案例」B站一键三连动画效果](https://www.bilibili.com/video/av83202745/ ) 28 | 29 | 6. **[CSS案例： 弹性小球加载效果](https://github.com/Fengzhen8023/css-demo/tree/elastic_ball)** 30 | 31 | 视频地址： [「CSS 案例」太极八卦图](https://www.bilibili.com/video/av84140553/ ) 32 | 33 | 7. **[CSS制作MG动画：闪光眼镜三连效果](https://github.com/Fengzhen8023/css-demo/tree/glass)** 34 | 35 | 视频地址： [「CSS 案例」太极八卦图](https://www.bilibili.com/video/av86280370/ ) 36 | 37 | 8. **[CSS制作MG动画：B站LOGO](https://github.com/Fengzhen8023/css-demo/tree/B-logo)** 38 | 39 | 视频地址： [「CSS 案例」B站LOGO](https://www.bilibili.com/video/av91164042/ ) 40 | 41 | 9. **[CSS制作MG动画：动态方块加载框](https://github.com/Fengzhen8023/css-demo/tree/loading-diamond)** 42 | 43 | 视频地址： [「CSS 案例」B站LOGO](https://www.bilibili.com/video/av93716609/ ) 44 | 45 | 10. **[CSS案例： 焰灵姬动态音乐播放UI](https://github.com/Fengzhen8023/css-demo/tree/yan_ling_ji_music)** 46 | 47 | 视频地址： [「CSS 案例」焰灵姬动态音乐播放UI](https://www.bilibili.com/video/BV15D4y1X79h/ ) 48 | 49 | -------------------------------------------------------------------------------- /ball-loading/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | } 10 | 11 | .dot-spinner { 12 | --uib-size: 2.8rem; 13 | --uib-speed: .9s; 14 | --uib-color: #183153; 15 | position: relative; 16 | display: flex; 17 | align-items: center; 18 | justify-content: flex-start; 19 | height: var(--uib-size); 20 | width: var(--uib-size); 21 | } 22 | 23 | .dot-spinner__dot { 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | display: flex; 28 | align-items: center; 29 | justify-content: flex-start; 30 | height: 100%; 31 | width: 100%; 32 | } 33 | 34 | .dot-spinner__dot::before { 35 | content: ''; 36 | height: 20%; 37 | width: 20%; 38 | border-radius: 50%; 39 | background-color: var(--uib-color); 40 | transform: scale(0); 41 | opacity: 0.5; 42 | box-shadow: 0 0 20px rgba(18, 31, 53, 0.3); 43 | } 44 | 45 | @keyframes pulse0112 { 46 | 47 | 0%, 48 | 100% { 49 | transform: scale(0); 50 | opacity: 0.5; 51 | } 52 | 53 | 50% { 54 | transform: scale(1); 55 | opacity: 1; 56 | } 57 | } 58 | 59 | .dot-spinner__dot::before { 60 | animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite; 61 | } 62 | 63 | .dot-spinner__dot:nth-child(2) { 64 | transform: rotate(45deg); 65 | } 66 | 67 | .dot-spinner__dot:nth-child(2)::before { 68 | animation-delay: calc(var(--uib-speed) * -0.875); 69 | } 70 | 71 | .dot-spinner__dot:nth-child(3) { 72 | transform: rotate(90deg); 73 | } 74 | 75 | .dot-spinner__dot:nth-child(3)::before { 76 | animation-delay: calc(var(--uib-speed) * -0.75); 77 | } 78 | 79 | .dot-spinner__dot:nth-child(4) { 80 | transform: rotate(135deg); 81 | } 82 | 83 | .dot-spinner__dot:nth-child(4)::before { 84 | animation-delay: calc(var(--uib-speed) * -0.625); 85 | } 86 | 87 | .dot-spinner__dot:nth-child(5) { 88 | transform: rotate(180deg); 89 | } 90 | 91 | .dot-spinner__dot:nth-child(5)::before { 92 | animation-delay: calc(var(--uib-speed) * -0.5); 93 | } 94 | 95 | .dot-spinner__dot:nth-child(6) { 96 | transform: rotate(225deg); 97 | } 98 | 99 | .dot-spinner__dot:nth-child(6)::before { 100 | animation-delay: calc(var(--uib-speed) * -0.375); 101 | } 102 | 103 | .dot-spinner__dot:nth-child(7) { 104 | transform: rotate(270deg); 105 | } 106 | 107 | .dot-spinner__dot:nth-child(7)::before { 108 | animation-delay: calc(var(--uib-speed) * -0.25); 109 | } 110 | 111 | .dot-spinner__dot:nth-child(8) { 112 | transform: rotate(315deg); 113 | } 114 | 115 | .dot-spinner__dot:nth-child(8)::before { 116 | animation-delay: calc(var(--uib-speed) * -0.125); 117 | } -------------------------------------------------------------------------------- /ball-loading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /check-list/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #e8e8e8; 3 | margin: 0; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | height: 100vh; 8 | } 9 | 10 | #checklist { 11 | --background: #fff; 12 | --text: #414856; 13 | --check: #4f29f0; 14 | --disabled: #c3c8de; 15 | --width: 100px; 16 | --height: 180px; 17 | --border-radius: 10px; 18 | background: var(--background); 19 | width: var(--width); 20 | height: var(--height); 21 | border-radius: var(--border-radius); 22 | position: relative; 23 | box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); 24 | padding: 30px 85px; 25 | display: grid; 26 | grid-template-columns: 30px auto; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | #checklist label { 32 | color: var(--text); 33 | position: relative; 34 | cursor: pointer; 35 | display: grid; 36 | align-items: center; 37 | width: fit-content; 38 | transition: color 0.3s ease; 39 | margin-right: 20px; 40 | } 41 | 42 | #checklist label::before, 43 | #checklist label::after { 44 | content: ""; 45 | position: absolute; 46 | } 47 | 48 | #checklist label::before { 49 | height: 2px; 50 | width: 8px; 51 | left: -27px; 52 | background: var(--check); 53 | border-radius: 2px; 54 | transition: background 0.3s ease; 55 | } 56 | 57 | #checklist label:after { 58 | height: 4px; 59 | width: 4px; 60 | top: 8px; 61 | left: -25px; 62 | border-radius: 50%; 63 | } 64 | 65 | #checklist input[type="checkbox"] { 66 | -webkit-appearance: none; 67 | -moz-appearance: none; 68 | position: relative; 69 | height: 15px; 70 | width: 15px; 71 | outline: none; 72 | border: 0; 73 | margin: 0 15px 0 0; 74 | cursor: pointer; 75 | background: var(--background); 76 | display: grid; 77 | align-items: center; 78 | margin-right: 20px; 79 | } 80 | 81 | #checklist input[type="checkbox"]::before, 82 | #checklist input[type="checkbox"]::after { 83 | content: ""; 84 | position: absolute; 85 | height: 2px; 86 | top: auto; 87 | background: var(--check); 88 | border-radius: 2px; 89 | } 90 | 91 | #checklist input[type="checkbox"]::before { 92 | width: 0px; 93 | right: 60%; 94 | transform-origin: right bottom; 95 | } 96 | 97 | #checklist input[type="checkbox"]::after { 98 | width: 0px; 99 | left: 40%; 100 | transform-origin: left bottom; 101 | } 102 | 103 | @keyframes check-01 { 104 | 0% { 105 | width: 4px; 106 | top: auto; 107 | transform: rotate(0); 108 | } 109 | 110 | 50% { 111 | width: 0px; 112 | top: auto; 113 | transform: rotate(0); 114 | } 115 | 116 | 51% { 117 | width: 0px; 118 | top: 8px; 119 | transform: rotate(45deg); 120 | } 121 | 122 | 100% { 123 | width: 5px; 124 | top: 8px; 125 | transform: rotate(45deg); 126 | } 127 | } 128 | 129 | #checklist input[type="checkbox"]:checked::before { 130 | animation: check-01 0.4s ease forwards; 131 | } 132 | 133 | @keyframes check-02 { 134 | 0% { 135 | width: 4px; 136 | top: auto; 137 | transform: rotate(0); 138 | } 139 | 140 | 50% { 141 | width: 0px; 142 | top: auto; 143 | transform: rotate(0); 144 | } 145 | 146 | 51% { 147 | width: 0px; 148 | top: 8px; 149 | transform: rotate(-45deg); 150 | } 151 | 152 | 100% { 153 | width: 10px; 154 | top: 8px; 155 | transform: rotate(-45deg); 156 | } 157 | } 158 | 159 | #checklist input[type="checkbox"]:checked::after { 160 | animation: check-02 0.4s ease forwards; 161 | } 162 | 163 | @keyframes move { 164 | 50% { 165 | padding-left: 8px; 166 | padding-right: 0px; 167 | } 168 | 169 | 100% { 170 | padding-right: 4px; 171 | } 172 | } 173 | 174 | #checklist input[type="checkbox"]:checked+label { 175 | color: var(--disabled); 176 | animation: move 0.3s ease 0.1s forwards; 177 | } 178 | 179 | @keyframes slice { 180 | 60% { 181 | width: 100%; 182 | left: 4px; 183 | } 184 | 185 | 100% { 186 | width: 100%; 187 | left: -2px; 188 | padding-left: 0; 189 | } 190 | } 191 | 192 | #checklist input[type="checkbox"]:checked+label::before { 193 | background: var(--disabled); 194 | animation: slice 0.4s ease forwards; 195 | } 196 | 197 | @keyframes firework { 198 | 0% { 199 | opacity: 1; 200 | box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 201 | 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 202 | 0 0 0 -2px #4f29f0,0 0 0 -2px #4f29f0; 203 | } 204 | 205 | 30% { 206 | opacity: 1; 207 | } 208 | 209 | 100% { 210 | opacity: 0; 211 | box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 212 | 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, 213 | -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0; 214 | } 215 | } 216 | 217 | #checklist input[type="checkbox"]:checked+label::after { 218 | animation: firework 0.5s ease forwards 0.1s; 219 | } -------------------------------------------------------------------------------- /check-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /childhood-game/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | .container { 4 | margin: 0; 5 | padding: 0; 6 | height: 100% 7 | } 8 | 9 | body { 10 | background: #EEF2FE; 11 | } 12 | 13 | .container { 14 | display: grid; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | 19 | .kawaii-gameboy { 20 | display: grid; 21 | align-items: center; 22 | justify-content: center; 23 | height: 322px; 24 | width: 218px; 25 | background: #F4646E; 26 | border-radius: 16px; 27 | box-shadow: 28 | -26px 0 0 #82174D, 29 | -42px 16px 0 #86ACFF; 30 | transform: scale(1.5); 31 | } 32 | 33 | .screen-gameboy { 34 | display: flex; 35 | align-items: center; 36 | justify-content: center; 37 | height: 142px; 38 | width: 178px; 39 | background: #82174D; 40 | border-radius: 6px; 41 | } 42 | 43 | .dot { 44 | display: block; 45 | height: 10px; 46 | width: 10px; 47 | background: #FDA2B4; 48 | transform: translate(-14px, -23px); 49 | border-radius: 50%; 50 | } 51 | 52 | .screen { 53 | display: grid; 54 | align-items: center; 55 | justify-content: center; 56 | height: 106px; 57 | width: 120px; 58 | background: #EEF2FE; 59 | transform: translate(-5px); 60 | } 61 | 62 | .face-container { 63 | display: grid; 64 | align-items: center; 65 | justify-content: center; 66 | height: 50px; 67 | width: 90px; 68 | } 69 | 70 | .eyes-container { 71 | display: grid; 72 | justify-self: center; 73 | height: 28px; 74 | width: 81px; 75 | } 76 | 77 | .left-eye { 78 | display: grid; 79 | align-items: center; 80 | justify-content: center; 81 | height: 28px; 82 | width: 28px; 83 | background: #FDA2B1; 84 | border-radius: 50%; 85 | box-shadow: 53px 0 #FDA2B1; 86 | } 87 | 88 | .left-eye:before { 89 | content: ""; 90 | display: block; 91 | height: 20px; 92 | width: 20px; 93 | background: #801649; 94 | border-radius: 50%; 95 | box-shadow: 53px 0 #801649; 96 | transform: translate(0px, 3px); 97 | } 98 | 99 | .left-eye:after { 100 | content: ""; 101 | display: block; 102 | height: 5px; 103 | width: 5px; 104 | border-radius: 50%; 105 | background: #fff; 106 | transform: translate(12px, -8px); 107 | box-shadow: 108 | -7px -6px 0px 1px white, 109 | 52px 0px 0px white, 110 | 46px -6px 0px 1px white; 111 | } 112 | 113 | .mouth { 114 | display: grid; 115 | justify-self: center; 116 | height: 17px; 117 | width: 34px; 118 | background: #791949; 119 | border-radius: 0 0 16px 16px; 120 | transform: translate(0px, 5px); 121 | } 122 | 123 | .cheeks-container { 124 | display: grid; 125 | height: 10px; 126 | width: 90px; 127 | transform: translate(0px, -11px); 128 | } 129 | 130 | .cheek { 131 | display: grid; 132 | height: 10px; 133 | width: 22px; 134 | background: #87ADFF; 135 | border-radius: 100% 100%; 136 | box-shadow: 68px 0 #87ADFF; 137 | } 138 | 139 | .control-button-container { 140 | display: flex; 141 | justify-self: center; 142 | height: 60px; 143 | width: 172px; 144 | } 145 | 146 | .pad-container { 147 | display: grid; 148 | align-items: center; 149 | justify-content: center; 150 | height: 60px; 151 | width: 60px; 152 | background: #FFA5B1; 153 | border-radius: 50%; 154 | } 155 | 156 | .pad { 157 | display: block; 158 | height: 48px; 159 | width: 14px; 160 | background: #82174D; 161 | border-radius: 4px; 162 | } 163 | 164 | .pad:before { 165 | content: ""; 166 | display: block; 167 | height: 14px; 168 | width: 48px; 169 | background: #82174D; 170 | border-radius: 4px; 171 | transform: translate(-17px, 17px); 172 | } 173 | 174 | .action-button-container { 175 | display: grid; 176 | align-items: center; 177 | height: 34px; 178 | width: 70px; 179 | background: #FFA5B1; 180 | border-radius: 17px; 181 | transform: rotate(-28deg) translate(32px, 33px); 182 | } 183 | 184 | .action-button { 185 | display: block; 186 | height: 24px; 187 | width: 24px; 188 | background: #82174D; 189 | border-radius: 50%; 190 | transform: translate(6px); 191 | box-shadow: 34px 0px #82174D; 192 | } 193 | 194 | .option-button-container { 195 | display: flex; 196 | justify-self: center; 197 | height: 10px; 198 | width: 64px; 199 | } 200 | 201 | .button { 202 | display: block; 203 | height: 10px; 204 | width: 28px; 205 | background: #82174B; 206 | border-radius: 5px; 207 | box-shadow: 36px 0px #82174B 208 | } -------------------------------------------------------------------------------- /childhood-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 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 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /data-night-switch/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | margin: 0; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | 9 | .switch { 10 | font-size: 17px; 11 | position: relative; 12 | display: inline-block; 13 | width: 64px; 14 | height: 34px; 15 | } 16 | 17 | .switch input { 18 | opacity: 0; 19 | width: 0; 20 | height: 0; 21 | } 22 | 23 | .slider { 24 | position: absolute; 25 | cursor: pointer; 26 | top: 0; 27 | left: 0; 28 | right: 0; 29 | bottom: 0; 30 | background-color: #73C0FC; 31 | transition: .4s; 32 | border-radius: 30px; 33 | } 34 | 35 | .slider:before { 36 | position: absolute; 37 | content: ""; 38 | height: 30px; 39 | width: 30px; 40 | border-radius: 20px; 41 | left: 2px; 42 | bottom: 2px; 43 | z-index: 2; 44 | background-color: #e8e8e8; 45 | transition: .4s; 46 | } 47 | 48 | .sun svg { 49 | position: absolute; 50 | top: 6px; 51 | left: 36px; 52 | z-index: 1; 53 | width: 24px; 54 | height: 24px; 55 | } 56 | 57 | .moon svg { 58 | fill: #73C0FC; 59 | position: absolute; 60 | top: 5px; 61 | left: 5px; 62 | z-index: 1; 63 | width: 24px; 64 | height: 24px; 65 | } 66 | 67 | @keyframes rotate { 68 | 69 | 0% { 70 | transform: rotate(0); 71 | } 72 | 73 | 100% { 74 | transform: rotate(360deg); 75 | } 76 | } 77 | 78 | .sun svg { 79 | animation: rotate 15s linear infinite; 80 | } 81 | 82 | @keyframes tilt { 83 | 84 | 0% { 85 | transform: rotate(0deg); 86 | } 87 | 88 | 25% { 89 | transform: rotate(-10deg); 90 | } 91 | 92 | 75% { 93 | transform: rotate(10deg); 94 | } 95 | 96 | 100% { 97 | transform: rotate(0deg); 98 | } 99 | } 100 | 101 | .moon svg { 102 | animation: tilt 5s linear infinite; 103 | } 104 | 105 | .input:checked + .slider { 106 | background-color: #183153; 107 | } 108 | 109 | .input:focus + .slider { 110 | box-shadow: 0 0 1px #183153; 111 | } 112 | 113 | .input:checked + .slider:before { 114 | transform: translateX(30px); 115 | } 116 | -------------------------------------------------------------------------------- /data-night-switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /login-page/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | height: 100%; 7 | } 8 | 9 | body { 10 | background-color: #354152; 11 | color: #7e8ba3; 12 | font: 300 1rem/1.5 Helvetica Neue, sans-serif; 13 | margin: 0; 14 | min-height: 100%; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | } 19 | 20 | .grid { 21 | margin: 0 auto; 22 | max-width: 25rem; 23 | width: 100%; 24 | } 25 | 26 | .register { 27 | box-shadow: 0 0 250px #000; 28 | text-align: center; 29 | padding: 4rem 2rem; 30 | } 31 | 32 | svg { 33 | height: auto; 34 | max-width: 100%; 35 | vertical-align: middle; 36 | } 37 | 38 | 39 | .site__logo { 40 | margin-bottom: 2rem; 41 | } 42 | 43 | h2 { 44 | font-size: 2.75rem; 45 | font-weight: 100; 46 | margin: 0 0 1rem; 47 | text-transform: uppercase; 48 | } 49 | 50 | .form__field { 51 | margin-bottom: 1rem; 52 | } 53 | 54 | input { 55 | border: 0; 56 | font: inherit; 57 | } 58 | 59 | input::placeholder { 60 | color: #7e8ba3; 61 | } 62 | 63 | .register input { 64 | border: 1px solid #242c37; 65 | border-radius: 999px; 66 | background-color: transparent; 67 | text-align: center; 68 | } 69 | 70 | .register input[type=email], 71 | .register input[type=password] { 72 | background-repeat: no-repeat; 73 | background-size: 1.5rem; 74 | background-position: 1rem 50%; 75 | } 76 | 77 | .register input[type=email] { 78 | color: #fff; 79 | } 80 | 81 | .register input[type=password] { 82 | color: #fff; 83 | } 84 | 85 | .register input[type=submit] { 86 | background-image: linear-gradient(160deg, #8ceabb 0%, #378f7b 100%); 87 | color: #fff; 88 | margin-bottom: 6rem; 89 | width: 100%; 90 | } 91 | 92 | .form input { 93 | outline: 0; 94 | padding: 0.5rem 1rem; 95 | } 96 | 97 | .form input[type=email], 98 | .form input[type=password] { 99 | width: 100%; 100 | } 101 | 102 | a { 103 | color: #7e8ba3; 104 | } 105 | -------------------------------------------------------------------------------- /login-page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 | 22 |

Sign Up

23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 |
31 | 32 | 33 |
34 |

Already have an accout? Log in

35 |
36 |
37 |
38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /one-div-ball-loading/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #212121; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | height: 100vh; 7 | margin: 0; 8 | } 9 | 10 | .loader { 11 | position: relative; 12 | width: 120px; 13 | height: 90px; 14 | margin: 0 auto; 15 | } 16 | 17 | .loader:before { 18 | content: ""; 19 | position: absolute; 20 | bottom: 30px; 21 | left: 50px; 22 | height: 30px; 23 | width: 30px; 24 | border-radius: 50%; 25 | background: #2a9d8f; 26 | } 27 | 28 | .loader:after { 29 | content: ""; 30 | position: absolute; 31 | right: 0; 32 | top: 0; 33 | height: 7px; 34 | width: 45px; 35 | border-radius: 4px; 36 | box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, 37 | -70px 95px 0 #f2f2f2; 38 | } 39 | 40 | 41 | @keyframes loading-bounce { 42 | 0% { 43 | transform: scale(1, 0.7); 44 | } 45 | 46 | 40% { 47 | transform: scale(0.8, 1.2); 48 | } 49 | 50 | 60% { 51 | transform: scale(1, 1); 52 | } 53 | 54 | 100% { 55 | bottom: 140px; 56 | } 57 | } 58 | 59 | .loader:before { 60 | animation: loading-bounce 0.5s ease-in-out infinite alternate; 61 | } 62 | 63 | @keyframes loading-step { 64 | 0% { 65 | box-shadow: 0 10px 0 rgba(0, 0, 0, 0), 66 | 0 10px 0 #f2f2f2, 67 | -35px 50px 0 #f2f2f2, 68 | -70px 90px 0 #f2f2f2; 69 | } 70 | 71 | 100% { 72 | box-shadow: 0 10px 0 #f2f2f2, 73 | -35px 50px 0 #f2f2f2, 74 | -70px 90px 0 #f2f2f2, 75 | -70px 90px 0 rgba(0, 0, 0, 0); 76 | } 77 | } 78 | 79 | .loader:after { 80 | animation: loading-step 1s ease-in-out infinite; 81 | } 82 | -------------------------------------------------------------------------------- /one-div-ball-loading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /pencil-folder/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | } 10 | 11 | .continue-application { 12 | --color: #fff; 13 | --background: #404660; 14 | --background-hover: #3A4059; 15 | --background-left: #2B3044; 16 | --folder: #F3E9CB; 17 | --folder-inner: #BEB393; 18 | --paper: #FFFFFF; 19 | --paper-lines: #BBC1E1; 20 | --paper-behind: #E1E6F9; 21 | --pencil-cap: #fff; 22 | --pencil-top: #275EFE; 23 | --pencil-middle: #fff; 24 | --pencil-bottom: #5C86FF; 25 | --shadow: rgba(13, 15, 25, .2); 26 | border: none; 27 | outline: none; 28 | cursor: pointer; 29 | position: relative; 30 | border-radius: 5px; 31 | font-size: 14px; 32 | font-weight: 500; 33 | line-height: 19px; 34 | -webkit-appearance: none; 35 | -webkit-tap-highlight-color: transparent; 36 | padding: 17px 29px 17px 69px; 37 | transition: background 0.3s; 38 | color: var(--color); 39 | background: var(--bg, var(--background)); 40 | } 41 | 42 | .continue-application>div { 43 | top: 0; 44 | left: 0; 45 | bottom: 0; 46 | width: 53px; 47 | position: absolute; 48 | overflow: hidden; 49 | border-radius: 5px 0 0 5px; 50 | background: var(--background-left); 51 | } 52 | 53 | .continue-application>div .folder { 54 | width: 23px; 55 | height: 27px; 56 | position: absolute; 57 | left: 15px; 58 | top: 13px; 59 | } 60 | 61 | .continue-application>div .folder .top { 62 | left: 0; 63 | top: 0; 64 | z-index: 2; 65 | position: absolute; 66 | transform: translateX(var(--fx, 0)); 67 | transition: transform 0.4s ease var(--fd, 0.3s); 68 | } 69 | 70 | .continue-application>div .folder .top svg { 71 | width: 24px; 72 | height: 27px; 73 | display: block; 74 | fill: var(--folder); 75 | transform-origin: 0 50%; 76 | transition: transform 0.3s ease var(--fds, 0.45s); 77 | transform: perspective(120px) rotateY(var(--fr, 0deg)); 78 | } 79 | 80 | .continue-application>div .folder:before, 81 | .continue-application>div .folder:after, 82 | .continue-application>div .folder .paper { 83 | content: ""; 84 | position: absolute; 85 | left: var(--l, 0); 86 | top: var(--t, 0); 87 | width: var(--w, 100%); 88 | height: var(--h, 100%); 89 | border-radius: 1px; 90 | background: var(--b, var(--folder-inner)); 91 | } 92 | 93 | .continue-application>div .folder:before { 94 | box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 95 | 0 3.5px 7px var(--shadow); 96 | transform: translateX(var(--fx, 0)); 97 | transition: transform 0.4s ease var(--fd, 0.3s); 98 | } 99 | 100 | .continue-application>div .folder:after, 101 | .continue-application>div .folder .paper { 102 | --l: 1px; 103 | --t: 1px; 104 | --w: 21px; 105 | --h: 25px; 106 | --b: var(--paper-behind); 107 | } 108 | 109 | .continue-application>div .folder:after { 110 | transform: translate(var(--pbx, 0), var(--pby, 0)); 111 | transition: transform 0.4s ease var(--pbd, 0s); 112 | } 113 | 114 | .continue-application>div .folder .paper { 115 | z-index: 1; 116 | --b: var(--paper); 117 | } 118 | 119 | .continue-application>div .folder .paper:before, 120 | .continue-application>div .folder .paper:after { 121 | content: ""; 122 | width: var(--wp, 14px); 123 | height: 2px; 124 | border-radius: 1px; 125 | transform: scaleY(0.5); 126 | left: 3px; 127 | top: var(--tp, 3px); 128 | position: absolute; 129 | background: var(--paper-lines); 130 | box-shadow: 0 12px 0 0 var(--paper-lines), 131 | 0 24px 0 0 var(--paper-lines); 132 | } 133 | 134 | .continue-application>div .folder .paper:after { 135 | --tp: 6px; 136 | --wp: 10px; 137 | } 138 | 139 | .continue-application>div .pencil { 140 | height: 2px; 141 | width: 3px; 142 | border-radius: 1px 1px 0 0; 143 | top: 8px; 144 | left: 105%; 145 | position: absolute; 146 | z-index: 3; 147 | transform-origin: 50% 19px; 148 | background: var(--pencil-cap); 149 | transform: translateX(var(--pex, 0)) rotate(35deg); 150 | transition: transform 0.4s ease var(--pbd, 0s); 151 | } 152 | 153 | .continue-application>div .pencil:before, 154 | .continue-application>div .pencil:after { 155 | content: ""; 156 | position: absolute; 157 | display: block; 158 | background: var(--b, linear-gradient(var(--pencil-top) 55%, 159 | var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, 160 | var(--pencil-bottom) 60.1%)); 161 | width: var(--w, 5px); 162 | height: var(--h, 20px); 163 | border-radius: var(--br, 2px 2px 0 0); 164 | top: var(--t, 2px); 165 | left: var(--l, -1px); 166 | } 167 | 168 | .continue-application>div .pencil:before { 169 | -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px); 170 | clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px); 171 | } 172 | 173 | .continue-application>div .pencil:after { 174 | --b: none; 175 | --w: 3px; 176 | --h: 6px; 177 | --br: 0 2px 1px 0; 178 | --t: 3px; 179 | --l: 3px; 180 | border-top: 1px solid var(--pencil-top); 181 | border-right: 1px solid var(--pencil-top); 182 | } 183 | 184 | .continue-application:before, 185 | .continue-application:after { 186 | content: ""; 187 | position: absolute; 188 | width: 10px; 189 | height: 2px; 190 | border-radius: 1px; 191 | background: var(--color); 192 | transform-origin: 9px 1px; 193 | transform: translateX(var(--cx, 0)) scale(0.5) 194 | rotate(var(--r, -45deg)); 195 | top: 26px; 196 | right: 16px; 197 | transition: transform 0.3s; 198 | } 199 | 200 | .continue-application:after { 201 | --r: 45deg; 202 | } 203 | 204 | .continue-application:hover { 205 | --cx: 2px; 206 | --bg: var(--background-hover); 207 | --fx: -40px; 208 | --fr: -60deg; 209 | --fd: .15s; 210 | --fds: 0s; 211 | --pbx: 3px; 212 | --pby: -3px; 213 | --pbd: .15s; 214 | --pex: -24px; 215 | } 216 | -------------------------------------------------------------------------------- /pencil-folder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /profile-card/avatar.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /profile-card/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /profile-card/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | } 10 | 11 | .card-client { 12 | background: #2cb5a0; 13 | width: 13rem; 14 | padding-top: 25px; 15 | padding-bottom: 25px; 16 | padding-left: 20px; 17 | padding-right: 20px; 18 | border: 4px solid #7cdacc; 19 | box-shadow: 0 6px 10px rgba(207, 212, 222, 1); 20 | border-radius: 10px; 21 | text-align: center; 22 | color: #fff; 23 | font-family: "Poppins", sans-serif; 24 | transition: all 0.3s ease; 25 | } 26 | 27 | .card-client:hover { 28 | transform: translateY(-10px); 29 | } 30 | 31 | .user-picture { 32 | overflow: hidden; 33 | object-fit: cover; 34 | width: 5rem; 35 | height: 5rem; 36 | border: 4px solid #7cdacc; 37 | border-radius: 999px; 38 | display: flex; 39 | justify-content: center; 40 | align-items: center; 41 | margin: auto; 42 | } 43 | 44 | .user-picture svg { 45 | width: 2.5rem; 46 | fill: currentColor; 47 | } 48 | 49 | .name-client { 50 | margin: 0; 51 | margin-top: 20px; 52 | font-weight: 600; 53 | font-size: 18px; 54 | } 55 | 56 | .name-client span { 57 | display: block; 58 | font-weight: 200; 59 | font-size: 16px; 60 | } 61 | 62 | .social-media:before { 63 | content: " "; 64 | display: block; 65 | width: 100%; 66 | height: 2px; 67 | margin: 20px 0; 68 | background: #7cdacc; 69 | } 70 | 71 | .social-media a { 72 | position: relative; 73 | margin-right: 15px; 74 | text-decoration: none; 75 | color: inherit; 76 | } 77 | 78 | .social-media a:last-child { 79 | margin-right: 0; 80 | } 81 | 82 | .social-media a svg { 83 | width: 1.1rem; 84 | fill: currentColor; 85 | } 86 | 87 | .tooltip-social { 88 | background: #262626; 89 | display: block; 90 | position: absolute; 91 | bottom: 0; 92 | left: 50%; 93 | padding: 0.5rem 0.4rem; 94 | border-radius: 5px; 95 | font-size: 0.8rem; 96 | font-weight: 600; 97 | opacity: 0; 98 | pointer-events: none; 99 | transform: translate(-50%, -90%); 100 | transition: all 0.2s ease; 101 | z-index: 1; 102 | } 103 | 104 | .tooltip-social:after { 105 | content: " "; 106 | position: absolute; 107 | bottom: 1px; 108 | left: 50%; 109 | border: solid; 110 | border-width: 10px 10px 0 10px; 111 | border-color: transparent; 112 | transform: translate(-50%, 100%); 113 | } 114 | 115 | .social-media a .tooltip-social:after { 116 | border-top-color: #262626; 117 | } 118 | 119 | .social-media a:hover .tooltip-social { 120 | opacity: 1; 121 | transform: translate(-50%, -130%); 122 | } -------------------------------------------------------------------------------- /profile-card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |

Tom Ding 15 | CEO of CSS Demo 16 | 17 |

18 |
19 | 20 | 21 | Twitter 22 | 23 | 24 | 25 | Instagram 26 | 27 | 28 | 29 | Facebook 30 | 31 | 32 | 33 | LinkedIn 34 | 35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /profile-card/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /profile-card/linkedIn.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /profile-card/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /ps5-loading-icon/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | --path: #2f3545; 3 | --dot: #5628ee; 4 | --duration: 3s; 5 | width: 44px; 6 | height: 44px; 7 | position: relative; 8 | } 9 | 10 | .loader:before { 11 | content: ''; 12 | width: 6px; 13 | height: 6px; 14 | border-radius: 50%; 15 | position: absolute; 16 | display: block; 17 | background: var(--dot); 18 | top: 37px; 19 | left: 19px; 20 | transform: translate(-18px, -18px); 21 | } 22 | 23 | .loader svg { 24 | display: block; 25 | width: 100%; 26 | height: 100%; 27 | } 28 | 29 | .loader svg rect, .loader svg polygon, .loader svg circle { 30 | fill: none; 31 | stroke: var(--path); 32 | stroke-width: 10px; 33 | stroke-linejoin: round; 34 | stroke-linecap: round; 35 | } 36 | 37 | .loader svg circle { 38 | stroke-dasharray: 150 50 150 50; 39 | stroke-dashoffset: 75; 40 | } 41 | 42 | .loader.triangle { 43 | width: 48px; 44 | } 45 | 46 | .loader.triangle:before { 47 | left: 21px; 48 | transform: translate(-10px, -18px); 49 | } 50 | 51 | .loader svg polygon { 52 | stroke-dasharray: 145 76 145 76; 53 | stroke-dashoffset: 0; 54 | } 55 | 56 | .loader svg rect { 57 | stroke-dasharray: 192 64 192 64; 58 | stroke-dashoffset: 0; 59 | } 60 | 61 | @keyframes pathCircle { 62 | 25% { 63 | stroke-dashoffset: 125; 64 | } 65 | 66 | 50% { 67 | stroke-dashoffset: 175; 68 | } 69 | 70 | 75% { 71 | stroke-dashoffset: 225; 72 | } 73 | 74 | 100% { 75 | stroke-dashoffset: 275; 76 | } 77 | } 78 | 79 | .loader svg circle { 80 | animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; 81 | } 82 | 83 | @keyframes dotTriangle { 84 | 33% { 85 | transform: translate(0, 0); 86 | } 87 | 88 | 66% { 89 | transform: translate(10px, -18px); 90 | } 91 | 92 | 100% { 93 | transform: translate(-10px, -18px); 94 | } 95 | } 96 | 97 | .loader.triangle:before { 98 | animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; 99 | } 100 | 101 | @keyframes pathTriangle { 102 | 33% { 103 | stroke-dashoffset: 74; 104 | } 105 | 106 | 66% { 107 | stroke-dashoffset: 147; 108 | } 109 | 110 | 100% { 111 | stroke-dashoffset: 221; 112 | } 113 | } 114 | 115 | .loader svg polygon { 116 | animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; 117 | } 118 | 119 | @keyframes pathRect { 120 | 25% { 121 | stroke-dashoffset: 64; 122 | } 123 | 124 | 50% { 125 | stroke-dashoffset: 128; 126 | } 127 | 128 | 75% { 129 | stroke-dashoffset: 192; 130 | } 131 | 132 | 100% { 133 | stroke-dashoffset: 256; 134 | } 135 | } 136 | 137 | .loader svg rect { 138 | animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; 139 | } 140 | 141 | @keyframes dotRect { 142 | 25% { 143 | transform: translate(0, 0); 144 | } 145 | 146 | 50% { 147 | transform: translate(18px, -18px); 148 | } 149 | 150 | 75% { 151 | transform: translate(0, -36px); 152 | } 153 | 154 | 100% { 155 | transform: translate(-18px, -18px); 156 | } 157 | } 158 | 159 | .loader:before { 160 | animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; 161 | } 162 | 163 | .loader { 164 | display: inline-block; 165 | margin: 0 16px; 166 | } -------------------------------------------------------------------------------- /ps5-loading-icon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 |
16 |
17 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /yuanshen-calendar/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #ccc; 3 | display: grid; 4 | font: 87.5%/1.5em 'Lato', sans-serif; 5 | margin: 0; 6 | min-height: 100vh; 7 | place-items: center; 8 | } 9 | 10 | table { 11 | border-collapse: collapse; 12 | border-spacing: 0; 13 | } 14 | 15 | td { 16 | padding: 0; 17 | } 18 | 19 | .calendar-container { 20 | position: relative; 21 | width: 450px; 22 | } 23 | 24 | .calendar-container header { 25 | border-radius: 1em 1em 0 0; 26 | background: url(./1.png); 27 | color: #e66b6b; 28 | background-size: cover; 29 | background-repeat: no-repeat; 30 | background-position: right top; 31 | padding: 3em 2em; 32 | } 33 | 34 | .day { 35 | font-size: 8em; 36 | font-weight: 900; 37 | line-height: 1em; 38 | } 39 | 40 | .month { 41 | font-size: 4em; 42 | line-height: 1em; 43 | text-transform: lowercase; 44 | } 45 | 46 | .calendar { 47 | width: 100%; 48 | background: #fff; 49 | border-radius: 0 0 1em 1em; 50 | -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff; 51 | box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff; 52 | color: #555; 53 | display: inline-block; 54 | padding: 2em; 55 | } 56 | 57 | .calendar thead { 58 | color: #e66b6b; 59 | font-weight: 700; 60 | text-transform: uppercase; 61 | } 62 | 63 | .calendar td { 64 | padding: .5em 1em; 65 | text-align: center; 66 | } 67 | 68 | .calendar tbody td:hover { 69 | background: #e66b6b; 70 | color: #fff; 71 | border-radius: 5px; 72 | cursor: pointer; 73 | } 74 | 75 | .current-day { 76 | color: #e66b6b; 77 | } 78 | 79 | .prev-month, 80 | .next-month { 81 | color: #cacaca; 82 | } 83 | 84 | .ring-left, 85 | .ring-right { 86 | position: absolute; 87 | top: 230px; 88 | } 89 | 90 | .ring-left { 91 | left: 2em; 92 | } 93 | 94 | .ring-right { 95 | right: 2em; 96 | } 97 | 98 | .ring-left:before, 99 | .ring-left:after, 100 | .ring-right:before, 101 | .ring-right:after { 102 | background: #fff; 103 | border-radius: 4px; 104 | -webkit-box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2); 105 | box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2); 106 | content: ""; 107 | display: inline-block; 108 | margin: 8px; 109 | height: 32px; 110 | width: 8px; 111 | } -------------------------------------------------------------------------------- /yuanshen-calendar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
18
15 |
August
16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
MonTueWedThuFriSatSun
2930311234
567891011
12131415161718
19202122232425
2627282930311
79 | 80 |
81 |
82 |
83 |
84 | 85 | 86 | --------------------------------------------------------------------------------