{"id":1423,"date":"2019-09-29T23:25:00","date_gmt":"2019-09-29T15:25:00","guid":{"rendered":"https:\/\/www.develop-note.com\/blog\/?p=1423"},"modified":"2022-02-17T15:01:51","modified_gmt":"2022-02-17T07:01:51","slug":"2020ironman-svelte-custom-css","status":"publish","type":"post","link":"https:\/\/www.develop-note.com\/blog\/2019\/09\/29\/2020ironman-svelte-custom-css\/","title":{"rendered":"\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY28- \u904e\u5834\u52d5\u756b (\u4e94)"},"content":{"rendered":"

custom css<\/h1>\n

custom css \u662f\u5728\u5206\u4eab\u8a31\u591asvelte \u904e\u5834\u52d5\u756b<\/a>\u5f8c\u8981\u4ecb\u7d39\u7684\u4e3b\u984c\uff0c\u70ba\u4ec0\u9ebc\u8981\u5206\u4eab\u9019\u90e8\u5206\u5462\uff0c\u56e0\u70ba html \u8981\u756b\u9762\u591a\u6a23\u6027\u5c31\u8dd1\u4e0d\u6389 css \u7684\u63a7\u5236\uff0c\u7136\u800c svelte \u6709\u904e\u5834\u52d5\u756b\u9019\u500b\u51fd\u5f0f\u5eab\u5e6b\u5fd9\u900f\u904e\u63a7\u5236 css \u4f86\u9054\u5230\u904e\u5834\u52d5\u756b\u7684\u5448\u73fe\u7c21\u76f4\u6613\u5982\u53cd\u638c\uff0c\u63a5\u4e0b\u4f86\u5c31\u770b\u770b\u4eca\u65e5\u7684\u5167\u5bb9\u5427\u3002<\/p>\n

\u904e\u5834\u52d5\u756b\u8207 custom css<\/h2>\n

\u5728\u6628\u5929\u4e4b\u524d\u7684\u5206\u4eab\u904e\u5834\u52d5\u756b\u90fd\u662f\u76f4\u63a5\u4f7f\u7528 svelte \u5167\u5efa\u7684\u51fd\u793a\u5eab\u4f86\u5b8c\u6210\u7684\uff0c\u5982\u679c\u4eca\u5929\u60f3\u8981\u5ba2\u88fd\u5316\u52d5\u614b\u7684\u7d50\u679c\u662f\u5426\u53ef\u884c\u5462\uff0c\u7576\u7136\u9019\u662f\u8a31\u591a\u958b\u767c\u4eba\u54e1\u7684\u5fc3\u8072\uff0c\u800c svelte \u4e5f\u5305\u542b\u9019\u6a23\u7684\u5f48\u6027\uff0c\u6240\u4ee5\u63a5\u4e0b\u4f86\u5206\u4eab\u4e00\u4e0b\u5982\u4f55\u5728\u904e\u5834\u52d5\u756b\u4e2d\u900f\u904e custom css \u4f86\u5b8c\u6210\u9019\u500b\u9700\u6c42\u3002<\/p>\n

\u5982\u4f55\u5be6\u4f5c custom css \u5728\u904e\u5834\u52d5\u756b\u4e2d<\/h2>\n

\u4e00\u5982\u5f80\u6614\u7684\uff0c\u5343\u8a00\u842c\u8a9e\u4e0d\u5982\u4e00\u6bb5\u7a0b\u5f0f\u78bc\u4f86\u770b\uff0c\u8acb\u5927\u5bb6\u5148\u770b\u770b\u4e0b\u5217\u7684\u7a0b\u5f0f\u78bc\u3002<\/p>\n

<script>\n    import { elasticOut } from 'svelte\/easing';\n    let visible = true;\n\n    function spin(node, { duration }) {\n        return {\n            duration,\n            css: t => {\n                const eased = elasticOut(t);\n\n                return `\n                    transform: scale(${eased}) rotate(${eased * 1080}deg);\n                    color: hsl(\n                        ${~~(t * 360)},\n                        ${Math.min(100, 1000 - 1000 * t)}%,\n                        ${Math.min(50, 500 - 500 * t)}%\n                    );`\n            }\n        };\n    }\n<\/script>\n\n<style>\n    .centered {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%,-50%);\n    }\n\n    span {\n        position: absolute;\n        transform: translate(-50%,-50%);\n        font-size: 4em;\n    }\n<\/style>\n\n<label>\n    <input type="checkbox" bind:checked={visible}>\n    visible\n<\/label>\n\n{#if visible}\n    <div class="centered" in:spin="{{duration: 8000}}">\n        <span>transitions!<\/span>\n    <\/div>\n{\/if}<\/code><\/pre>\n
\u63a5\u4e0b\u4f86\u8aaa\u660e\u4e00\u4e0b\uff0c\u9019\u88e1\u7684spin\u9019\u65b9\u6cd5\u662f\u6211\u5011\u5b9a\u7fa9\u7684\u904e\u5834\u52d5\u756b\u7684\u51fd\u5f0f\uff0c\u900f\u904ein:spin<\/code>\u53ef\u4ee5\u5728visible\u70batrue\u6642\u9032\u5165spin<\/code>\u9019\u65b9\u6cd5\uff0c\u63a5\u8457\u6211\u5011\u53ef\u4ee5\u5728spin<\/code>\u5167\u6700\u5f8c\u7684return\u5167\u5bb9\u4e2d\u7684css<\/code>\u5c6c\u6027\u4f86\u514b\u5236\u5316\u7684css\u5448\u73fe\u51fa\u6211\u5011\u60f3\u8981\u7684\u6548\u679c\u3002\u9019\u65bc\u9019\u662f\u751a\u9ebc\u6548\u679c\uff0c\u5927\u5bb6\u53ef\u4ee5\u628a\u7a0b\u5f0f\u78bc\u8cbc\u5230svelte REPL<\/a>\u4e0a\u77a7\u77a7\u4e86\u3002<\/p>\n
\u5c0f\u7d50<\/h2>\n
\u4eca\u5929\u85c9\u7531\u904e\u5834\u52d5\u756b\u7684\u7bc4\u4f8b\u4ecb\u7d39\u7d66\u5927\u5bb6\u5982\u4f55\u900f\u904e\u904e\u5834\u52d5\u756b\u7684\u6a5f\u5236\u4f86\u5ba2\u88fd\u5316css\u6548\u679c\uff0c\u4f46\u662f\u6709\u4e9b\u904e\u5834\u52d5\u756b\u7528\u5ba2\u88fd\u5316css\u662f\u7121\u6cd5\u5b8c\u6210\u7684\uff0c\u660e\u5929\u518d\u8ddf\u5927\u5bb6\u4ecb\u7d39\u4e00\u4e0b\u5982\u4f55\u7528\u5ba2\u88fd\u5316\u7684javascript\u4f86\u8655\u7406\u904e\u5834\u52d5\u756b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
custom css custom css \u662f\u5728\u5206\u4eab\u8a31\u591asvelte \u904e\u5834\u52d5\u756b\u5f8c\u8981\u4ecb\u7d39\u7684\u4e3b\u984c\uff0c\u70ba\u4ec0\u9ebc\u8981\u5206\u4eab\u9019\u90e8 … <\/p>\n
\u95b1\u8b80\u5168\u6587\u3008\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY28- \u904e\u5834\u52d5\u756b (\u4e94)\u3009<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[160,79],"class_list":["post-1423","post","type-post","status-publish","format-standard","hentry","category-develop","tag-2019ironman","tag-svelte"],"_links":{"self":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/comments?post=1423"}],"version-history":[{"count":8,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1423\/revisions"}],"predecessor-version":[{"id":2997,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1423\/revisions\/2997"}],"wp:attachment":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/media?parent=1423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/categories?post=1423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/tags?post=1423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}