generated from Meekdai/Gmeek-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblogBase.json
1 lines (1 loc) · 44.6 KB
/
blogBase.json
1
{"singlePage": [], "startSite": "", "filingNum": "", "onePageListNum": 15, "commentLabelColor": "#006b75", "yearColorList": ["#bc4c00", "#0969da", "#1f883d", "#A333D0"], "i18n": "CN", "themeMode": "manual", "dayTheme": "light", "nightTheme": "dark", "urlMode": "pinyin", "script": "", "style": "", "head": "", "indexScript": "", "indexStyle": "", "bottomText": "", "showPostSource": 1, "iconList": {}, "UTC": 8, "rssSplit": "sentence", "exlink": {}, "needComment": 1, "allHead": "", "title": "Enashpinal's Blog", "subTitle": "The jumping blocks at my are my lifelong belief.", "avatarUrl": "https://enashpinal.pages.dev/touxiang.jpg", "GMEEK_VERSION": "last", "postListJson": {"P5": {"htmlDir": "docs/post/\u3010-jiao-cheng-\u3011-bai-du-wang-pan-ru-he-xiang-ci-pan-yi-yang-gua-zai-dao-ben-di.html", "labels": ["\u6559\u7a0b"], "postTitle": "\u3010\u6559\u7a0b\u3011\u767e\u5ea6\u7f51\u76d8\u5982\u4f55\u50cf\u78c1\u76d8\u4e00\u6837\u6302\u8f7d\u5230\u672c\u5730", "postUrl": "post/%E3%80%90-jiao-cheng-%E3%80%91-bai-du-wang-pan-ru-he-xiang-ci-pan-yi-yang-gua-zai-dao-ben-di.html", "postSourceUrl": "https://github.com/Enashpinal/enashpinal.github.io/issues/5", "commentNum": 0, "wordCount": 1855, "description": "## \u6750\u6599\r\n1.\u4e00\u4e2a\u767e\u5ea6\u7f51\u76d8\u8d26\u53f7\r\n2.windows10\u7cfb\u7edf\r\n3.Alist\u548cRaiDrive\r\n\r\n## \u6240\u9700\u6587\u4ef6\u4e0b\u8f7d\uff08Alist \u548c RaiDrive \u5b89\u88c5\u5305\uff09\r\n\u4e0b\u8f7d\u94fe\u63a5\uff1a[\u767e\u5ea6\u7f51\u76d8](https://pan.baidu.com/s/129HPJ1dk1pPNdGhbXuR42w?pwd=3h5i)\r\n\r\n## \u7b2c\u4e00\u6b65\r\n\u4e0b\u8f7d\u5e76\u89e3\u538b\u6240\u9700\u6587\u4ef6\uff0c\u53f3\u952e\u70b9\u51fb`alist-windows-4.0-amd64.exe`\u4ee5\u7ba1\u7406\u5458\u8eab\u4efd\u8fd0\u884c\u3002", "top": 0, "createdAt": 1722432246, "style": "", "script": "", "head": "", "ogImage": "https://enashpinal.pages.dev/touxiang.jpg", "createdDate": "2024-07-31", "dateLabelColor": "#bc4c00"}, "P6": {"htmlDir": "docs/post/\u3010MC-fu-wu-qi-xuan-chuan-\u3011CloudDream-yun-meng-gu-fu-wu-qi-zhao-xin.html", "labels": ["MC\u670d\u52a1\u5668", "Minecraft"], "postTitle": "\u3010MC\u670d\u52a1\u5668\u5ba3\u4f20\u3011CloudDream\u4e91\u68a6\u8c37\u670d\u52a1\u5668\u62db\u65b0", "postUrl": "post/%E3%80%90MC-fu-wu-qi-xuan-chuan-%E3%80%91CloudDream-yun-meng-gu-fu-wu-qi-zhao-xin.html", "postSourceUrl": "https://github.com/Enashpinal/enashpinal.github.io/issues/6", "commentNum": 0, "wordCount": 1007, "description": "## CloudDream\u4e91\u68a6\u8c37 Minecraft \u670d\u52a1\u5668\r\n\u8fd9\u662f\u4e00\u4e2a Minecraft \u670d\u52a1\u5668\u2014\u2014CloudDream\u4e91\u68a6\u8c37\uff0c\u521a\u5f003\u4e2a\u6708\u7684\u65b0\u670d\uff0c\u6ca1\u4eba\u73a9\uff0c\u5feb\u6765\u5e2e\u5e2e\u6211\u4eec\uff01\u8fd9\u662f\u6211\u4eec\u7684\u5ba3\u4f20\u7247\uff1a\r\n[bilibili video](https://www.bilibili.com/video/BV1ET421y7md/?spm_id_from=333.999.0.0)\r\n\r\n\u6211\u4eec\u662f\u4e00\u5bb6\u81f4\u529b\u4e8e\u63d0\u4f9b\u6700\u4f73\u6e38\u620f\u4f53\u9a8c\u7684 Minecraft \u516c\u76ca\u670d\u52a1\u5668\u3002", "top": 0, "createdAt": 1722435702, "style": "", "script": "", "head": "", "ogImage": "https://enashpinal.pages.dev/touxiang.jpg", "createdDate": "2024-07-31", "dateLabelColor": "#bc4c00"}, "P7": {"htmlDir": "docs/post/\u3010ChatGPT\u30112024-nian-7-yue-ChatGPT-deng-mian-fei-ke-yong-jing-xiang-hui-zong.html", "labels": ["\u6536\u96c6", "ChatGPT"], "postTitle": "\u3010ChatGPT\u30112024\u5e747\u6708ChatGPT\u7b49\u514d\u8d39\u53ef\u7528\u955c\u50cf\u6c47\u603b", "postUrl": "post/%E3%80%90ChatGPT%E3%80%912024-nian-7-yue-ChatGPT-deng-mian-fei-ke-yong-jing-xiang-hui-zong.html", "postSourceUrl": "https://github.com/Enashpinal/enashpinal.github.io/issues/7", "commentNum": 0, "wordCount": 1248, "description": "## AI\u667a\u80fd\u4e2d\u53f0\r\n_\u5730\u5740\uff1ahttps://yuxin-ai.com/_\r\n### \u4f18\u70b9\r\n- \u652f\u6301\u7ed8\u56fe\u3001\u4ee3\u7801\u5206\u6790\u3001\u6587\u4ef6\u4e0a\u4f20\r\n- GPT4o mini\u514d\u8d39\u5f00\u653e\r\n- \u5b98\u7f51\u76f4\u8fde\r\n### \u7f3a\u70b9\r\n- \u9700\u8981\u767b\u5f55\r\n- \u9891\u7387\u9650\u5236\uff1a1\u5929100\u6761\uff1b1\u5c0f\u65f615\u6761\r\n\r\n## ChatGAi\r\n_\u5730\u5740\uff1ahttps://chatgai.lovepor.cn/_\r\n### \u4f18\u70b9\r\n- \u652f\u6301GPT4o mini\u3001\u89c6\u9891\u751f\u6210\u3001\u7ed8\u56fe\u7b49\r\n- \u6e38\u5ba2\u53ef\u7528\r\n### \u7f3a\u70b9\r\n- \u767b\u5f55\u624d\u80fd\u4f7f\u7528\u5168\u90e8\u529f\u80fd\r\n- \u514d\u8d39\u7248\u4e0d\u652f\u6301\u6587\u4ef6\u4e0a\u4f20\r\n- \u6709\u989d\u5ea6\u9650\u5236\r\n\r\n## \u733f\u4ebaAI\r\n_\u5730\u5740\uff1ahttps://chat.dogai.vip/_\r\n### \u4f18\u70b9\r\n- GPT4o mini\u30013.5\u514d\u8d39\u5f00\u653e\r\n- \u5b98\u7f51\u76f4\u8fde\r\n- \u54cd\u5e94\u901f\u5ea6\u5feb\r\n### \u7f3a\u70b9\r\n- \u514d\u8d39\u901a\u9053\u975e\u5e38\u62e5\u6324\uff0c4o mini\u51e0\u4e4e\u7528\u4e0d\u4e86\r\n- \u4e0d\u652f\u6301\u753b\u56fe\u3001\u6587\u4ef6\u5904\u7406\r\n- \u9700\u8981\u767b\u5f55\r\n\r\n## AIChatOS\r\n_\u5730\u5740\uff1ahttps://chat18.aichatos8.com/#/chat/1721654393390_\r\n### \u4f18\u70b9\r\n- GPT3.5\u514d\u8d39\u5f00\u653e\r\n- \u65e0\u9700\u767b\u5f55\r\n- \u516c\u76ca\u5f00\u6e90\r\n- \u54cd\u5e94\u901f\u5ea6\u5feb\r\n### \u7f3a\u70b9\r\n- \u4ec5\u652f\u6301GPT3.5\uff0c\u4e0d\u652f\u6301\u5176\u5b83\u529f\u80fd\r\n\r\n## AItianhu\r\n_\u5730\u5740\uff1ahttps://so87qe.aitianhu1.top/_\r\n### \u4f18\u70b9\r\n- \u65e0\u9700\u767b\u5f55\r\n- GPT3.5\u8054\u7f51\u3001claude-1\u3001google-palm\u3001code-llama-34b\u3001llama-2-70b\u514d\u8d39\u5f00\u653e\r\n- 50\u4f59\u4e2aAI\u6a21\u578b\r\n- \u514d\u8d39\u7248\u65e0\u9891\u7387/\u989d\u5ea6\u9650\u5236\r\n- \u4ef7\u683c\u4fbf\u5b9c\r\n- \u652f\u6301\u6587\u4ef6\u4e0a\u4f20\u3001\u89c6\u9891\u751f\u6210\u3001\u7ed8\u56fe\u7b49\uff08\u9700\u8d5e\u52a9\uff09\r\n### \u7f3a\u70b9\r\n- \u54cd\u5e94\u901f\u5ea6\u8f83\u6162\r\n- GPT4o\u6a21\u578b\u9700\u4ed8\u8d39\u4f7f\u7528\r\n\r\n## AI\u95ee\u7b54\u5b9d\r\n_\u5730\u5740\uff1ahttps://share.wendabao-b.net/_\r\n### \u4f18\u70b9\r\n- \u65e0\u9700\u767b\u5f55\r\n- \u5b98\u7f51\u76f4\u8fde\r\n- GPT 4o\u3001GPT 4o mini\u3001GPT 4\u3001\u63a2\u7d22GPT\u514d\u8d39\u5f00\u653e\r\n### \u7f3a\u70b9\r\n- \u9609\u5272\u4e86\u90e8\u5206\u5b98\u65b9\u539f\u6709\u529f\u80fd\r\n- \u6709\u9891\u7387\u9650\u5236\r\n\r\n## Claude\u8d26\u53f7\u6c60\r\n_\u5730\u5740\uff1ahttps://cluade.yswl.chat/_\r\n\r\n\u6ce8\uff1a\u7528\u6237\u540d\u968f\u4fbf\u586b\u4e00\u4e2a\uff0c\u5bc6\u7801\u586byskj666\r\n### \u4f18\u70b9\r\n- claude\u5b98\u7f51\u76f4\u8fbe\r\n- Claude3.5\u514d\u8d39\u5f00\u653e\r\n- \u652f\u6301\u6587\u4ef6\u5206\u6790\r\n- \u54cd\u5e94\u901f\u5ea6\u8f83\u5feb\r\n- \u516c\u76ca\u5f00\u6e90\r\n### \u7f3a\u70b9\r\n- \u4ec5\u652f\u6301Cloude3.5\r\n- \u4e0d\u652f\u6301\u7ed8\u56fe\r\n\r\n## \u514d\u8d39ChatGPT\r\n_\u5730\u5740\uff1ahttps://free.netfly.top/_\r\n### \u4f18\u70b9\r\n- GPT3.5\u30014.0\u514d\u8d39\u5f00\u653e\r\n- \u65e0\u9700\u767b\u5f55\r\n- \u652f\u6301\u9884\u8bbe\u63d0\u793a\u8bcd\r\n### \u7f3a\u70b9\r\n- \u54cd\u5e94\u901f\u5ea6\u8f83\u6162\r\n- \u4e0d\u652f\u6301\u6587\u4ef6\u5206\u6790\u3001\u7ed8\u56fe\u7b49\r\n\r\n\u4ee5\u4e0a\u5185\u5bb9\u4ec5\u4f9b\u53c2\u8003\r\n\r\n\u6536\u96c6\u4e0d\u6613\uff0c\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u6587\u7ae0\u51fa\u5904\uff01\r\n\u3002", "top": 0, "createdAt": 1722436156, "style": "", "script": "", "head": "", "ogImage": "https://enashpinal.pages.dev/touxiang.jpg", "createdDate": "2024-07-31", "dateLabelColor": "#bc4c00"}, "P8": {"htmlDir": "docs/post/\u3010-qian-duan-kai-fa-\u3011-yi-xie-jing-mei-de-an-niu-she-ji-\uff08CSS+HTML\uff09.html", "labels": ["\u524d\u7aef\u5f00\u53d1", "\u6536\u96c6"], "postTitle": "\u3010\u524d\u7aef\u5f00\u53d1\u3011\u4e00\u4e9b\u7cbe\u7f8e\u7684\u6309\u94ae\u8bbe\u8ba1\uff08CSS+HTML\uff09", "postUrl": "post/%E3%80%90-qian-duan-kai-fa-%E3%80%91-yi-xie-jing-mei-de-an-niu-she-ji-%EF%BC%88CSS%2BHTML%EF%BC%89.html", "postSourceUrl": "https://github.com/Enashpinal/enashpinal.github.io/issues/8", "commentNum": 0, "wordCount": 26989, "description": "\u3010\u524d\u7aef\u5f00\u53d1\u300e\u642c\u8fd0\u300f\u3011\u4e00\u4e9b\u7cbe\u7f8e\u7684\u6309\u94ae\u8bbe\u8ba1\uff08CSS+HTML\uff09\r\n\r\n## \u8fd9\u91cc\u6536\u96c6\u4e86\u4e00\u4e9b\u7cbe\u7f8e\u7684\u6309\u94ae\u8bbe\u8ba1\r\n\r\n### CSS code\r\n```css\r\n.button {\r\n\r\n\t\u00a0margin: 0;\r\n\r\n\t\u00a0height: auto;\r\n\r\n\u00a0\tbackground: transparent;\r\n\r\n\t\u00a0padding: 0;\r\n\r\n\t\u00a0border: none;\r\n\r\n\t\u00a0cursor: pointer;\r\n\r\n}\r\n\r\n\r\n\r\n.button {\r\n\r\n\t\u00a0--border-right: 6px;\r\n\r\n\t\u00a0--text-stroke-color: rgba(255,255,255,0.6);\r\n\r\n\t\u00a0--animation-color: #37FF8B;\r\n\r\n\t\u00a0--fs-size: 2em;\r\n\r\n\t\u00a0letter-spacing: 3px;\r\n\r\n\t\u00a0text-decoration: none;\r\n\r\n\u00a0\tfont-size: var(--fs-size);\r\n\r\n\t\u00a0font-family: 'Arial';\r\n\r\n\t\u00a0position: relative;\r\n\r\n\t\u00a0text-transform: uppercase;\r\n\r\n\t\u00a0color: transparent;\r\n\r\n\t\u00a0-webkit-text-stroke: 1px var(--text-stroke-color);\r\n\r\n}\r\n\r\n.hover-text {\r\n\r\n\t\u00a0position: absolute;\r\n\r\n\t\u00a0box-sizing: border-box;\r\n\r\n\u00a0\tcontent: attr(data-text);\r\n\r\n\t\u00a0color: var(--animation-color);\r\n\r\n\t\u00a0width: 0%;\r\n\r\n\t\u00a0inset: 0;\r\n\r\n\t\u00a0border-right: var(--border-right) solid var(--animation-color);\r\n\r\n\t\u00a0overflow: hidden;\r\n\r\n\t\u00a0transition: 0.5s;\r\n\r\n\t\u00a0-webkit-text-stroke: 1px var(--animation-color);\r\n\r\n}\r\n\r\n.button:hover .hover-text {\r\n\r\n\t\u00a0width: 100%;\r\n\r\n\t\u00a0filter: drop-shadow(0 0 23px var(--animation-color))\r\n\r\n} \r\n```\r\n### HTML code\r\n\r\n``` html\r\n<button class='button' data-text='Awesome'>\r\n\r\n\u00a0\t\u00a0<span class='actual-text'> TITLE </span>\r\n\r\n\u00a0\t\u00a0<span aria-hidden='true' class='hover-text'> TITLE </span>\r\n\r\n</button> \r\n```\r\n\r\n\r\n### CSS code\r\n```CSS\r\n.btn-donate {\r\n\r\n\t\u00a0--clr-font-main: hsla(0 0% 20% / 100);\r\n\r\n\t\u00a0--btn-bg-1: hsla(194 100% 69% / 1);\r\n\r\n\t\u00a0--btn-bg-2: hsla(217 100% 56% / 1);\r\n\r\n\t\u00a0--btn-bg-color: hsla(360 100% 100% / 1);\r\n\r\n\t\u00a0--radii: 0.5em;\r\n\r\n\t\u00a0cursor: pointer;\r\n\r\n\t\u00a0padding: 0.9em 1.4em;\r\n\r\n\t\u00a0min-width: 120px;\r\n\r\n\t\u00a0min-height: 44px;\r\n\r\n\t\u00a0font-size: var(--size, 1rem);\r\n\r\n\t\u00a0font-family: 'Segoe UI', system-ui, sans-serif;\r\n\r\n\t\u00a0font-weight: 500;\r\n\r\n\t\u00a0transition: 0.8s;\r\n\r\n\t\u00a0background-size: 280% auto;\r\n\r\n\t\u00a0background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);\r\n\r\n\t\u00a0border: none;\r\n\r\n\t\u00a0border-radius: var(--radii);\r\n\r\n\t\u00a0color: var(--btn-bg-color);\r\n\r\n\t\u00a0box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px rgba(58, 125, 233, 0.25), inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -4px -4px 8px rgba(19, 95, 216, 0.35);\r\n\r\n}\r\n\r\n.btn-donate:hover {\r\n\r\n\t\u00a0background-position: right top;\r\n\r\n}\r\n\r\n.btn-donate:is(:focus, :focus-visible, :active) {\r\n\r\n\u00a0\toutline: none;\r\n\r\n\u00a0\tbox-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2);\r\n\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n\u00a0\t.btn-donate {\r\n\r\n\u00a0\t\t\u00a0transition: linear;\r\n\r\n\t\u00a0}\r\n\r\n} \r\n```\r\n\r\n### HTML code\r\n``` html\r\n<button class='btn-donate'>\r\n\r\n\u00a0\t\u00a0click me\r\n\r\n</button>\r\n```\r\n\r\n\r\n### CSS code\r\n```CSS\r\n.animated-button {\r\n\r\n\t\u00a0position: relative;\r\n\r\n\u00a0\tdisplay: flex;\r\n\r\n\t\u00a0align-items: center;\r\n\r\n\u00a0\tgap: 4px;\r\n\r\n\u00a0\tpadding: 16px 36px;\r\n\r\n\u00a0\tborder: 4px solid;\r\n\r\n\u00a0\tborder-color: transparent;\r\n\r\n\u00a0\tfont-size: 16px;\r\n\r\n\u00a0\tbackground-color: inherit;\r\n\r\n\u00a0\tborder-radius: 100px;\r\n\r\n\u00a0\tfont-weight: 600;\r\n\r\n\u00a0\tcolor: greenyellow;\r\n\r\n\t\u00a0box-shadow: 0 0 0 2px greenyellow;\r\n\r\n\t\u00a0cursor: pointer;\r\n\r\n\t\u00a0overflow: hidden;\r\n\r\n\t\u00a0transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\r\n\r\n}\r\n\r\n.animated-button svg {\r\n\r\n\t\u00a0position: absolute;\r\n\r\n\t\u00a0width: 24px;\r\n\r\n\t\u00a0fill: greenyellow;\r\n\r\n\t\u00a0z-index: 9;\r\n\r\n\t\u00a0transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\r\n\r\n}\r\n\r\n.animated-button .arr-1 {\r\n\r\n\u00a0\tright: 16px;\r\n\r\n}\r\n\r\n.animated-button .arr-2 {\r\n\r\n\t\u00a0left: -25%;\r\n\r\n}\r\n\r\n\r\n\r\n.animated-button .circle {\r\n\r\n\t\u00a0position: absolute;\r\n\r\n\t\u00a0top: 50%;\r\n\r\n\t\u00a0left: 50%;\r\n\r\n\t\u00a0transform: translate(-50%, -50%);\r\n\r\n\t\u00a0width: 20px;\r\n\r\n\t\u00a0height: 20px;\r\n\r\n\t\u00a0background-color: greenyellow;\r\n\r\n\t\u00a0border-radius: 50%;\r\n\r\n\t\u00a0opacity: 0;\r\n\r\n\t\u00a0transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\r\n\r\n}\r\n\r\n.animated-button .text {\r\n\r\n\t\u00a0position: relative;\r\n\r\n\t\u00a0z-index: 1;\r\n\r\n\t\u00a0transform: translateX(-12px);\r\n\r\n\t\u00a0transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\r\n\r\n}\r\n\r\n.animated-button:hover {\r\n\r\n\t\u00a0box-shadow: 0 0 0 12px transparent;\r\n\r\n\t\u00a0color: #212121;\r\n\r\n\t\u00a0border-radius: 12px;\r\n\r\n}\r\n\r\n.animated-button:hover .arr-1 {\r\n\r\n\t\u00a0right: -25%;\r\n\r\n}\r\n\r\n.animated-button:hover .arr-2 {\r\n\r\n\t\u00a0left: 16px;\r\n\r\n}\r\n\r\n.animated-button:hover .text {\r\n\r\n\u00a0\ttransform: translateX(12px);\r\n\r\n}\r\n\r\n.animated-button:hover svg {\r\n\r\n\t\u00a0fill: #212121;\r\n\r\n}\r\n\r\n.animated-button:active {\r\n\r\n\t\u00a0scale: 0.95;\r\n\r\n\t\u00a0box-shadow: 0 0 0 4px greenyellow;\r\n\r\n}\r\n\r\n.animated-button:hover .circle {\r\n\r\n\t\u00a0width: 220px;\r\n\r\n\t\u00a0height: 220px;\r\n\r\n\u00a0\topacity: 1;\r\n\r\n} \r\n```\r\n\r\n### HTML code\r\n``` HTML\r\n<button class='animated-button'>\r\n\r\n\u00a0\t\t<svg viewBox='0 0 24 24' class='arr-2' xmlns='http://www.w3.org/2000/svg'>\r\n\r\n\t\u00a0\u00a0\t<path\r\n\r\n\u00a0\t\t\u00a0\u00a0d='M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z'\r\n\r\n\u00a0\u00a0\t\t></path>\r\n\r\n\u00a0\t</svg>\r\n\r\n\u00a0\t<span class='text'>Modern Button</span>\r\n\r\n\u00a0\t<span class='circle'></span>\r\n\r\n\t\t\u00a0<svg viewBox='0 0 24 24' class='arr-1' xmlns='http://www.w3.org/2000/svg'>\r\n\r\n\t\t\u00a0\u00a0<path\r\n\r\n\u00a0\t\t\u00a0\u00a0d='M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z'\r\n\r\n\t\t\u00a0\u00a0></path>\r\n\r\n\u00a0\t</svg>\r\n\r\n</button>\r\n```\r\n\r\n\r\n### CSS code\r\n```css\r\n.sparkle-button {\r\n\r\n --active: 0;\r\n\r\n --bg: radial-gradient(\r\n\r\n\t\t\t40% 50% at center 100%,\r\n\r\n\t\t\thsl(270 calc(var(--active) * 97%) 72% / var(--active)),\r\n\r\n\t\t\ttransparent\r\n\r\n\t\t),\r\n\r\n\t\tradial-gradient(\r\n\r\n\t\t\t80% 100% at center 120%,\r\n\r\n\t\t\thsl(260 calc(var(--active) * 97%) 70% / var(--active)),\r\n\r\n\t\t\ttransparent\r\n\r\n\t\t),\r\n\r\n\t\thsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));\r\n\r\n background: var(--bg);\r\n\r\n font-size: 1.2rem;\r\n\r\n font-weight: 500;\r\n\r\n border: 0;\r\n\r\n cursor: pointer;\r\n\r\n padding: 1em 1em;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n gap: 0.25em;\r\n\r\n white-space: nowrap;\r\n\r\n border-radius: 100px;\r\n\r\n position: relative;\r\n\r\n box-shadow: 0 0 calc(var(--active) * 3em) calc(var(--active) * 1em) hsl(260 97% 61% / 0.75),\r\n\r\n\t\t0 0em 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,\r\n\r\n\t\t0 -0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset;\r\n\r\n transition: box-shadow var(--transition), scale var(--transition), background var(--transition);\r\n\r\n scale: calc(1 + (var(--active) * 0.1));\r\n\r\n transition: .3s;\r\n\r\n}\r\n\r\n\r\n\r\n.sparkle-button:active {\r\n\r\n scale: 1;\r\n\r\n transition: .3s;\r\n\r\n}\r\n\r\n\r\n\r\n.sparkle path {\r\n\r\n color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));\r\n\r\n transform-box: fill-box;\r\n\r\n transform-origin: center;\r\n\r\n fill: currentColor;\r\n\r\n stroke: currentColor;\r\n\r\n animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));\r\n\r\n animation-duration: 0.6s;\r\n\r\n transition: color var(--transition);\r\n\r\n}\r\n\r\n\r\n\r\n.sparkle-button:is(:hover, :focus-visible) path {\r\n\r\n animation-name: bounce;\r\n\r\n}\r\n\r\n\r\n\r\n@keyframes bounce {\r\n\r\n 35%, 65% {\r\n\r\n scale: var(--scale);\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n.sparkle path:nth-of-type(1) {\r\n\r\n --scale: 0.5;\r\n\r\n --delay: 0.1;\r\n\r\n --base: 40%;\r\n\r\n}\r\n\r\n\r\n\r\n.sparkle path:nth-of-type(2) {\r\n\r\n --scale: 1.5;\r\n\r\n --delay: 0.2;\r\n\r\n --base: 20%;\r\n\r\n}\r\n\r\n\r\n\r\n.sparkle path:nth-of-type(3) {\r\n\r\n --scale: 2.5;\r\n\r\n --delay: 0.35;\r\n\r\n --base: 30%;\r\n\r\n}\r\n\r\n\r\n\r\n.sparkle-button:before {\r\n\r\n content: '';\r\n\r\n position: absolute;\r\n\r\n inset: -0.2em;\r\n\r\n z-index: -1;\r\n\r\n border: 0.25em solid hsl(260 97% 50% / 0.5);\r\n\r\n border-radius: 100px;\r\n\r\n opacity: var(--active, 0);\r\n\r\n transition: opacity var(--transition);\r\n\r\n}\r\n\r\n\r\n\r\n.spark {\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n border-radius: 100px;\r\n\r\n rotate: 0deg;\r\n\r\n overflow: hidden;\r\n\r\n mask: linear-gradient(white, transparent 50%);\r\n\r\n animation: flip calc(var(--spark) * 2) infinite steps(2, end);\r\n\r\n}\r\n\r\n\r\n\r\n@keyframes flip {\r\n\r\n to {\r\n\r\n rotate: 360deg;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n.spark:before {\r\n\r\n content: '';\r\n\r\n position: absolute;\r\n\r\n width: 200%;\r\n\r\n aspect-ratio: 1;\r\n\r\n top: 0%;\r\n\r\n left: 50%;\r\n\r\n z-index: -1;\r\n\r\n translate: -50% -15%;\r\n\r\n rotate: 0;\r\n\r\n transform: rotate(-90deg);\r\n\r\n opacity: calc((var(--active)) + 0.4);\r\n\r\n background: conic-gradient(\r\n\r\n\t\tfrom 0deg,\r\n\r\n\t\ttransparent 0 340deg,\r\n\r\n\t\twhite 360deg\r\n\r\n\t);\r\n\r\n transition: opacity var(--transition);\r\n\r\n animation: rotate var(--spark) linear infinite both;\r\n\r\n}\r\n\r\n\r\n\r\n.spark:after {\r\n\r\n content: '';\r\n\r\n position: absolute;\r\n\r\n inset: var(--cut);\r\n\r\n border-radius: 100px;\r\n\r\n}\r\n\r\n\r\n\r\n.backdrop {\r\n\r\n position: absolute;\r\n\r\n inset: var(--cut);\r\n\r\n background: var(--bg);\r\n\r\n border-radius: 100px;\r\n\r\n transition: background var(--transition);\r\n\r\n}\r\n\r\n\r\n\r\n@keyframes rotate {\r\n\r\n to {\r\n\r\n transform: rotate(90deg);\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n@supports(selector(:has(:is(+ *)))) {\r\n\r\n body:has(button:is(:hover, :focus-visible)) {\r\n\r\n --active: 1;\r\n\r\n --play-state: running;\r\n\r\n }\r\n\r\n\r\n\r\n .bodydrop {\r\n\r\n display: none;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n.sparkle-button:is(:hover, :focus-visible) ~ :is(.bodydrop, .particle-pen) {\r\n\r\n --active: 1;\r\n\r\n --play-state: runnin;\r\n\r\n}\r\n\r\n\r\n\r\n.sparkle-button:is(:hover, :focus-visible) {\r\n\r\n --active: 1;\r\n\r\n --play-state: running;\r\n\r\n}\r\n\r\n\r\n\r\n.sp {\r\n\r\n position: relative;\r\n\r\n}\r\n\r\n\r\n\r\n.particle-pen {\r\n\r\n position: absolute;\r\n\r\n width: 200%;\r\n\r\n aspect-ratio: 1;\r\n\r\n top: 50%;\r\n\r\n left: 50%;\r\n\r\n translate: -50% -50%;\r\n\r\n -webkit-mask: radial-gradient(white, transparent 65%);\r\n\r\n z-index: -1;\r\n\r\n opacity: var(--active, 0);\r\n\r\n transition: opacity var(--transition);\r\n\r\n}\r\n\r\n\r\n\r\n.particle {\r\n\r\n fill: white;\r\n\r\n width: calc(var(--size, 0.25) * 1rem);\r\n\r\n aspect-ratio: 1;\r\n\r\n position: absolute;\r\n\r\n top: calc(var(--y) * 1%);\r\n\r\n left: calc(var(--x) * 1%);\r\n\r\n opacity: var(--alpha, 1);\r\n\r\n animation: float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;\r\n\r\n transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);\r\n\r\n z-index: -1;\r\n\r\n animation-play-state: var(--play-state, paused);\r\n\r\n}\r\n\r\n\r\n\r\n.particle path {\r\n\r\n fill: hsl(0 0% 90%);\r\n\r\n stroke: none;\r\n\r\n}\r\n\r\n\r\n\r\n.particle:nth-of-type(even) {\r\n\r\n animation-direction: reverse;\r\n\r\n}\r\n\r\n\r\n\r\n@keyframes float-out {\r\n\r\n to {\r\n\r\n rotate: 360deg;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n.text {\r\n\r\n translate: 2% -6%;\r\n\r\n letter-spacing: 0.01ch;\r\n\r\n background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));\r\n\r\n -webkit-background-clip: text;\r\n\r\n color: transparent;\r\n\r\n transition: background var(--transition);\r\n\r\n}\r\n\r\n\r\n\r\n.sparkle-button svg {\r\n\r\n inline-size: 1.25em;\r\n\r\n translate: -25% -5%;\r\n\r\n}\r\n```\r\n\r\n### HTML code\r\n``` html\r\n<div class='sp'>\r\n <button class='sparkle-button'>\r\n <span class='spark'></span>\r\n <span class='backdrop'></span>\r\n <svg class='sparkle' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>\r\n <path d='M14.187 8.096L15 5.25L15.813 8.096C16.0231 8.83114 16.4171 9.50062 16.9577 10.0413C17.4984 10.5819 18.1679 10.9759 18.903 11.186L21.75 12L18.904 12.813C18.1689 13.0231 17.4994 13.4171 16.9587 13.9577C16.4181 14.4984 16.0241 15.1679 15.814 15.903L15 18.75L14.187 15.904C13.9769 15.1689 13.5829 14.4994 13.0423 13.9587C12.5016 13.4181 11.8321 13.0241 11.097 12.814L8.25 12L11.096 11.187C11.8311 10.9769 12.5006 10.5829 13.0413 10.0423C13.5819 9.50162 13.9759 8.83214 14.186 8.097L14.187 8.096Z' fill='black' stroke='black' stroke-linecap='round' stroke-linejoin='round'></path>\r\n <path d='M6 14.25L5.741 15.285C5.59267 15.8785 5.28579 16.4206 4.85319 16.8532C4.42059 17.2858 3.87853 17.5927 3.285 17.741L2.25 18L3.285 18.259C3.87853 18.4073 4.42059 18.7142 4.85319 19.1468C5.28579 19.5794 5.59267 20.1215 5.741 20.715L6 21.75L6.259 20.715C6.40725 20.1216 6.71398 19.5796 7.14639 19.147C7.5788 18.7144 8.12065 18.4075 8.714 18.259L9.75 18L8.714 17.741C8.12065 17.5925 7.5788 17.2856 7.14639 16.853C6.71398 16.4204 6.40725 15.8784 6.259 15.285L6 14.25Z' fill='black' stroke='black' stroke-linecap='round' stroke-linejoin='round'></path>\r\n <path d='M6.5 4L6.303 4.5915C6.24777 4.75718 6.15472 4.90774 6.03123 5.03123C5.90774 5.15472 5.75718 5.24777 5.5915 5.303L5 5.5L5.5915 5.697C5.75718 5.75223 5.90774 5.84528 6.03123 5.96877C6.15472 6.09226 6.24777 6.24282 6.303 6.4085L6.5 7L6.697 6.4085C6.75223 6.24282 6.84528 6.09226 6.96877 5.96877C7.09226 5.84528 7.24282 5.75223 7.4085 5.697L8 5.5L7.4085 5.303C7.24282 5.24777 7.09226 5.15472 6.96877 5.03123C6.84528 4.90774 6.75223 4.75718 6.697 4.5915L6.5 4Z' fill='black' stroke='black' stroke-linecap='round' stroke-linejoin='round'></path>\r\n </svg>\r\n <span class='text'>Generate Site</span>\r\n </button>\r\n <div class='bodydrop'></div>\r\n <span aria-hidden='true' class='particle-pen'>\r\n <svg class='particle' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'>\r\n <path d='M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z' fill='black' stroke='black' stroke-linecap='round' stroke-linejoin='round'></path>\r\n </svg>\r\n <svg class='particle' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'>\r\n <path d='M6.937 3.846L7.75 1L8.563 3.846C8.77313 4.58114 9.1671 5.25062 9.70774 5.79126C10.2484 6.3319 10.9179 6.72587 11.653 6.936L14.5 7.75L11.654 8.563C10.9189 8.77313 10.2494 9.1671 9.70874 9.70774C9.1681 10.2484 8.77413 10.9179 8.564 11.653L7.75 14.5L6.937 11.654C6.72687 10.9189 6.3329 10.2494 5.79226 9.70874C5.25162 9.1681 4.58214 8.77413 3.847 8.564L1 7.75L3.846 6.937C4.58114 6.72687 5.25062 6.3329 5.79126 5.79226C6.3319 5.25162 6.72587 4.58214 6.936 3.847L6.937 3.846Z' fill='black' stroke='black' stroke-linecap='round' stroke-linejoin='round'></path>\r\n </svg>\r\n <!-- More SVGs here -->\r\n </span>\r\n</div>\r\n```\r\n\r\n\r\n### CSS code\r\n``` css\r\n.button {\r\n\r\n position: relative;\r\n\r\n width: 120px;\r\n\r\n height: 40px;\r\n\r\n background-color: #000;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n color: white;\r\n\r\n flex-direction: column;\r\n\r\n justify-content: center;\r\n\r\n border: none;\r\n\r\n padding: 12px;\r\n\r\n gap: 12px;\r\n\r\n border-radius: 8px;\r\n\r\n cursor: pointer;\r\n\r\n}\r\n\r\n\r\n\r\n.button::before {\r\n\r\n content: '';\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n left: -4px;\r\n\r\n top: -1px;\r\n\r\n margin: auto;\r\n\r\n width: 128px;\r\n\r\n height: 48px;\r\n\r\n border-radius: 10px;\r\n\r\n background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );\r\n\r\n z-index: -10;\r\n\r\n pointer-events: none;\r\n\r\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n\r\n}\r\n\r\n\r\n\r\n.button::after {\r\n\r\n content: '';\r\n\r\n z-index: -1;\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );\r\n\r\n transform: translate3d(0, 0, 0) scale(0.95);\r\n\r\n filter: blur(20px);\r\n\r\n}\r\n\r\n\r\n\r\n.button:hover::after {\r\n\r\n filter: blur(30px);\r\n\r\n}\r\n\r\n\r\n\r\n.button:hover::before {\r\n\r\n transform: rotate(-180deg);\r\n\r\n}\r\n\r\n\r\n\r\n.button:active::before {\r\n\r\n scale: 0.7;\r\n\r\n}\r\n```\r\n\r\n### HTML code\r\n```html\r\n<button class='button'>\r\n Click me\r\n</button>\r\n```\r\n\r\n\r\n### CSS code\r\n```css\r\n.btn {\r\n\r\n display: flex;\r\n\r\n justify-content: center;\r\n\r\n align-items: center;\r\n\r\n width: 13rem;\r\n\r\n overflow: hidden;\r\n\r\n height: 3rem;\r\n\r\n background-size: 300% 300%;\r\n\r\n backdrop-filter: blur(1rem);\r\n\r\n border-radius: 5rem;\r\n\r\n transition: 0.5s;\r\n\r\n animation: gradient_301 5s ease infinite;\r\n\r\n border: double 4px transparent;\r\n\r\n background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);\r\n\r\n background-origin: border-box;\r\n\r\n background-clip: content-box, border-box;\r\n\r\n}\r\n\r\n\r\n\r\n#container-stars {\r\n\r\n position: absolute;\r\n\r\n z-index: -1;\r\n\r\n width: 100%;\r\n\r\n height: 100%;\r\n\r\n overflow: hidden;\r\n\r\n transition: 0.5s;\r\n\r\n backdrop-filter: blur(1rem);\r\n\r\n border-radius: 5rem;\r\n\r\n}\r\n\r\n\r\n\r\nstrong {\r\n\r\n z-index: 2;\r\n\r\n font-family: 'Avalors Personal Use';\r\n\r\n font-size: 12px;\r\n\r\n letter-spacing: 5px;\r\n\r\n color: #FFFFFF;\r\n\r\n text-shadow: 0 0 4px white;\r\n\r\n}\r\n\r\n\r\n\r\n#glow {\r\n\r\n position: absolute;\r\n\r\n display: flex;\r\n\r\n width: 12rem;\r\n\r\n}\r\n\r\n\r\n\r\n.circle {\r\n\r\n width: 100%;\r\n\r\n height: 30px;\r\n\r\n filter: blur(2rem);\r\n\r\n animation: pulse_3011 4s infinite;\r\n\r\n z-index: -1;\r\n\r\n}\r\n\r\n\r\n\r\n.circle:nth-of-type(1) {\r\n\r\n background: rgba(254, 83, 186, 0.636);\r\n\r\n}\r\n\r\n\r\n\r\n.circle:nth-of-type(2) {\r\n\r\n background: rgba(142, 81, 234, 0.704);\r\n\r\n}\r\n\r\n\r\n\r\n.btn:hover #container-stars {\r\n\r\n z-index: 1;\r\n\r\n background-color: #212121;\r\n\r\n}\r\n\r\n\r\n\r\n.btn:hover {\r\n\r\n transform: scale(1.1)\r\n\r\n}\r\n\r\n\r\n\r\n.btn:active {\r\n\r\n border: double 4px #FE53BB;\r\n\r\n background-origin: border-box;\r\n\r\n background-clip: content-box, border-box;\r\n\r\n animation: none;\r\n\r\n}\r\n\r\n\r\n\r\n.btn:active .circle {\r\n\r\n background: #FE53BB;\r\n\r\n}\r\n\r\n\r\n\r\n#stars {\r\n\r\n position: relative;\r\n\r\n background: transparent;\r\n\r\n width: 200rem;\r\n\r\n height: 200rem;\r\n\r\n}\r\n\r\n\r\n\r\n#stars::after {\r\n\r\n content: '';\r\n\r\n position: absolute;\r\n\r\n top: -10rem;\r\n\r\n left: -100rem;\r\n\r\n width: 100%;\r\n\r\n height: 100%;\r\n\r\n animation: animStarRotate 90s linear infinite;\r\n\r\n}\r\n\r\n\r\n\r\n#stars::after {\r\n\r\n background-image: radial-gradient(#ffffff 1px, transparent 1%);\r\n\r\n background-size: 50px 50px;\r\n\r\n}\r\n\r\n\r\n\r\n#stars::before {\r\n\r\n content: '';\r\n\r\n position: absolute;\r\n\r\n top: 0;\r\n\r\n left: -50%;\r\n\r\n width: 170%;\r\n\r\n height: 500%;\r\n\r\n animation: animStar 60s linear infinite;\r\n\r\n}\r\n\r\n\r\n\r\n#stars::before {\r\n\r\n background-image: radial-gradient(#ffffff 1px, transparent 1%);\r\n\r\n background-size: 50px 50px;\r\n\r\n opacity: 0.5;\r\n\r\n}\r\n\r\n\r\n\r\n@keyframes animStar {\r\n\r\n from {\r\n\r\n transform: translateY(0);\r\n\r\n }\r\n\r\n\r\n\r\n to {\r\n\r\n transform: translateY(-135rem);\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n@keyframes animStarRotate {\r\n\r\n from {\r\n\r\n transform: rotate(360deg);\r\n\r\n }\r\n\r\n\r\n\r\n to {\r\n\r\n transform: rotate(0);\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n@keyframes gradient_301 {\r\n\r\n 0% {\r\n\r\n background-position: 0% 50%;\r\n\r\n }\r\n\r\n\r\n\r\n 50% {\r\n\r\n background-position: 100% 50%;\r\n\r\n }\r\n\r\n\r\n\r\n 100% {\r\n\r\n background-position: 0% 50%;\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n@keyframes pulse_3011 {\r\n\r\n 0% {\r\n\r\n transform: scale(0.75);\r\n\r\n box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);\r\n\r\n }\r\n\r\n\r\n\r\n 70% {\r\n\r\n transform: scale(1);\r\n\r\n box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);\r\n\r\n }\r\n\r\n\r\n\r\n 100% {\r\n\r\n transform: scale(0.75);\r\n\r\n box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);\r\n\r\n }\r\n\r\n}\r\n```\r\n### HTML code\r\n```html\r\n<button class='btn' type='button'>\r\n <strong>CLICK ME</strong>\r\n <div id='container-stars'>\r\n <div id='stars'></div>\r\n </div>\r\n <div id='glow'>\r\n <div class='circle'></div>\r\n <div class='circle'></div>\r\n </div>\r\n</button>\r\n```\r\n\r\n\r\n### CSS code\r\n```css\r\n.Btn {\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n justify-content: flex-start;\r\n\r\n width: 45px;\r\n\r\n height: 45px;\r\n\r\n border: none;\r\n\r\n border-radius: 50%;\r\n\r\n cursor: pointer;\r\n\r\n position: relative;\r\n\r\n overflow: hidden;\r\n\r\n transition-duration: .3s;\r\n\r\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);\r\n\r\n background-color: rgb(255, 65, 65);\r\n\r\n}\r\n\r\n\r\n\r\n.sign {\r\n\r\n width: 100%;\r\n\r\n transition-duration: .3s;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n justify-content: center;\r\n\r\n}\r\n\r\n\r\n\r\n.sign svg {\r\n\r\n width: 17px;\r\n\r\n}\r\n\r\n\r\n\r\n.sign svg path {\r\n\r\n fill: white;\r\n\r\n}\r\n\r\n/* text */\r\n\r\n.text {\r\n\r\n position: absolute;\r\n\r\n right: 0%;\r\n\r\n width: 0%;\r\n\r\n opacity: 0;\r\n\r\n color: white;\r\n\r\n font-size: 1.2em;\r\n\r\n font-weight: 600;\r\n\r\n transition-duration: .3s;\r\n\r\n}\r\n\r\n/* hover effect on button width */\r\n\r\n.Btn:hover {\r\n\r\n width: 125px;\r\n\r\n border-radius: 40px;\r\n\r\n transition-duration: .3s;\r\n\r\n}\r\n\r\n\r\n\r\n.Btn:hover .sign {\r\n\r\n width: 30%;\r\n\r\n transition-duration: .3s;\r\n\r\n padding-left: 20px;\r\n\r\n}\r\n\r\n/* hover effect button's text */\r\n\r\n.Btn:hover .text {\r\n\r\n opacity: 1;\r\n\r\n width: 70%;\r\n\r\n transition-duration: .3s;\r\n\r\n padding-right: 10px;\r\n\r\n}\r\n\r\n/* button click effect*/\r\n\r\n.Btn:active {\r\n\r\n transform: translate(2px ,2px);\r\n```\r\n\r\n###HTML code\r\n```html\r\n<button class='Btn'>\r\n <div class='sign'><svg viewBox='0 0 512 512'><path d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'></path></svg></div>\r\n <div class='text'>Click</div>\r\n</button>\r\n``` \r\n\r\n\r\n### CSS code\r\n```css\r\n.btn {\r\n\r\n font-size: 1.2rem;\r\n\r\n padding: 1rem 2.5rem;\r\n\r\n border: none;\r\n\r\n outline: none;\r\n\r\n border-radius: 0.4rem;\r\n\r\n cursor: pointer;\r\n\r\n text-transform: uppercase;\r\n\r\n background-color: rgb(14, 14, 26);\r\n\r\n color: rgb(234, 234, 234);\r\n\r\n font-weight: 700;\r\n\r\n transition: 0.6s;\r\n\r\n box-shadow: 0px 0px 60px #1f4c65;\r\n\r\n -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));\r\n\r\n}\r\n\r\n\r\n\r\n.btn:active {\r\n\r\n scale: 0.92;\r\n\r\n}\r\n\r\n\r\n\r\n.btn:hover {\r\n\r\n background: rgb(2,29,78);\r\n\r\n background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 60%);\r\n\r\n color: rgb(4, 4, 38);\r\n\r\n}\r\n```\r\n\r\n###HTML code\r\n```html\r\n<button class='btn'>\r\n Click me\r\n</button>\r\n```\r\n\r\n\r\n### CSS code\r\n```css\r\n.button {\r\n\r\n position: relative;\r\n\r\n font-size: 24px;\r\n\r\n font-weight: 600;\r\n\r\n padding: 15px 30px;\r\n\r\n color: #cfef00;\r\n\r\n background-color: transparent;\r\n\r\n border: 2px solid #cfef00;\r\n\r\n border-radius: 10px;\r\n\r\n cursor: pointer;\r\n\r\n transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);\r\n\r\n overflow: hidden;\r\n\r\n}\r\n\r\n\r\n\r\n.button::before {\r\n\r\n content: '';\r\n\r\n position: absolute;\r\n\r\n width: 100%;\r\n\r\n height: 100%;\r\n\r\n background: #cfef00;\r\n\r\n top: 0%;\r\n\r\n left: -100%;\r\n\r\n scale: 1;\r\n\r\n border-radius: inherit;\r\n\r\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\r\n\r\n}\r\n\r\n\r\n\r\n.button span {\r\n\r\n transition: all 0.7s;\r\n\r\n position: relative;\r\n\r\n overflow: hidden;\r\n\r\n}\r\n\r\n\r\n\r\n.button span::before {\r\n\r\n position: absolute;\r\n\r\n content: 'CLICK';\r\n\r\n top: 0;\r\n\r\n left: 0;\r\n\r\n color: #212121;\r\n\r\n width: 0;\r\n\r\n overflow: hidden;\r\n\r\n}\r\n\r\n\r\n\r\n.button:hover span::before {\r\n\r\n width: 100%;\r\n\r\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\r\n\r\n transition-delay: 0.4s;\r\n\r\n}\r\n\r\n\r\n\r\n.button:hover::before {\r\n\r\n scale: 1;\r\n\r\n top: 0%;\r\n\r\n left: 0%;\r\n\r\n}\r\n\r\n\r\n\r\n.button:hover {\r\n\r\n border-color: transparent;\r\n\r\n}\r\n\r\n\r\n\r\n.button:active {\r\n\r\n scale: 0.9;\r\n\r\n}\r\n```\r\n\r\n### HTML code\r\n```html\r\n<button class='button'>\r\n <span>CLICK</span>\r\n</button>\r\n```\r\n\r\n\r\n### CSS code\r\n```css\r\n.button {\r\n\r\n position: absolute;\r\n\r\n top: 50%;\r\n\r\n left: 50%;\r\n\r\n transform: translate(-50%, -50%)\r\n\r\n}\r\n\r\n\r\n\r\n.button a {\r\n\r\n display: block;\r\n\r\n height: 50px;\r\n\r\n width: 200px;\r\n\r\n background: #00b7ea;\r\n\r\n color: white;\r\n\r\n font: 17px/50px Helvetica, Verdana, sans-serif;\r\n\r\n text-decoration: none;\r\n\r\n text-align: center;\r\n\r\n text-transform: uppercase;\r\n\r\n -webkit-border-radius: 10px;\r\n\r\n -moz-border-radius: 10px;\r\n\r\n border-radius: 10px;\r\n\r\n -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\r\n\r\n -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\r\n\r\n box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\r\n\r\n background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);\r\n\r\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));\r\n\r\n background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);\r\n\r\n background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);\r\n\r\n background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);\r\n\r\n background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);\r\n\r\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );\r\n\r\n}\r\n\r\n\r\n\r\nb {\r\n\r\n background: #222;\r\n\r\n display: block;\r\n\r\n height: 40px;\r\n\r\n width: 180px;\r\n\r\n margin: -50px 0 0 10px;\r\n\r\n text-align: center;\r\n\r\n font: 12px/45px Helvetica, Verdana, sans-serif;\r\n\r\n color: #fff;\r\n\r\n position: absolute;\r\n\r\n z-index: -1;\r\n\r\n -webkit-border-radius: 5px;\r\n\r\n -moz-border-radius: 5px;\r\n\r\n border-radius: 5px;\r\n\r\n -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\r\n\r\n -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\r\n\r\n box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\r\n\r\n -webkit-transition: all 0.5s ease;\r\n\r\n -moz-transition: all 0.5s ease;\r\n\r\n -o-transition: all 0.5s ease;\r\n\r\n -ms-transition: all 0.5s ease;\r\n\r\n transition: all 0.5s ease;\r\n\r\n}\r\n\r\n\r\n\r\n.button a, b {\r\n\r\n -webkit-border-radius: 10px;\r\n\r\n -moz-border-radius: 10px;\r\n\r\n border-radius: 10px;\r\n\r\n -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\r\n\r\n -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\r\n\r\n box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\r\n\r\n}\r\n\r\n\r\n\r\n.button:hover .top {\r\n\r\n margin: -80px 0 0 10px;\r\n\r\n line-height: 35px;\r\n\r\n}\r\n\r\n\r\n\r\n.button:hover .bottom {\r\n\r\n margin: -10px 0 0 10px;\r\n\r\n}\r\n\r\n\r\n\r\n.button a:active {\r\n\r\n background: #00b7ea;\r\n\r\n background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%);\r\n\r\n background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));\r\n\r\n background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%);\r\n\r\n background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%);\r\n\r\n background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%);\r\n\r\n background: linear-gradient(top, #00b7ea 36%,#009ec3 100%);\r\n\r\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );\r\n\r\n}\r\n\r\n\r\n\r\n.button:active .bottom {\r\n\r\n margin: -20px 0 0 10px;\r\n\r\n}\r\n\r\n\r\n\r\n.button:active .top {\r\n\r\n margin: -70px 0 0 10px;\r\n\r\n}\r\n```\r\n\r\n### HTML code\r\n```html\r\n<div class='button'>\r\n <a href='#'>\u70b9\u51fb\u4e0b\u8f7d</a>\r\n <b class='top'>\u70b9\u51fb\u4e0b\u8f7d</b>\r\n <b class='bottom'>1.2MB .zip</b>\r\n</div>\r\n```\r\n\r\n\r\n### CSS code\r\n```css\r\n.button {\r\n\r\n font-size: 1rem;\r\n\r\n background-color: #F2E1C1 !important;\r\n\r\n transform: translateY(-0.10em);\r\n\r\n box-shadow: 3px 3px 0px rgba(55, 22, 22, 0.67);\r\n\r\n border: 1px solid rgba(55, 22, 22, 0.67);\r\n\r\n border-radius: 50px;\r\n\r\n padding: 0.75em 1.5em;\r\n\r\n transition: 0.2s;\r\n\r\n cursor: pointer;\r\n\r\n}\r\n\r\n\r\n\r\nbutton:hover {\r\n\r\n box-shadow: 4px 6px 0px rgba(55, 22, 22, 0.67);\r\n\r\n transform: translateY(-0.4em);\r\n\r\n}\r\n\r\n\r\n\r\nbutton:active {\r\n\r\n box-shadow: none;\r\n\r\n transform: translateY(0);\r\n\r\n}\r\n\r\n```\r\n\r\n### HTML code\r\n```html\r\n<button class='button'>\r\n Button\r\n</button>\r\n```\r\n\r\n## \u611f\u8c22\u9605\u8bfb\uff01\r\n_\u6536\u96c6\u4e0d\u6613\uff0c\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904_\u3002", "top": 0, "createdAt": 1722438531, "style": "", "script": "", "head": "", "ogImage": "https://enashpinal.pages.dev/touxiang.jpg", "createdDate": "2024-07-31", "dateLabelColor": "#bc4c00"}, "P9": {"htmlDir": "docs/post/\u3010-qian-duan-kai-fa-\u300e-yuan-chuang-\u300f\u3011-jian-dan-jing-zhi-de-yin-pin-bo-fang-qia-pian.html", "labels": ["\u524d\u7aef\u5f00\u53d1"], "postTitle": "\u3010\u524d\u7aef\u5f00\u53d1\u300e\u539f\u521b\u300f\u3011\u7b80\u5355\u7cbe\u81f4\u7684\u97f3\u9891\u64ad\u653e\u5361\u7247", "postUrl": "post/%E3%80%90-qian-duan-kai-fa-%E3%80%8E-yuan-chuang-%E3%80%8F%E3%80%91-jian-dan-jing-zhi-de-yin-pin-bo-fang-qia-pian.html", "postSourceUrl": "https://github.com/Enashpinal/enashpinal.github.io/issues/9", "commentNum": 0, "wordCount": 6443, "description": "# \u5b9e\u73b0\u6548\u679c\r\n\r\n\u4e00\u4e2a\u7b80\u5355\u7684\u97f3\u9891\u64ad\u653e\u5c0f\u5361\u7247\uff0c\u56fa\u5b9a\u5728\u7f51\u9875\u53f3\u4e0b\u89d2\u3002", "top": 0, "createdAt": 1722438870, "style": "", "script": "", "head": "", "ogImage": "https://enashpinal.pages.dev/touxiang.jpg", "createdDate": "2024-07-31", "dateLabelColor": "#bc4c00"}, "P10": {"htmlDir": "docs/post/\u3010-qian-duan-kai-fa-\u300e-yuan-chuang-\u300f\u3011-ji-xing-JavaScript-shi-xian-ping-hua-de-wang-ye-gun-dong.html", "labels": ["\u524d\u7aef\u5f00\u53d1", "\u6559\u7a0b"], "postTitle": "\u3010\u524d\u7aef\u5f00\u53d1\u300e\u539f\u521b\u300f\u3011\u51e0\u884cJavaScript\u5b9e\u73b0\u5e73\u6ed1\u7684\u7f51\u9875\u6eda\u52a8", "postUrl": "post/%E3%80%90-qian-duan-kai-fa-%E3%80%8E-yuan-chuang-%E3%80%8F%E3%80%91-ji-xing-JavaScript-shi-xian-ping-hua-de-wang-ye-gun-dong.html", "postSourceUrl": "https://github.com/Enashpinal/enashpinal.github.io/issues/10", "commentNum": 0, "wordCount": 5146, "description": "# \u6548\u679c\u5c55\u793a\r\n\r\n\u5177\u4f53\u6548\u679c\u53ef\u4ee5\u770b\u6211\u7684\u7f51\u7ad9\uff1ahttps://enashpinal.pages.dev\r\n\r\n# \u5b9e\u73b0\u8fc7\u7a0b\r\n\r\n## \u68c0\u6d4b\u9f20\u6807\u6eda\u52a8\r\n\u9996\u5148\uff0c\u6211\u4eec\u9700\u8981\u68c0\u6d4b\u4f60\u7684\u6eda\u52a8\u52a8\u4f5c\u3002", "top": 0, "createdAt": 1722440382, "style": "", "script": "", "head": "", "ogImage": "https://enashpinal.pages.dev/touxiang.jpg", "createdDate": "2024-07-31", "dateLabelColor": "#bc4c00"}, "P11": {"htmlDir": "docs/post/DeepL-zhen-de-shi-quan-shi-jie-zui-zhun-que-de-fan-yi-ma-\uff1f-zhu-liu-fan-yi-gong-ju-da-bi-pin-\uff01.html", "labels": ["\u6536\u96c6", "ChatGPT", "\u6d4b\u8bc4"], "postTitle": "DeepL\u771f\u7684\u662f\u5168\u4e16\u754c\u6700\u51c6\u786e\u7684\u7ffb\u8bd1\u5417\uff1f\u4e3b\u6d41\u7ffb\u8bd1\u5de5\u5177\u5927\u6bd4\u62fc\uff01", "postUrl": "post/DeepL-zhen-de-shi-quan-shi-jie-zui-zhun-que-de-fan-yi-ma-%EF%BC%9F-zhu-liu-fan-yi-gong-ju-da-bi-pin-%EF%BC%81.html", "postSourceUrl": "https://github.com/Enashpinal/enashpinal.github.io/issues/11", "commentNum": 1, "wordCount": 7664, "description": "\u6211\u9009\u53d6\u4e86\u5fae\u8f6f\u7ffb\u8bd1\u3001\u8c37\u6b4c\u7ffb\u8bd1\u3001DeepL\u7ffb\u8bd1\u3001\u6709\u9053\u7ffb\u8bd1\u3001\u767e\u5ea6\u7ffb\u8bd1\u548c\u641c\u72d7\u5728\u7ebf\u7ffb\u8bd1\uff0cChatGPT\u56e0\u4e3a\u592a\u5f3a\u4e86\uff0c\u6240\u4ee5\u4e0d\u53c2\u4e0e\ud83d\ude05\r\n\r\n\u6211\u7279\u610f\u641c\u96c6\u4e86\u4e00\u4e9b\u6bd4\u8f83\u62bd\u8c61\u7684\u53e5\u5b50\u8fdb\u884c\u4e25\u683c\u6d4b\u8bc4\uff0c\u6bcf\u6b21\u7ffb\u8bd1\u90fd\u4f1a\u4f7f\u7528ChatGPT\u8fdb\u884c\u8bc4\u5206\uff081~10\uff09\uff0c\u91cf\u5316\u540e\u9009\u51fa\u7efc\u5408\u8868\u73b0\u6700\u4f73\u7684\u7ffb\u8bd1\u5de5\u5177\u3002", "top": 0, "createdAt": 1722525493, "style": "", "script": "", "head": "", "ogImage": "https://enashpinal.pages.dev/touxiang.jpg", "createdDate": "2024-08-01", "dateLabelColor": "#bc4c00"}, "P12": {"htmlDir": "docs/post/\u3010-qian-duan-kai-fa-\u300e-jiao-cheng-\u300f\u3011CSS+HTML-xie-yi-ge-dong-tai-3D-xiao-qia-pian.html", "labels": ["\u524d\u7aef\u5f00\u53d1", "\u6559\u7a0b"], "postTitle": "\u3010\u524d\u7aef\u5f00\u53d1\u300e\u6559\u7a0b\u300f\u3011CSS+HTML\u5199\u4e00\u4e2a\u52a8\u60013D\u5c0f\u5361\u7247", "postUrl": "post/%E3%80%90-qian-duan-kai-fa-%E3%80%8E-jiao-cheng-%E3%80%8F%E3%80%91CSS%2BHTML-xie-yi-ge-dong-tai-3D-xiao-qia-pian.html", "postSourceUrl": "https://github.com/Enashpinal/enashpinal.github.io/issues/12", "commentNum": 0, "wordCount": 6771, "description": "#### \u672c\u6587\u4ec5\u8bb2\u89e3\u90e8\u5206\u4e3a\u539f\u521b\uff0c\u6837\u5f0f\u51fa\u81ea\uff1ahttps://uiverse.io/Smit-Prajapati/tricky-lionfish-78\r\n## \u6548\u679c\u5c55\u793a\r\n\r\n## \u5b9e\u73b0\u8fc7\u7a0b\r\n\r\n### \u7b2c\u4e00\u6b65\uff1aHTML \u7ed3\u6784\r\n\r\n\u6211\u4eec\u5148\u6765\u770b\u770b HTML \u4ee3\u7801\u3002", "top": 0, "createdAt": 1723523989, "style": "", "script": "", "head": "", "ogImage": "https://enashpinal.pages.dev/touxiang.jpg", "createdDate": "2024-08-13", "dateLabelColor": "#bc4c00"}}, "singeListJson": {}, "labelColorDict": {"ChatGPT": "#AAACCA", "MC\u670d\u52a1\u5668": "#0E8A16", "Minecraft": "#0E6155", "\u524d\u7aef\u5f00\u53d1": "#EB1940", "\u6536\u96c6": "#C6969F", "\u6559\u7a0b": "#763B07", "\u6d4b\u8bc4": "#5319e7"}, "displayTitle": "Enashpinal's Blog", "faviconUrl": "https://enashpinal.pages.dev/touxiang.jpg", "ogImage": "https://enashpinal.pages.dev/touxiang.jpg", "primerCSS": "<link href='https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/Primer/21.0.7/primer.css' rel='stylesheet' />", "homeUrl": "https://enashpinal.github.io", "prevUrl": "disabled", "nextUrl": "disabled"}