├── .gitignore ├── compress-img ├── img │ └── pig.png ├── src │ ├── pig.png │ └── index.js └── package.json ├── reduce-skill.js ├── promise.js ├── icss ├── index.html ├── reset.css ├── index.css.map ├── index.scss └── index.css └── browser-type.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist 3 | node_modules 4 | package-lock.json 5 | yarn.lock -------------------------------------------------------------------------------- /compress-img/img/pig.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JowayYoung/juejin-code/HEAD/compress-img/img/pig.png -------------------------------------------------------------------------------- /compress-img/src/pig.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JowayYoung/juejin-code/HEAD/compress-img/src/pig.png -------------------------------------------------------------------------------- /compress-img/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "compress-img", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "start": "node src/index.js" 7 | }, 8 | "dependencies": { 9 | "chalk": "4.1.0", 10 | "figures": "3.2.0", 11 | "ora": "4.0.5", 12 | "trample": "0.2.3" 13 | } 14 | } -------------------------------------------------------------------------------- /reduce-skill.js: -------------------------------------------------------------------------------- 1 | // 获取近半年的月份 2 | function HalfYear(date = null) { 3 | return [...new Array((date ? new Date(date) : new Date()).getMonth() + 1).keys()].reduceRight((t, v, i, a) => { 4 | if (a.length >= 6 && t.length < 6) { 5 | t.unshift(v + 1); 6 | } else if (a.length < 6) { 7 | t.unshift(v + 1); 8 | if (i === 0 && t.length < 6) { 9 | const n = 6 - t.length; 10 | for (let j = 1; j <= n; j++) t.unshift(13 - j); 11 | } 12 | } 13 | return t; 14 | }, []).map(v => v + "月"); 15 | } -------------------------------------------------------------------------------- /promise.js: -------------------------------------------------------------------------------- 1 | function RecursionPromise(nextPromise, x, resolve, reject) { 2 | if (nextPromise === x) return false; 3 | let flag; 4 | if (x !== null && (typeof x === "object" || typeof x === "function")) { 5 | try { 6 | let then = x.then; 7 | if (typeof then === "function") { 8 | then.call(x, y => { 9 | if (flag) return false; 10 | flag = true; 11 | // 这里说明Promise对象resolve之后的结果仍然是Promise，那么继续递归解析 12 | RecursionPromise(nextPromise, y, resolve, reject); 13 | }, error => { 14 | if (flag) return false; 15 | flag = true; 16 | reject(error); 17 | }); 18 | } else { 19 | resolve(x); 20 | } 21 | } catch (e) { 22 | if (flag) return false; 23 | flag = true; 24 | reject(e); 25 | } 26 | } else { 27 | resolve(x); 28 | } 29 | } 30 | 31 | class MyPromise { 32 | constructor(implement) { 33 | this.status = "pending"; 34 | this.res = null; 35 | this.error = null; 36 | this.resolveCallbacks = []; // 成功时回调的处理函数 37 | this.rejectCallbacks = []; // 失败时回调的处理函数 38 | const resolve = res => { 39 | if (this.status === "pending") { 40 | this.status = "fulfilled"; 41 | this.res = res; 42 | this.resolveCallbacks.forEach(fn => fn()); // 循环执行成功处理函数 43 | } 44 | }; 45 | const reject = error => { 46 | if (this.status === "pending") { 47 | this.status = "rejected"; 48 | this.error = error; 49 | this.rejectCallbacks.forEach(fn => fn()); // 循环执行失败处理函数 50 | } 51 | }; 52 | try { 53 | implement(resolve, reject); 54 | } catch (err) { 55 | reject(err); 56 | } 57 | } 58 | then(onFulfilled, onRejected) { 59 | // 如果onRejected不是函数，就直接抛出错误 60 | onFulfilled = typeof onFulfilled === "function" ? onFulfilled : res => res; 61 | onRejected = typeof onRejected === "function" ? onRejected : err => { throw err; }; 62 | const nextPromise = new MyPromise((resolve, reject) => { 63 | if (this.status === "fulfilled") { 64 | // 解决异步问题 65 | setTimeout(() => { 66 | const x = onFulfilled(this.res); 67 | RecursionPromise(nextPromise, x, resolve, reject); 68 | }, 0); 69 | } 70 | if (this.status === "rejected") { 71 | setTimeout(() => { 72 | const x = onRejected(this.error); 73 | RecursionPromise(nextPromise, x, resolve, reject); 74 | }, 0); 75 | } 76 | if (this.status === "pending") { 77 | this.resolveCallbacks.push(() => { 78 | setTimeout(() => { 79 | const x = onFulfilled(this.res); 80 | RecursionPromise(nextPromise, x, resolve, reject); 81 | }, 0); 82 | }); 83 | this.rejectCallbacks.push(() => { 84 | setTimeout(() => { 85 | const x = onRejected(this.error); 86 | RecursionPromise(nextPromise, x, resolve, reject); 87 | }, 0); 88 | }); 89 | } 90 | }); 91 | return nextPromise; 92 | } 93 | } 94 | 95 | export default MyPromise; -------------------------------------------------------------------------------- /compress-img/src/index.js: -------------------------------------------------------------------------------- 1 | const Fs = require("fs"); 2 | const Https = require("https"); 3 | const Path = require("path"); 4 | const Url = require("url"); 5 | const Chalk = require("chalk"); 6 | const Figures = require("figures"); 7 | const Ora = require("ora"); 8 | const { ByteSize, RandomNum, RoundNum } = require("trample/node"); 9 | 10 | const TINYIMG_URL = [ 11 | "tinyjpg.com", 12 | "tinypng.com" 13 | ]; 14 | 15 | function RandomHeader() { 16 | const ip = new Array(4).fill(0).map(() => parseInt(Math.random() * 255)).join("."); 17 | const index = RandomNum(0, 1); 18 | return { 19 | headers: { 20 | "Cache-Control": "no-cache", 21 | "Content-Type": "application/x-www-form-urlencoded", 22 | "Postman-Token": Date.now(), 23 | "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36", 24 | "X-Forwarded-For": ip 25 | }, 26 | hostname: TINYIMG_URL[index], 27 | method: "POST", 28 | path: "/web/shrink", 29 | rejectUnauthorized: false 30 | }; 31 | } 32 | 33 | function UploadImg(file) { 34 | const opts = RandomHeader(); 35 | return new Promise((resolve, reject) => { 36 | const req = Https.request(opts, res => res.on("data", data => { 37 | const obj = JSON.parse(data.toString()); 38 | obj.error ? reject(obj.message) : resolve(obj); 39 | })); 40 | req.write(file, "binary"); 41 | req.on("error", e => reject(e)); 42 | req.end(); 43 | }); 44 | } 45 | 46 | function DownloadImg(url) { 47 | const opts = new Url.URL(url); 48 | return new Promise((resolve, reject) => { 49 | const req = Https.request(opts, res => { 50 | let file = ""; 51 | res.setEncoding("binary"); 52 | res.on("data", chunk => file += chunk); 53 | res.on("end", () => resolve(file)); 54 | }); 55 | req.on("error", e => reject(e)); 56 | req.end(); 57 | }); 58 | } 59 | 60 | async function CompressImg(path) { 61 | try { 62 | const file = Fs.readFileSync(path, "binary"); 63 | const obj = await UploadImg(file); 64 | const data = await DownloadImg(obj.output.url); 65 | const oldSize = Chalk.redBright(ByteSize(obj.input.size)); 66 | const newSize = Chalk.greenBright(ByteSize(obj.output.size)); 67 | const ratio = Chalk.blueBright(RoundNum(1 - obj.output.ratio, 2, true)); 68 | const dpath = Path.join("img", Path.basename(path)); 69 | const msg = `${Figures.tick} Compressed [${Chalk.yellowBright(path)}] completed: Old Size ${oldSize}, New Size ${newSize}, Optimization Ratio ${ratio}`; 70 | Fs.writeFileSync(dpath, data, "binary"); 71 | return Promise.resolve(msg); 72 | } catch (err) { 73 | const msg = `${Figures.cross} Compressed [${Chalk.yellowBright(path)}] failed: ${Chalk.redBright(err)}`; 74 | return Promise.resolve(msg); 75 | } 76 | } 77 | 78 | (async() => { 79 | const spinner = Ora("Image is compressing......").start(); 80 | const res = await CompressImg("src/pig.png"); 81 | spinner.stop(); 82 | console.log(res); 83 | })(); -------------------------------------------------------------------------------- /icss/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hello CSS 8 | 9 | 10 | 11 | 12 | 13 | 18 | 22 | 27 | 32 | 39 | 44 | 50 | 53 | 63 | 71 | 72 | 73 | 74 | 75 | 76 | 84 |
85 |
86 |
87 |
88 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /icss/reset.css: -------------------------------------------------------------------------------- 1 | /* 初始化 */ 2 | a, 3 | abbr, 4 | acronym, 5 | address, 6 | applet, 7 | area, 8 | article, 9 | aside, 10 | audio, 11 | b, 12 | base, 13 | basefont, 14 | bdi, 15 | bdo, 16 | big, 17 | blockquote, 18 | body, 19 | br, 20 | button, 21 | canvas, 22 | caption, 23 | center, 24 | cite, 25 | code, 26 | col, 27 | colgroup, 28 | datalist, 29 | dd, 30 | del, 31 | details, 32 | dir, 33 | div, 34 | dfn, 35 | dialog, 36 | dl, 37 | dt, 38 | em, 39 | embed, 40 | fieldset, 41 | figcaption, 42 | figure, 43 | font, 44 | footer, 45 | form, 46 | frame, 47 | frameset, 48 | h1, 49 | h2, 50 | h3, 51 | h4, 52 | h5, 53 | h6, 54 | head, 55 | header, 56 | hr, 57 | html, 58 | i, 59 | iframe, 60 | img, 61 | input, 62 | ins, 63 | isindex, 64 | kbd, 65 | keygen, 66 | label, 67 | legend, 68 | li, 69 | link, 70 | map, 71 | mark, 72 | menu, 73 | menuitem, 74 | meta, 75 | meter, 76 | nav, 77 | noscript, 78 | object, 79 | ol, 80 | optgroup, 81 | option, 82 | output, 83 | p, 84 | param, 85 | pre, 86 | progress, 87 | q, 88 | rp, 89 | rt, 90 | ruby, 91 | s, 92 | samp, 93 | script, 94 | section, 95 | select, 96 | small, 97 | source, 98 | span, 99 | strike, 100 | strong, 101 | style, 102 | sub, 103 | summary, 104 | sup, 105 | table, 106 | tbody, 107 | td, 108 | textarea, 109 | tfoot, 110 | th, 111 | thead, 112 | time, 113 | title, 114 | tr, 115 | track, 116 | tt, 117 | u, 118 | ul, 119 | var, 120 | video, 121 | wbr, 122 | xmp { 123 | box-sizing: border-box; 124 | margin: 0; 125 | padding: 0; 126 | } 127 | *::before, 128 | *::after { 129 | box-sizing: border-box; 130 | margin: 0; 131 | padding: 0; 132 | } 133 | body { 134 | font: 14px/1 "PingFang SC", "Microsoft YaHei", sans-serif; 135 | -webkit-font-smoothing: antialiased; 136 | -moz-osx-font-smoothing: grayscale; 137 | } 138 | img { 139 | display: block; 140 | border: none; 141 | } 142 | dl, 143 | li, 144 | menu, 145 | ol, 146 | ul { 147 | list-style: none; 148 | } 149 | button, 150 | input, 151 | select, 152 | textarea { 153 | outline: none; 154 | } 155 | a, 156 | a:link, 157 | a:visited, 158 | a:hover, 159 | a:active { 160 | text-decoration: none; 161 | } 162 | /* 浮动方式 */ 163 | .fl { 164 | float: left; 165 | } 166 | .fr { 167 | float: right; 168 | } 169 | .clear { 170 | overflow: hidden; 171 | clear: both; 172 | height: 0; 173 | font-size: 0; 174 | } 175 | .clearfix::after { 176 | display: block; 177 | visibility: hidden; 178 | clear: both; 179 | height: 0; 180 | font-size: 0; 181 | content: ""; 182 | } 183 | /* 定位方式 */ 184 | .pr { 185 | position: relative; 186 | } 187 | .pa { 188 | position: absolute; 189 | } 190 | .pf { 191 | position: fixed; 192 | } 193 | .center { 194 | margin: 0 auto; 195 | } 196 | /* 对齐方式 */ 197 | .tal { 198 | text-align: left; 199 | } 200 | .tac { 201 | text-align: center; 202 | } 203 | .tar { 204 | text-align: right; 205 | } 206 | .taj { 207 | text-align: justify; 208 | } 209 | /* 居中定位 */ 210 | .abs-ct { 211 | position: absolute; 212 | left: 50%; 213 | top: 50%; 214 | transform: translate(-50%, -50%); 215 | } 216 | .abs-cx { 217 | position: absolute; 218 | left: 50%; 219 | transform: translateX(-50%); 220 | } 221 | .abs-cy { 222 | position: absolute; 223 | top: 50%; 224 | transform: translateY(-50%); 225 | } 226 | /* 弹性布局 */ 227 | .flex-ct-x { 228 | display: flex; 229 | justify-content: center; 230 | align-items: center; 231 | } 232 | .flex-ct-y { 233 | display: flex; 234 | flex-direction: column; 235 | justify-content: center; 236 | align-items: center; 237 | } 238 | .flex-fs { 239 | display: flex; 240 | flex-wrap: wrap; 241 | justify-content: space-between; 242 | align-content: space-between; 243 | } 244 | /* 动画模式 */ 245 | .td-camera { 246 | perspective: 1000; 247 | } 248 | .td-space { 249 | transform-style: preserve-3d; 250 | } 251 | .td-box { 252 | backface-visibility: hidden; 253 | } 254 | .gpu-speed { 255 | transform: translate3d(0, 0, 0); 256 | } 257 | /* 其他 */ 258 | .fullscreen { 259 | left: 0; 260 | right: 0; 261 | top: 0; 262 | bottom: 0; 263 | } 264 | .ellipsis { 265 | overflow: hidden; 266 | text-overflow: ellipsis; 267 | white-space: nowrap; 268 | } 269 | .page-at { 270 | overflow: auto; 271 | width: 100%; 272 | height: 100%; 273 | } 274 | .page-fs { 275 | overflow: hidden; 276 | width: 100%; 277 | height: 100%; 278 | } 279 | .round { 280 | border-radius: 100%; 281 | } -------------------------------------------------------------------------------- /browser-type.js: -------------------------------------------------------------------------------- 1 | export default function BrowserType() { 2 | // 权重：系统 + 系统版本 > 平台 > 内核 + 载体 + 内核版本 + 载体版本 > 外壳 + 外壳版本 3 | const ua = navigator.userAgent.toLowerCase(); 4 | const testUa = regexp => regexp.test(ua); 5 | const testVs = regexp => ua.match(regexp) 6 | .toString() 7 | .replace(/[^0-9|_.]/g, "") 8 | .replace(/_/g, "."); 9 | // 系统 10 | let system = "unknow"; 11 | if (testUa(/windows|win32|win64|wow32|wow64/g)) { 12 | system = "windows"; // windows系统 13 | } else if (testUa(/macintosh|macintel/g)) { 14 | system = "macos"; // macos系统 15 | } else if (testUa(/x11/g)) { 16 | system = "linux"; // linux系统 17 | } else if (testUa(/android|adr/g)) { 18 | system = "android"; // android系统 19 | } else if (testUa(/ios|iphone|ipad|ipod|iwatch/g)) { 20 | system = "ios"; // ios系统 21 | } 22 | // 系统版本 23 | let systemVs = "unknow"; 24 | if (system === "windows") { 25 | if (testUa(/windows nt 5.0|windows 2000/g)) { 26 | systemVs = "2000"; 27 | } else if (testUa(/windows nt 5.1|windows xp/g)) { 28 | systemVs = "xp"; 29 | } else if (testUa(/windows nt 5.2|windows 2003/g)) { 30 | systemVs = "2003"; 31 | } else if (testUa(/windows nt 6.0|windows vista/g)) { 32 | systemVs = "vista"; 33 | } else if (testUa(/windows nt 6.1|windows 7/g)) { 34 | systemVs = "7"; 35 | } else if (testUa(/windows nt 6.2|windows 8/g)) { 36 | systemVs = "8"; 37 | } else if (testUa(/windows nt 6.3|windows 8.1/g)) { 38 | systemVs = "8.1"; 39 | } else if (testUa(/windows nt 10.0|windows 10/g)) { 40 | systemVs = "10"; 41 | } 42 | } else if (system === "macos") { 43 | systemVs = testVs(/os x [\d._]+/g); 44 | } else if (system === "android") { 45 | systemVs = testVs(/android [\d._]+/g); 46 | } else if (system === "ios") { 47 | systemVs = testVs(/os [\d._]+/g); 48 | } 49 | // 平台 50 | let platform = "unknow"; 51 | if (system === "windows" || system === "macos" || system === "linux") { 52 | platform = "desktop"; // 桌面端 53 | } else if (system === "android" || system === "ios" || testUa(/mobile/g)) { 54 | platform = "mobile"; // 移动端 55 | } 56 | // 内核和载体 57 | let engine = "unknow"; 58 | let supporter = "unknow"; 59 | if (testUa(/applewebkit/g)) { 60 | engine = "webkit"; // webkit内核 61 | if (testUa(/edge/g)) { 62 | supporter = "edge"; // edge浏览器 63 | } else if (testUa(/opr/g)) { 64 | supporter = "opera"; // opera浏览器 65 | } else if (testUa(/chrome/g)) { 66 | supporter = "chrome"; // chrome浏览器 67 | } else if (testUa(/safari/g)) { 68 | supporter = "safari"; // safari浏览器 69 | } 70 | } else if (testUa(/gecko/g) && testUa(/firefox/g)) { 71 | engine = "gecko"; // gecko内核 72 | supporter = "firefox"; // firefox浏览器 73 | } else if (testUa(/presto/g)) { 74 | engine = "presto"; // presto内核 75 | supporter = "opera"; // opera浏览器 76 | } else if (testUa(/trident|compatible|msie/g)) { 77 | engine = "trident"; // trident内核 78 | supporter = "iexplore"; // iexplore浏览器 79 | } 80 | // 内核版本 81 | let engineVs = "unknow"; 82 | if (engine === "webkit") { 83 | engineVs = testVs(/applewebkit\/[\d._]+/g); 84 | } else if (engine === "gecko") { 85 | engineVs = testVs(/gecko\/[\d._]+/g); 86 | } else if (engine === "presto") { 87 | engineVs = testVs(/presto\/[\d._]+/g); 88 | } else if (engine === "trident") { 89 | engineVs = testVs(/trident\/[\d._]+/g); 90 | } 91 | // 载体版本 92 | let supporterVs = "unknow"; 93 | if (supporter === "chrome") { 94 | supporterVs = testVs(/chrome\/[\d._]+/g); 95 | } else if (supporter === "safari") { 96 | supporterVs = testVs(/version\/[\d._]+/g); 97 | } else if (supporter === "firefox") { 98 | supporterVs = testVs(/firefox\/[\d._]+/g); 99 | } else if (supporter === "opera") { 100 | supporterVs = testVs(/opr\/[\d._]+/g); 101 | } else if (supporter === "iexplore") { 102 | supporterVs = testVs(/(msie [\d._]+)|(rv:[\d._]+)/g); 103 | } else if (supporter === "edge") { 104 | supporterVs = testVs(/edge\/[\d._]+/g); 105 | } 106 | // 外壳和外壳版本 107 | let shell = "none"; 108 | let shellVs = "unknow"; 109 | if (testUa(/micromessenger/g)) { 110 | shell = "wechat"; // 微信浏览器 111 | shellVs = testVs(/micromessenger\/[\d._]+/g); 112 | } else if (testUa(/qqbrowser/g)) { 113 | shell = "qq"; // QQ浏览器 114 | shellVs = testVs(/qqbrowser\/[\d._]+/g); 115 | } else if (testUa(/ucbrowser/g)) { 116 | shell = "uc"; // UC浏览器 117 | shellVs = testVs(/ucbrowser\/[\d._]+/g); 118 | } else if (testUa(/qihu 360se/g)) { 119 | shell = "360"; // 360浏览器(无版本) 120 | } else if (testUa(/2345explorer/g)) { 121 | shell = "2345"; // 2345浏览器 122 | shellVs = testVs(/2345explorer\/[\d._]+/g); 123 | } else if (testUa(/metasr/g)) { 124 | shell = "sougou"; // 搜狗浏览器(无版本) 125 | } else if (testUa(/lbbrowser/g)) { 126 | shell = "liebao"; // 猎豹浏览器(无版本) 127 | } else if (testUa(/maxthon/g)) { 128 | shell = "maxthon"; // 遨游浏览器 129 | shellVs = testVs(/maxthon\/[\d._]+/g); 130 | } 131 | return Object.assign({ 132 | engine, // webkit gecko presto trident 133 | engineVs, 134 | platform, // desktop mobile 135 | supporter, // chrome safari firefox opera iexplore edge 136 | supporterVs, 137 | system, // windows macos linux android ios 138 | systemVs 139 | }, shell === "none" ? {} : { 140 | shell, // wechat qq uc 360 2345 sougou liebao maxthon 141 | shellVs 142 | }); 143 | } -------------------------------------------------------------------------------- /icss/index.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "index.scss" 6 | ], 7 | "names": [], 8 | "file": "index.css" 9 | } -------------------------------------------------------------------------------- /icss/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | overflow: hidden; 3 | height: 100vh; 4 | } 5 | // 全屏布局 6 | // .fullscreen-layout { 7 | // position: relative; 8 | // width: 400px; 9 | // height: 400px; 10 | // header, 11 | // footer, 12 | // main { 13 | // position: absolute; 14 | // left: 0; 15 | // right: 0; 16 | // } 17 | // header { 18 | // top: 0; 19 | // height: 50px; 20 | // background-color: #f66; 21 | // } 22 | // footer { 23 | // bottom: 0; 24 | // height: 50px; 25 | // background-color: #66f; 26 | // } 27 | // main { 28 | // top: 50px; 29 | // bottom: 50px; 30 | // background-color: #3c9; 31 | // } 32 | // } 33 | .fullscreen-layout { 34 | display: flex; 35 | flex-direction: column; 36 | width: 400px; 37 | height: 400px; 38 | header { 39 | height: 50px; 40 | background-color: #f66; 41 | } 42 | footer { 43 | height: 50px; 44 | background-color: #66f; 45 | } 46 | main { 47 | flex: 1; 48 | background-color: #3c9; 49 | } 50 | } 51 | // 两列布局 52 | // .two-column-layout { 53 | // width: 400px; 54 | // height: 400px; 55 | // .left { 56 | // float: left; 57 | // width: 100px; 58 | // height: 100%; 59 | // background-color: #f66; 60 | // } 61 | // .right { 62 | // margin-left: 100px; 63 | // height: 100%; 64 | // background-color: #66f; 65 | // } 66 | // } 67 | // .two-column-layout { 68 | // width: 400px; 69 | // height: 400px; 70 | // .left { 71 | // float: left; 72 | // width: 100px; 73 | // height: 100%; 74 | // background-color: #f66; 75 | // } 76 | // .right { 77 | // overflow: hidden; 78 | // height: 100%; 79 | // background-color: #66f; 80 | // } 81 | // } 82 | .two-column-layout { 83 | display: flex; 84 | width: 400px; 85 | height: 400px; 86 | .left { 87 | width: 100px; 88 | background-color: #f66; 89 | } 90 | .right { 91 | flex: 1; 92 | background-color: #66f; 93 | } 94 | } 95 | // 三列布局 96 | // .three-column-layout { 97 | // width: 400px; 98 | // height: 400px; 99 | // .left { 100 | // float: left; 101 | // width: 50px; 102 | // height: 100%; 103 | // background-color: #f66; 104 | // } 105 | // .center { 106 | // float: left; 107 | // width: 100px; 108 | // height: 100%; 109 | // background-color: #66f; 110 | // } 111 | // .right { 112 | // overflow: hidden; 113 | // height: 100%; 114 | // background-color: #3c9; 115 | // } 116 | // } 117 | .three-column-layout { 118 | display: flex; 119 | width: 400px; 120 | height: 400px; 121 | .left { 122 | width: 50px; 123 | background-color: #f66; 124 | } 125 | .center { 126 | width: 100px; 127 | background-color: #66f; 128 | } 129 | .right { 130 | flex: 1; 131 | background-color: #3c9; 132 | } 133 | } 134 | // 圣杯布局与双飞翼布局 135 | .grail-layout-x { 136 | padding: 0 100px; 137 | width: 400px; 138 | height: 400px; 139 | .left { 140 | float: left; 141 | margin-left: -100px; 142 | width: 100px; 143 | height: 100%; 144 | background-color: #f66; 145 | } 146 | .right { 147 | float: right; 148 | margin-right: -100px; 149 | width: 100px; 150 | height: 100%; 151 | background-color: #66f; 152 | } 153 | .center { 154 | height: 100%; 155 | background-color: #3c9; 156 | } 157 | } 158 | .grail-layout-y { 159 | width: 400px; 160 | height: 400px; 161 | .left { 162 | float: left; 163 | width: 100px; 164 | height: 100%; 165 | background-color: #f66; 166 | } 167 | .right { 168 | float: right; 169 | width: 100px; 170 | height: 100%; 171 | background-color: #66f; 172 | } 173 | .center { 174 | margin: 0 100px; 175 | height: 100%; 176 | background-color: #3c9; 177 | } 178 | } 179 | .grail-layout { 180 | display: flex; 181 | width: 400px; 182 | height: 400px; 183 | .left { 184 | width: 100px; 185 | background-color: #f66; 186 | } 187 | .center { 188 | flex: 1; 189 | background-color: #3c9; 190 | } 191 | .right { 192 | width: 100px; 193 | background-color: #66f; 194 | } 195 | } 196 | // 均分布局 197 | .one { 198 | background-color: #f66; 199 | } 200 | .two { 201 | background-color: #66f; 202 | } 203 | .three { 204 | background-color: #f90; 205 | } 206 | .four { 207 | background-color: #09f; 208 | } 209 | // .average-layout { 210 | // width: 400px; 211 | // height: 400px; 212 | // div { 213 | // float: left; 214 | // width: 25%; 215 | // height: 100%; 216 | // } 217 | // } 218 | .average-layout { 219 | display: flex; 220 | width: 400px; 221 | height: 400px; 222 | div { 223 | flex: 1; 224 | } 225 | } 226 | // 居中布局 227 | .center-layout { 228 | display: flex; 229 | width: 400px; 230 | height: 400px; 231 | background-color: #f66; 232 | div { 233 | margin: auto; 234 | width: 100px; 235 | height: 100px; 236 | background-color: #66f; 237 | } 238 | } 239 | // 三角形 240 | .triangle { 241 | border: 50px solid transparent; 242 | width: 0; 243 | height: 0; 244 | & + .triangle { 245 | margin-left: 50px; 246 | } 247 | &.left { 248 | border-right-color: #f66; 249 | } 250 | &.right { 251 | border-left-color: #f66; 252 | } 253 | &.top { 254 | border-bottom-color: #f66; 255 | } 256 | &.bottom { 257 | border-top-color: #f66; 258 | } 259 | &.left-top { 260 | border-left-color: #f66; 261 | border-top-color: #f66; 262 | } 263 | &.left-bottom { 264 | border-left-color: #f66; 265 | border-bottom-color: #f66; 266 | } 267 | &.right-top { 268 | border-right-color: #f66; 269 | border-top-color: #f66; 270 | } 271 | &.right-bottom { 272 | border-right-color: #f66; 273 | border-bottom-color: #f66; 274 | } 275 | } 276 | // 条形加载条 277 | .strip-loading { 278 | display: flex; 279 | justify-content: center; 280 | align-items: center; 281 | width: 200px; 282 | height: 200px; 283 | li { 284 | --time: calc((var(--line-index) - 1) * 200ms); 285 | border-radius: 3px; 286 | width: 6px; 287 | height: 30px; 288 | background-color: #f66; 289 | animation: beat 1.5s ease-in-out var(--time) infinite; 290 | & + li { 291 | margin-left: 5px; 292 | } 293 | // &:nth-child(2) { 294 | // animation-delay: 200ms; 295 | // } 296 | // &:nth-child(3) { 297 | // animation-delay: 400ms; 298 | // } 299 | // &:nth-child(4) { 300 | // animation-delay: 600ms; 301 | // } 302 | // &:nth-child(5) { 303 | // animation-delay: 800ms; 304 | // } 305 | // &:nth-child(6) { 306 | // animation-delay: 1s; 307 | // } 308 | } 309 | } 310 | @keyframes beat { 311 | 0%, 312 | 100% { 313 | transform: scaleY(1); 314 | } 315 | 50% { 316 | transform: scaleY(.5); 317 | } 318 | } 319 | // 渐变圆形 320 | .gradient-circular { 321 | position: relative; 322 | margin-bottom: 200px; 323 | width: 4px; 324 | height: 200px; 325 | li { 326 | --Θ: calc(var(--line-index) / var(--line-count) * 1turn); 327 | position: absolute; 328 | left: 0; 329 | top: 0; 330 | width: 100%; 331 | height: 100%; 332 | background-color: #3c9; 333 | filter: hue-rotate(var(--Θ)); 334 | transform-origin: center bottom; 335 | transform: rotate(var(--Θ)); 336 | } 337 | } 338 | // 气泡对话框 339 | .bubble-box { 340 | position: relative; 341 | border-radius: 5px; 342 | width: 200px; 343 | height: 50px; 344 | background-color: #f90; 345 | line-height: 50px; 346 | text-align: center; 347 | font-size: 20px; 348 | color: #fff; 349 | &::after { 350 | position: absolute; 351 | left: 100%; 352 | top: 50%; 353 | margin-top: -5px; 354 | border: 5px solid transparent; 355 | border-left-color: #f90; 356 | content: ""; 357 | } 358 | } 359 | // 带边框气泡对话框 360 | .bubble-empty-box { 361 | position: relative; 362 | border: 2px solid #f90; 363 | border-radius: 5px; 364 | width: 200px; 365 | height: 50px; 366 | line-height: 46px; 367 | text-align: center; 368 | font-size: 20px; 369 | color: #f90; 370 | &::before { 371 | position: absolute; 372 | left: 100%; 373 | top: 50%; 374 | margin: -5px 0 0 2px; 375 | border: 5px solid transparent; 376 | border-left-color: #f90; 377 | content: ""; 378 | } 379 | &::after { 380 | position: absolute; 381 | left: 100%; 382 | top: 50%; 383 | margin-top: -4px; 384 | border: 4px solid transparent; 385 | border-left-color: #fff; 386 | content: ""; 387 | } 388 | } 389 | // 动感心形 390 | .heart-shape { 391 | position: relative; 392 | width: 200px; 393 | height: 200px; 394 | background-color: #f66; 395 | transform: rotate(45deg); 396 | &::before, 397 | &::after { 398 | position: absolute; 399 | left: 0; 400 | top: 0; 401 | border-radius: 100%; 402 | width: 100%; 403 | height: 100%; 404 | background-color: #f66; 405 | content: ""; 406 | } 407 | &::before { 408 | transform: translateX(-50%); 409 | } 410 | &::after { 411 | transform: translateY(-50%); 412 | } 413 | } 414 | // 渐变动感心形 415 | .gradient-heart-shape { 416 | position: relative; 417 | width: 200px; 418 | height: 200px; 419 | background-image: linear-gradient(to bottom, #09f, #f66); 420 | box-shadow: 0 0 20px rgba(#000, .8); 421 | transform: rotate(45deg); 422 | &::before, 423 | &::after { 424 | position: absolute; 425 | left: 0; 426 | top: 0; 427 | border-radius: 100%; 428 | width: 100%; 429 | height: 100%; 430 | content: ""; 431 | } 432 | &::before { 433 | background-image: linear-gradient(to bottom, #09f, #f66); 434 | transform: translateX(-50%); 435 | } 436 | &::after { 437 | background-image: linear-gradient(to bottom, #3c9, #09f 50%, transparent 50%, transparent); 438 | transform: translateY(-50%); 439 | } 440 | } 441 | // 悬浮提示 442 | $color-list: #f66 #66f #f90 #09f #9c3 #3c9; 443 | .hover-tips { 444 | display: flex; 445 | justify-content: space-between; 446 | width: 200px; 447 | li { 448 | position: relative; 449 | padding: 2px; 450 | border: 2px solid transparent; 451 | border-radius: 100%; 452 | width: 24px; 453 | height: 24px; 454 | background-clip: content-box; 455 | cursor: pointer; 456 | transition: all 300ms; 457 | &::before, 458 | &::after { 459 | position: absolute; 460 | left: 50%; 461 | bottom: 100%; 462 | opacity: 0; 463 | transform: translate3d(0, -30px, 0); 464 | transition: all 300ms; 465 | } 466 | &::before { 467 | margin: 0 0 12px -35px; 468 | border-radius: 5px; 469 | width: 70px; 470 | height: 30px; 471 | background-color: rgba(#000, .5); 472 | line-height: 30px; 473 | text-align: center; 474 | color: #fff; 475 | content: attr(data-name); 476 | } 477 | &::after { 478 | margin-left: -6px; 479 | border: 6px solid transparent; 480 | border-top-color: rgba(#000, .5); 481 | width: 0; 482 | height: 0; 483 | content: ""; 484 | } 485 | @each $color in $color-list { 486 | $index: index($color-list, $color); 487 | &:nth-child(#{$index}) { 488 | background-color: $color; 489 | &:hover { 490 | border-color: $color; 491 | } 492 | } 493 | } 494 | &:hover { 495 | &::before, 496 | &::after { 497 | opacity: 1; 498 | transform: translate3d(0, 0, 0); 499 | } 500 | } 501 | } 502 | } 503 | // 状态悬浮球 504 | .state-ball { 505 | overflow: hidden; 506 | position: relative; 507 | padding: 5px; 508 | border: 3px solid #3c9; 509 | border-radius: 100%; 510 | width: 150px; 511 | height: 150px; 512 | background-color: #fff; 513 | &::before, 514 | &::after { 515 | position: absolute; 516 | left: 50%; 517 | bottom: 5px; 518 | z-index: 9; 519 | margin-left: -100px; 520 | width: 200px; 521 | height: 200px; 522 | content: ""; 523 | } 524 | &::before { 525 | margin-bottom: calc(var(--offset) * 1.34px); 526 | border-radius: 45%; 527 | background-color: rgba(#fff, .5); 528 | animation: rotate 10s linear -5s infinite; 529 | } 530 | &::after { 531 | margin-bottom: calc(var(--offset) * 1.34px + 10px); 532 | border-radius: 40%; 533 | background-color: rgba(#fff, .8); 534 | animation: rotate 15s infinite; 535 | } 536 | .wave { 537 | position: relative; 538 | border-radius: 100%; 539 | width: 100%; 540 | height: 100%; 541 | background-image: linear-gradient(to bottom, #af8 13%, #3c9 91%); 542 | } 543 | .progress::after { 544 | display: flex; 545 | position: absolute; 546 | left: 0; 547 | top: 0; 548 | z-index: 99; 549 | justify-content: center; 550 | align-items: center; 551 | width: 100%; 552 | height: 100%; 553 | font-weight: bold; 554 | font-size: 16px; 555 | color: #09f; 556 | content: counter(progress) "%"; 557 | counter-reset: progress var(--offset); 558 | } 559 | } 560 | @keyframes rotate { 561 | to { 562 | transform: rotate(1turn); 563 | } 564 | } 565 | // 标签导航 566 | .active { 567 | background-color: #3c9; 568 | color: #fff; 569 | } 570 | .tab-navbar { 571 | display: flex; 572 | overflow: hidden; 573 | flex-direction: column-reverse; 574 | border-radius: 10px; 575 | width: 300px; 576 | height: 400px; 577 | input { 578 | &:nth-child(1):checked { 579 | & ~ nav label:nth-child(1) { 580 | @extend .active; 581 | } 582 | & ~ main ul { 583 | background-color: #f66; 584 | transform: translate3d(0, 0, 0); 585 | } 586 | } 587 | &:nth-child(2):checked { 588 | & ~ nav label:nth-child(2) { 589 | @extend .active; 590 | } 591 | & ~ main ul { 592 | background-color: #66f; 593 | transform: translate3d(-25%, 0, 0); 594 | } 595 | } 596 | &:nth-child(3):checked { 597 | & ~ nav label:nth-child(3) { 598 | @extend .active; 599 | } 600 | & ~ main ul { 601 | background-color: #f90; 602 | transform: translate3d(-50%, 0, 0); 603 | } 604 | } 605 | &:nth-child(4):checked { 606 | & ~ nav label:nth-child(4) { 607 | @extend .active; 608 | } 609 | & ~ main ul { 610 | background-color: #09f; 611 | transform: translate3d(-75%, 0, 0); 612 | } 613 | } 614 | } 615 | nav { 616 | display: flex; 617 | height: 40px; 618 | background-color: #f0f0f0; 619 | line-height: 40px; 620 | text-align: center; 621 | label { 622 | flex: 1; 623 | cursor: pointer; 624 | transition: all 300ms; 625 | } 626 | } 627 | main { 628 | flex: 1; 629 | ul { 630 | display: flex; 631 | flex-wrap: nowrap; 632 | width: 400%; 633 | height: 100%; 634 | transition: all 300ms; 635 | } 636 | li { 637 | display: flex; 638 | justify-content: center; 639 | align-items: center; 640 | flex: 1; 641 | font-weight: bold; 642 | font-size: 20px; 643 | color: #fff; 644 | } 645 | } 646 | } -------------------------------------------------------------------------------- /icss/index.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | body { 3 | overflow: hidden; 4 | height: 100vh; 5 | } 6 | 7 | .fullscreen-layout { 8 | display: -webkit-box; 9 | display: -ms-flexbox; 10 | display: flex; 11 | -webkit-box-orient: vertical; 12 | -webkit-box-direction: normal; 13 | -ms-flex-direction: column; 14 | flex-direction: column; 15 | width: 400px; 16 | height: 400px; 17 | } 18 | 19 | .fullscreen-layout header { 20 | height: 50px; 21 | background-color: #f66; 22 | } 23 | 24 | .fullscreen-layout footer { 25 | height: 50px; 26 | background-color: #66f; 27 | } 28 | 29 | .fullscreen-layout main { 30 | -webkit-box-flex: 1; 31 | -ms-flex: 1; 32 | flex: 1; 33 | background-color: #3c9; 34 | } 35 | 36 | .two-column-layout { 37 | display: -webkit-box; 38 | display: -ms-flexbox; 39 | display: flex; 40 | width: 400px; 41 | height: 400px; 42 | } 43 | 44 | .two-column-layout .left { 45 | width: 100px; 46 | background-color: #f66; 47 | } 48 | 49 | .two-column-layout .right { 50 | -webkit-box-flex: 1; 51 | -ms-flex: 1; 52 | flex: 1; 53 | background-color: #66f; 54 | } 55 | 56 | .three-column-layout { 57 | display: -webkit-box; 58 | display: -ms-flexbox; 59 | display: flex; 60 | width: 400px; 61 | height: 400px; 62 | } 63 | 64 | .three-column-layout .left { 65 | width: 50px; 66 | background-color: #f66; 67 | } 68 | 69 | .three-column-layout .center { 70 | width: 100px; 71 | background-color: #66f; 72 | } 73 | 74 | .three-column-layout .right { 75 | -webkit-box-flex: 1; 76 | -ms-flex: 1; 77 | flex: 1; 78 | background-color: #3c9; 79 | } 80 | 81 | .grail-layout-x { 82 | padding: 0 100px; 83 | width: 400px; 84 | height: 400px; 85 | } 86 | 87 | .grail-layout-x .left { 88 | float: left; 89 | margin-left: -100px; 90 | width: 100px; 91 | height: 100%; 92 | background-color: #f66; 93 | } 94 | 95 | .grail-layout-x .right { 96 | float: right; 97 | margin-right: -100px; 98 | width: 100px; 99 | height: 100%; 100 | background-color: #66f; 101 | } 102 | 103 | .grail-layout-x .center { 104 | height: 100%; 105 | background-color: #3c9; 106 | } 107 | 108 | .grail-layout-y { 109 | width: 400px; 110 | height: 400px; 111 | } 112 | 113 | .grail-layout-y .left { 114 | float: left; 115 | width: 100px; 116 | height: 100%; 117 | background-color: #f66; 118 | } 119 | 120 | .grail-layout-y .right { 121 | float: right; 122 | width: 100px; 123 | height: 100%; 124 | background-color: #66f; 125 | } 126 | 127 | .grail-layout-y .center { 128 | margin: 0 100px; 129 | height: 100%; 130 | background-color: #3c9; 131 | } 132 | 133 | .grail-layout { 134 | display: -webkit-box; 135 | display: -ms-flexbox; 136 | display: flex; 137 | width: 400px; 138 | height: 400px; 139 | } 140 | 141 | .grail-layout .left { 142 | width: 100px; 143 | background-color: #f66; 144 | } 145 | 146 | .grail-layout .center { 147 | -webkit-box-flex: 1; 148 | -ms-flex: 1; 149 | flex: 1; 150 | background-color: #3c9; 151 | } 152 | 153 | .grail-layout .right { 154 | width: 100px; 155 | background-color: #66f; 156 | } 157 | 158 | .one { 159 | background-color: #f66; 160 | } 161 | 162 | .two { 163 | background-color: #66f; 164 | } 165 | 166 | .three { 167 | background-color: #f90; 168 | } 169 | 170 | .four { 171 | background-color: #09f; 172 | } 173 | 174 | .average-layout { 175 | display: -webkit-box; 176 | display: -ms-flexbox; 177 | display: flex; 178 | width: 400px; 179 | height: 400px; 180 | } 181 | 182 | .average-layout div { 183 | -webkit-box-flex: 1; 184 | -ms-flex: 1; 185 | flex: 1; 186 | } 187 | 188 | .center-layout { 189 | display: -webkit-box; 190 | display: -ms-flexbox; 191 | display: flex; 192 | width: 400px; 193 | height: 400px; 194 | background-color: #f66; 195 | } 196 | 197 | .center-layout div { 198 | margin: auto; 199 | width: 100px; 200 | height: 100px; 201 | background-color: #66f; 202 | } 203 | 204 | .triangle { 205 | border: 50px solid transparent; 206 | width: 0; 207 | height: 0; 208 | } 209 | 210 | .triangle + .triangle { 211 | margin-left: 50px; 212 | } 213 | 214 | .triangle.left { 215 | border-right-color: #f66; 216 | } 217 | 218 | .triangle.right { 219 | border-left-color: #f66; 220 | } 221 | 222 | .triangle.top { 223 | border-bottom-color: #f66; 224 | } 225 | 226 | .triangle.bottom { 227 | border-top-color: #f66; 228 | } 229 | 230 | .triangle.left-top { 231 | border-left-color: #f66; 232 | border-top-color: #f66; 233 | } 234 | 235 | .triangle.left-bottom { 236 | border-left-color: #f66; 237 | border-bottom-color: #f66; 238 | } 239 | 240 | .triangle.right-top { 241 | border-right-color: #f66; 242 | border-top-color: #f66; 243 | } 244 | 245 | .triangle.right-bottom { 246 | border-right-color: #f66; 247 | border-bottom-color: #f66; 248 | } 249 | 250 | .strip-loading { 251 | display: -webkit-box; 252 | display: -ms-flexbox; 253 | display: flex; 254 | -webkit-box-pack: center; 255 | -ms-flex-pack: center; 256 | justify-content: center; 257 | -webkit-box-align: center; 258 | -ms-flex-align: center; 259 | align-items: center; 260 | width: 200px; 261 | height: 200px; 262 | } 263 | 264 | .strip-loading li { 265 | --time: calc((var(--line-index) - 1) * 200ms); 266 | border-radius: 3px; 267 | width: 6px; 268 | height: 30px; 269 | background-color: #f66; 270 | -webkit-animation: beat 1.5s ease-in-out var(--time) infinite; 271 | animation: beat 1.5s ease-in-out var(--time) infinite; 272 | } 273 | 274 | .strip-loading li + li { 275 | margin-left: 5px; 276 | } 277 | 278 | @-webkit-keyframes beat { 279 | 0%, 280 | 100% { 281 | -webkit-transform: scaleY(1); 282 | transform: scaleY(1); 283 | } 284 | 50% { 285 | -webkit-transform: scaleY(0.5); 286 | transform: scaleY(0.5); 287 | } 288 | } 289 | 290 | @keyframes beat { 291 | 0%, 292 | 100% { 293 | -webkit-transform: scaleY(1); 294 | transform: scaleY(1); 295 | } 296 | 50% { 297 | -webkit-transform: scaleY(0.5); 298 | transform: scaleY(0.5); 299 | } 300 | } 301 | 302 | .gradient-circular { 303 | position: relative; 304 | margin-bottom: 200px; 305 | width: 4px; 306 | height: 200px; 307 | } 308 | 309 | .gradient-circular li { 310 | --Θ: calc(var(--line-index) / var(--line-count) * 1turn); 311 | position: absolute; 312 | left: 0; 313 | top: 0; 314 | width: 100%; 315 | height: 100%; 316 | background-color: #3c9; 317 | -webkit-filter: hue-rotate(var(--Θ)); 318 | filter: hue-rotate(var(--Θ)); 319 | -webkit-transform-origin: center bottom; 320 | transform-origin: center bottom; 321 | -webkit-transform: rotate(var(--Θ)); 322 | transform: rotate(var(--Θ)); 323 | } 324 | 325 | .bubble-box { 326 | position: relative; 327 | border-radius: 5px; 328 | width: 200px; 329 | height: 50px; 330 | background-color: #f90; 331 | line-height: 50px; 332 | text-align: center; 333 | font-size: 20px; 334 | color: #fff; 335 | } 336 | 337 | .bubble-box::after { 338 | position: absolute; 339 | left: 100%; 340 | top: 50%; 341 | margin-top: -5px; 342 | border: 5px solid transparent; 343 | border-left-color: #f90; 344 | content: ""; 345 | } 346 | 347 | .bubble-empty-box { 348 | position: relative; 349 | border: 2px solid #f90; 350 | border-radius: 5px; 351 | width: 200px; 352 | height: 50px; 353 | line-height: 46px; 354 | text-align: center; 355 | font-size: 20px; 356 | color: #f90; 357 | } 358 | 359 | .bubble-empty-box::before { 360 | position: absolute; 361 | left: 100%; 362 | top: 50%; 363 | margin: -5px 0 0 2px; 364 | border: 5px solid transparent; 365 | border-left-color: #f90; 366 | content: ""; 367 | } 368 | 369 | .bubble-empty-box::after { 370 | position: absolute; 371 | left: 100%; 372 | top: 50%; 373 | margin-top: -4px; 374 | border: 4px solid transparent; 375 | border-left-color: #fff; 376 | content: ""; 377 | } 378 | 379 | .heart-shape { 380 | position: relative; 381 | width: 200px; 382 | height: 200px; 383 | background-color: #f66; 384 | -webkit-transform: rotate(45deg); 385 | transform: rotate(45deg); 386 | } 387 | 388 | .heart-shape::before, .heart-shape::after { 389 | position: absolute; 390 | left: 0; 391 | top: 0; 392 | border-radius: 100%; 393 | width: 100%; 394 | height: 100%; 395 | background-color: #f66; 396 | content: ""; 397 | } 398 | 399 | .heart-shape::before { 400 | -webkit-transform: translateX(-50%); 401 | transform: translateX(-50%); 402 | } 403 | 404 | .heart-shape::after { 405 | -webkit-transform: translateY(-50%); 406 | transform: translateY(-50%); 407 | } 408 | 409 | .gradient-heart-shape { 410 | position: relative; 411 | width: 200px; 412 | height: 200px; 413 | background-image: -webkit-gradient(linear, left top, left bottom, from(#09f), to(#f66)); 414 | background-image: linear-gradient(to bottom, #09f, #f66); 415 | -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 416 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 417 | -webkit-transform: rotate(45deg); 418 | transform: rotate(45deg); 419 | } 420 | 421 | .gradient-heart-shape::before, .gradient-heart-shape::after { 422 | position: absolute; 423 | left: 0; 424 | top: 0; 425 | border-radius: 100%; 426 | width: 100%; 427 | height: 100%; 428 | content: ""; 429 | } 430 | 431 | .gradient-heart-shape::before { 432 | background-image: -webkit-gradient(linear, left top, left bottom, from(#09f), to(#f66)); 433 | background-image: linear-gradient(to bottom, #09f, #f66); 434 | -webkit-transform: translateX(-50%); 435 | transform: translateX(-50%); 436 | } 437 | 438 | .gradient-heart-shape::after { 439 | background-image: -webkit-gradient(linear, left top, left bottom, from(#3c9), color-stop(50%, #09f), color-stop(50%, transparent), to(transparent)); 440 | background-image: linear-gradient(to bottom, #3c9, #09f 50%, transparent 50%, transparent); 441 | -webkit-transform: translateY(-50%); 442 | transform: translateY(-50%); 443 | } 444 | 445 | .hover-tips { 446 | display: -webkit-box; 447 | display: -ms-flexbox; 448 | display: flex; 449 | -webkit-box-pack: justify; 450 | -ms-flex-pack: justify; 451 | justify-content: space-between; 452 | width: 200px; 453 | } 454 | 455 | .hover-tips li { 456 | position: relative; 457 | padding: 2px; 458 | border: 2px solid transparent; 459 | border-radius: 100%; 460 | width: 24px; 461 | height: 24px; 462 | background-clip: content-box; 463 | cursor: pointer; 464 | -webkit-transition: all 300ms; 465 | transition: all 300ms; 466 | } 467 | 468 | .hover-tips li::before, .hover-tips li::after { 469 | position: absolute; 470 | left: 50%; 471 | bottom: 100%; 472 | opacity: 0; 473 | -webkit-transform: translate3d(0, -30px, 0); 474 | transform: translate3d(0, -30px, 0); 475 | -webkit-transition: all 300ms; 476 | transition: all 300ms; 477 | } 478 | 479 | .hover-tips li::before { 480 | margin: 0 0 12px -35px; 481 | border-radius: 5px; 482 | width: 70px; 483 | height: 30px; 484 | background-color: rgba(0, 0, 0, 0.5); 485 | line-height: 30px; 486 | text-align: center; 487 | color: #fff; 488 | content: attr(data-name); 489 | } 490 | 491 | .hover-tips li::after { 492 | margin-left: -6px; 493 | border: 6px solid transparent; 494 | border-top-color: rgba(0, 0, 0, 0.5); 495 | width: 0; 496 | height: 0; 497 | content: ""; 498 | } 499 | 500 | .hover-tips li:nth-child(1) { 501 | background-color: #f66; 502 | } 503 | 504 | .hover-tips li:nth-child(1):hover { 505 | border-color: #f66; 506 | } 507 | 508 | .hover-tips li:nth-child(2) { 509 | background-color: #66f; 510 | } 511 | 512 | .hover-tips li:nth-child(2):hover { 513 | border-color: #66f; 514 | } 515 | 516 | .hover-tips li:nth-child(3) { 517 | background-color: #f90; 518 | } 519 | 520 | .hover-tips li:nth-child(3):hover { 521 | border-color: #f90; 522 | } 523 | 524 | .hover-tips li:nth-child(4) { 525 | background-color: #09f; 526 | } 527 | 528 | .hover-tips li:nth-child(4):hover { 529 | border-color: #09f; 530 | } 531 | 532 | .hover-tips li:nth-child(5) { 533 | background-color: #9c3; 534 | } 535 | 536 | .hover-tips li:nth-child(5):hover { 537 | border-color: #9c3; 538 | } 539 | 540 | .hover-tips li:nth-child(6) { 541 | background-color: #3c9; 542 | } 543 | 544 | .hover-tips li:nth-child(6):hover { 545 | border-color: #3c9; 546 | } 547 | 548 | .hover-tips li:hover::before, .hover-tips li:hover::after { 549 | opacity: 1; 550 | -webkit-transform: translate3d(0, 0, 0); 551 | transform: translate3d(0, 0, 0); 552 | } 553 | 554 | .state-ball { 555 | overflow: hidden; 556 | position: relative; 557 | padding: 5px; 558 | border: 3px solid #3c9; 559 | border-radius: 100%; 560 | width: 150px; 561 | height: 150px; 562 | background-color: #fff; 563 | } 564 | 565 | .state-ball::before, .state-ball::after { 566 | position: absolute; 567 | left: 50%; 568 | bottom: 5px; 569 | z-index: 9; 570 | margin-left: -100px; 571 | width: 200px; 572 | height: 200px; 573 | content: ""; 574 | } 575 | 576 | .state-ball::before { 577 | margin-bottom: calc(var(--offset) * 1.34px); 578 | border-radius: 45%; 579 | background-color: rgba(255, 255, 255, 0.5); 580 | -webkit-animation: rotate 10s linear -5s infinite; 581 | animation: rotate 10s linear -5s infinite; 582 | } 583 | 584 | .state-ball::after { 585 | margin-bottom: calc(var(--offset) * 1.34px + 10px); 586 | border-radius: 40%; 587 | background-color: rgba(255, 255, 255, 0.8); 588 | -webkit-animation: rotate 15s infinite; 589 | animation: rotate 15s infinite; 590 | } 591 | 592 | .state-ball .wave { 593 | position: relative; 594 | border-radius: 100%; 595 | width: 100%; 596 | height: 100%; 597 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(13%, #af8), color-stop(91%, #3c9)); 598 | background-image: linear-gradient(to bottom, #af8 13%, #3c9 91%); 599 | } 600 | 601 | .state-ball .progress::after { 602 | display: -webkit-box; 603 | display: -ms-flexbox; 604 | display: flex; 605 | position: absolute; 606 | left: 0; 607 | top: 0; 608 | z-index: 99; 609 | -webkit-box-pack: center; 610 | -ms-flex-pack: center; 611 | justify-content: center; 612 | -webkit-box-align: center; 613 | -ms-flex-align: center; 614 | align-items: center; 615 | width: 100%; 616 | height: 100%; 617 | font-weight: bold; 618 | font-size: 16px; 619 | color: #09f; 620 | content: counter(progress) "%"; 621 | counter-reset: progress var(--offset); 622 | } 623 | 624 | @-webkit-keyframes rotate { 625 | to { 626 | -webkit-transform: rotate(1turn); 627 | transform: rotate(1turn); 628 | } 629 | } 630 | 631 | @keyframes rotate { 632 | to { 633 | -webkit-transform: rotate(1turn); 634 | transform: rotate(1turn); 635 | } 636 | } 637 | 638 | .active, .tab-navbar input:nth-child(1):checked ~ nav label:nth-child(1), .tab-navbar input:nth-child(2):checked ~ nav label:nth-child(2), .tab-navbar input:nth-child(3):checked ~ nav label:nth-child(3), .tab-navbar input:nth-child(4):checked ~ nav label:nth-child(4) { 639 | background-color: #3c9; 640 | color: #fff; 641 | } 642 | 643 | .tab-navbar { 644 | display: -webkit-box; 645 | display: -ms-flexbox; 646 | display: flex; 647 | overflow: hidden; 648 | -webkit-box-orient: vertical; 649 | -webkit-box-direction: reverse; 650 | -ms-flex-direction: column-reverse; 651 | flex-direction: column-reverse; 652 | border-radius: 10px; 653 | width: 300px; 654 | height: 400px; 655 | } 656 | 657 | .tab-navbar input:nth-child(1):checked ~ main ul { 658 | background-color: #f66; 659 | -webkit-transform: translate3d(0, 0, 0); 660 | transform: translate3d(0, 0, 0); 661 | } 662 | 663 | .tab-navbar input:nth-child(2):checked ~ main ul { 664 | background-color: #66f; 665 | -webkit-transform: translate3d(-25%, 0, 0); 666 | transform: translate3d(-25%, 0, 0); 667 | } 668 | 669 | .tab-navbar input:nth-child(3):checked ~ main ul { 670 | background-color: #f90; 671 | -webkit-transform: translate3d(-50%, 0, 0); 672 | transform: translate3d(-50%, 0, 0); 673 | } 674 | 675 | .tab-navbar input:nth-child(4):checked ~ main ul { 676 | background-color: #09f; 677 | -webkit-transform: translate3d(-75%, 0, 0); 678 | transform: translate3d(-75%, 0, 0); 679 | } 680 | 681 | .tab-navbar nav { 682 | display: -webkit-box; 683 | display: -ms-flexbox; 684 | display: flex; 685 | height: 40px; 686 | background-color: #f0f0f0; 687 | line-height: 40px; 688 | text-align: center; 689 | } 690 | 691 | .tab-navbar nav label { 692 | -webkit-box-flex: 1; 693 | -ms-flex: 1; 694 | flex: 1; 695 | cursor: pointer; 696 | -webkit-transition: all 300ms; 697 | transition: all 300ms; 698 | } 699 | 700 | .tab-navbar main { 701 | -webkit-box-flex: 1; 702 | -ms-flex: 1; 703 | flex: 1; 704 | } 705 | 706 | .tab-navbar main ul { 707 | display: -webkit-box; 708 | display: -ms-flexbox; 709 | display: flex; 710 | -ms-flex-wrap: nowrap; 711 | flex-wrap: nowrap; 712 | width: 400%; 713 | height: 100%; 714 | -webkit-transition: all 300ms; 715 | transition: all 300ms; 716 | } 717 | 718 | .tab-navbar main li { 719 | display: -webkit-box; 720 | display: -ms-flexbox; 721 | display: flex; 722 | -webkit-box-pack: center; 723 | -ms-flex-pack: center; 724 | justify-content: center; 725 | -webkit-box-align: center; 726 | -ms-flex-align: center; 727 | align-items: center; 728 | -webkit-box-flex: 1; 729 | -ms-flex: 1; 730 | flex: 1; 731 | font-weight: bold; 732 | font-size: 20px; 733 | color: #fff; 734 | } 735 | /*# sourceMappingURL=index.css.map */ --------------------------------------------------------------------------------