{"id":9477,"date":"2020-07-01T01:11:27","date_gmt":"2020-06-30T17:11:27","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=9477"},"modified":"2020-07-14T17:57:56","modified_gmt":"2020-07-14T09:57:56","slug":"css-var-improve-components","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2020\/07\/css-var-improve-components\/","title":{"rendered":"CSS\u53d8\u91cf\u5bf9JS\u4ea4\u4e92\u7ec4\u4ef6\u5f00\u53d1\u5e26\u6765\u7684\u63d0\u5347\u4e0e\u53d8\u9769"},"content":{"rendered":"<p>by <a href=\"https:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=9477\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=9477<\/a><br \/>\n\u672c\u6587\u6b22\u8fce\u5206\u4eab\u4e0e\u805a\u5408\uff0c\u5168\u6587\u8f6c\u8f7d\u5c31\u4e0d\u5fc5\u4e86\uff0c\u5c0a\u91cd\u7248\u6743\uff0c\u5708\u5b50\u5c31\u8fd9\u4e48\u5927\uff0c\u82e5\u6025\u7528\u53ef\u4ee5\u8054\u7cfb\u6388\u6743\u3002<\/p>\n<p><script>window.wxShareImgUrl = 'https:\/\/www.zhangxinxu.com\/study\/image\/share\/202004-love.png';<\/script><\/p>\n<h3>\u4e00\u3001CSS\u53d8\u91cf\u5e26\u6765\u7684\u8d28\u53d8<\/h3>\n<p>CSS\u53d8\u91cf\u5e26\u6765\u7684\u63d0\u5347\u7edd\u4e0d\u4ec5\u4ec5\u662f\u8282\u7ea6\u70b9CSS\u4ee3\u7801\uff0c\u4ee5\u53ca\u964d\u4f4eCSS\u5f00\u53d1\u548c\u7ef4\u62a4\u6210\u672c\u3002<\/p>\n<p>\u66f4\u91cd\u8981\u7684\u662f\uff0c\u628a\u7ec4\u4ef6\u4e2d\u4f17\u591a\u7684\u4ea4\u4e92\u5f00\u53d1\u4ece\u539f\u6765\u7684JS\u8f6c\u79fb\u5230\u4e86CSS\u4ee3\u7801\u4e2d\uff0c\u8ba9\u7ec4\u4ef6\u4ee3\u7801\u66f4\u7b80\u6d01\uff0c\u540c\u65f6\u8ba9\u89c6\u89c9\u8868\u73b0\u5b9e\u73b0\u66f4\u52a0\u7075\u6d3b\u4e86\u3002<\/p>\n<p>\u6211\u4eec\u901a\u8fc7\u51e0\u4e2a\u6848\u4f8b\u6765\u8bf4\u660e\u8fd9\u4e00\u53d8\u5316\u3002<\/p>\n<h3>\u4e8c\u3001\u7b80\u5316\u4e86JS\u5bf9DOM\u8bbe\u7f6e\u7684\u4ecb\u5165<\/h3>\n<h4>\u6848\u4f8b1\uff1aloading\u8fdb\u5ea6\u6548\u679c<\/h4>\n<p>\u4f8b\u5982\u5b9e\u73b0\u4e0b\u56fe\u6240\u793a\u7684\u53d8\u91cf\u6548\u679c\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201901\/2019-01-26_003635.png\" width=\"440\" height=\"280\" alt=\"\u5355\u6807\u7b7e\u4e0e\u53d8\u91cf\u5b9e\u73b0\u7684\u4e0a\u4f20\u8fdb\u5ea6\u6761\u6548\u679c\" class=\"alignnone size-medium\"><\/p>\n<p>\u5916\u9762\u6709\u4e00\u5c42\u80cc\u666f\u5c42\uff0c\u7136\u540e\u91cc\u9762\u6709\u8fdb\u5ea6\u6761\uff0c\u8fd8\u6709\u8fdb\u5ea6\u503c\u3002<\/p>\n<p>\u5728\u8fc7\u53bb\uff0c\u4f1a\u4f7f\u7528\u4e24\u5c42div\u5143\u7d20\uff0c\u7136\u540eJS\u53bb\u6539\u53d8\u91cc\u9762\u6709\u989c\u8272\u6761\u6761\u7684\u5bbd\u5ea6\uff0c\u540c\u65f6\u8bbe\u7f6e\u8fdb\u5ea6\u503c\u3002<\/p>\n<p>\u4e5f\u5c31\u662f\uff0cloading\u7684\u8fdb\u5ea6\u6548\u679c\u548c\u8fdb\u5ea6\u503c\u5168\u90e8\u90fd\u662fJS\u76f4\u63a5\u8bbe\u7f6e\u7684\uff0cJS\u540c\u65f6\u5bf9\u5e94\u591a\u4e2aHTML\u4fe1\u606f\u3002<\/p>\n<p>\u73b0\u5728\uff0c\u6709\u4e86CSS\u53d8\u91cf\uff0cJS\u6240\u505a\u7684\u5de5\u4f5c\u5c31\u975e\u5e38\u7b80\u5355\uff0c\u4ec5\u4ec5\u5728\u5bb9\u5668\u5143\u7d20\u4e0a\u8bbe\u7f6eloading\u8fdb\u5ea6\u503c\u5373\u53ef\uff0c\u5176\u4ed6\u4ec0\u4e48\u90fd\u4e0d\u9700\u8981\u505a\uff0c\u81f3\u4e8e\u6837\u5f0f\u8868\u73b0\uff0c\u6216\u8005\u8fdb\u5ea6\u503c\u5982\u4f55\u663e\u793a\uff0c\u5168\u90e8\u90fd\u662fCSS\u7684\u4e8b\u60c5\u3002<\/p>\n<p>\u76f8\u5173\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre>&lt;label&gt;\u56fe\u72471\uff1a&lt;\/label&gt;\r\n&lt;div class=\"bar\" style=\"--percent: 60;\"&gt;&lt;\/div&gt;\r\n&lt;label&gt;\u56fe\u72472\uff1a&lt;\/label&gt;\r\n&lt;div class=\"bar\" style=\"--percent: 40;\"&gt;&lt;\/div&gt;\r\n&lt;label&gt;\u56fe\u72473\uff1a&lt;\/label&gt;\r\n&lt;div class=\"bar\" style=\"--percent: 20;\"&gt;&lt;\/div&gt;<\/pre>\n<pre>.bar {\r\n    height: 20px; width: 300px;\r\n    background-color: #f5f5f5;\r\n}\r\n.bar::before {\r\n    display: block;\r\n    <span style=\"color:#cd0000;\">counter-reset: progress var(--percent);\r\n    content: counter(progress) '%\\2002';\r\n    width: calc(1% * var(--percent));<\/span>\r\n    color: #fff;\r\n    background-color: #2486ff;\r\n    text-align: right;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n}<\/pre>\n<p>\u53ef\u4ee5\u770b\u5230\uff0c\u6211\u4eec\u53ea\u9700\u8981\u4e00\u5c42div\u6807\u7b7e\uff0cDOM\u5c42\u7ea7\u7b80\u5355\u4e86\uff0c\u7136\u540e\uff0c\u9700\u8981\u4fee\u6539\u7684HTML\u53d8\u5316\u9879\u4ec5\u4ec5\u662f\u4e00\u4e2a<code>--percent<\/code>\u81ea\u5b9a\u4e49\u5c5e\u6027\u800c\u5df2\u3002<\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/201901\/css-var-progress-bar-demo.php\" rel=\"noopener\" target=\"_blank\">CSS\u767e\u5206\u6bd4\u53d8\u91cf\u4e0e\u8fdb\u5ea6\u6761demo<\/a><\/p>\n<h3>\u4e09\u3001CSS\u53d8\u91cf\u6210\u4e3a\u4e86CSS API\u63a5\u53e3<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202007\/js-after-css-var.jpg\" width=\"728\" height=\"278\" alt=\"CSS\u53d8\u91cf\u4e0eJS\u5de5\u5177\u4eba\" class=\"alignright size-medium\" \/><\/p>\n<p>\u8fc7\u53bb\u70b9\u51fb\u63d0\u793a\uff0c\u70b9\u51fb\u5207\u6362\u7b49\u6548\u679c\u90fd\u9700\u8981JS\u9488\u5bf9\u7279\u5b9a\u7684\u5143\u7d20\u8fdb\u884c\u6837\u5f0f\u8bbe\u7f6e\uff0c\u73b0\u5728\u6709\u4e86CSS\u53d8\u91cf\uff0c\u6211\u4eec\u53ea\u9700\u8981\u4e00\u6bb5\u975e\u5e38\u7b80\u5355\u7684\u901a\u7528\u7684\u5168\u5c40JS\u5c31\u53ef\u4ee5\u4e86\uff0c\u7136\u540eJS\u5c31\u53ef\u4ee5\u73a9\u800d\u81ea\u5df1\u5e94\u8be5\u73a9\u800d\u7684\u4e1c\u897f\uff0c\u5176\u4ed6\u6548\u679c\uff0c\u5168\u90e8\u4ea4\u7ed9CSS\u5904\u7406\u3002<\/p>\n<p>\u8fd9\u6bb5JS\u5982\u4e0b\uff1a<\/p>\n<pre><span style=\"color:green;\">\/**\r\n * @author zhangxinxu(.com)\r\n * @description \u70b9\u51fb\u9875\u9762\u4efb\u610f\u4f4d\u7f6e\uff0c\u6807\u8bb0\u5750\u6807\u4f4d\u7f6e\r\n *\/<\/span>\r\ndocument.addEventListener('mousedown', function (event) {\r\n    var target = event.target;\r\n    var body = document.body;\r\n    var html = document.documentElement;\r\n\r\n    <span style=\"color:green;\">\/\/ \u8bbe\u7f6e\u81ea\u5b9a\u4e49\u5c5e\u6027\u503c<\/span>\r\n    body.style.setProperty('--pagex', event.pageX);\r\n    body.style.setProperty('--pagey', event.pageY);\r\n\r\n    html.style.setProperty('--clientx', event.clientX);\r\n    html.style.setProperty('--clienty', event.clientY);\r\n    html.style.setProperty('--scrolly', window.pageYOffset);\r\n\r\n    target.style.setProperty('--offsetx', event.offsetX);\r\n    target.style.setProperty('--offsety', event.offsetY);\r\n    target.parentElement.style.setProperty('--target-width', target.clientWidth);\r\n    target.parentElement.style.setProperty('--target-height', target.clientHeight);\r\n    target.parentElement.style.setProperty('--target-left', target.offsetLeft);\r\n    target.parentElement.style.setProperty('--target-top', target.offsetTop);\r\n});<\/pre>\n<p>\u53ef\u4ee5\u770b\u5230\uff0cJavaScript\u4ee3\u7801\u518d\u4e5f\u4e0d\u8d1f\u8d23\u4efb\u4f55\u4e0e\u4ea4\u4e92\u884c\u4e3a\u76f8\u5173\u7684\u903b\u8f91\uff0c\u76f4\u63a5\u53d8\u6210\u4e86\u5de5\u5177\u4eba\uff0c\u4e00\u4e2a\u5355\u7eaf\u5730\u4f20\u9012\u70b9\u51fb\u5750\u6807\u4f4d\u7f6e\uff0c\u4ee5\u53ca\u70b9\u51fb\u5143\u7d20\u504f\u79fb\u548c\u5c3a\u5bf8\u4fe1\u606f\u7684\u5de5\u5177\u4eba\u3002<\/p>\n<p>CSS\u5f97\u5230\u4e86\u4ec0\u4e48\u5462\uff1f<\/p>\n<p>\u5f97\u5230\u4e86\u4e00\u4e2a\u5de8\u5927\u7684\u5b9d\u85cf\uff0c\u4e00\u4e2a\u968f\u65f6\u53ef\u4ee5\u62ff\u6765\u4f7f\u7528\u7684\u5b9d\u85cf\u3002<\/p>\n<p>\u6211\u60f3\u8981\u70b9\u51fb\u6309\u94ae\u7684\u65f6\u5019\u6709\u4ec0\u4e48\u82b1\u54e8\u7684\u53cd\u9988\uff0c\u6216\u8005\u70b9\u51fb\u9875\u9762\u7a7a\u767d\u4e5f\u6765\u4e2a\u521b\u610f\u7684\u4ea4\u4e92\u63d0\u793a\uff0c\u5b8c\u5168\u4e0d\u6210\u95ee\u9898\uff0c\u968f\u7528\u968f\u53d6\uff0c\u65e0\u6bd4\u65b9\u4fbf\uff0c\u65e0\u6bd4\u81ea\u7531\u3002<\/p>\n<p>\u53ef\u4ee5\u8bf4\uff0c\u4e0a\u9762\u8fd9\u6bb5JS\uff0c\u6216\u8005\u7c7b\u4f3c\u7684JS\u4ee3\u7801\u662f\u672a\u6765web\u5f00\u53d1\u7684\u6807\u914d\u3002<\/p>\n<p>\u6211\u4eec\u6765\u770b\u770b\u4e0a\u9762\u7684\u4ee3\u7801\u53ef\u4ee5\u5b9e\u73b0\u600e\u6837\u7684\u6548\u679c\u3002<\/p>\n<h4>\u6848\u4f8b2\uff1a\u6309\u94ae\u70b9\u51fb\u5708\u5708\u6548\u679c<\/h4>\n<p>\u70b9\u51fb\u6309\u94ae\u7684\u65f6\u5019\u6709\u4e2a\u5708\u5708\u653e\u5927\u7684\u6548\u679c\uff0c\u5708\u5708\u653e\u5927\u7684\u4e2d\u5fc3\u70b9\u5c31\u662f\u70b9\u51fb\u7684\u4f4d\u7f6e\u3002<\/p>\n<p>\u6548\u679c\u5982\u4e0bGIF\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202006\/button-click-piple.gif\" width=\"164\" height=\"62\" alt=\"\u70b9\u51fb\u6309\u94ae\u5149\u6ce2GIF\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u6838\u5fc3CSS\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre>.btn:not([disabled]):active::after {\r\n    transform: translate(-50%,-50%) scale(0);\r\n    opacity: .3;\r\n    transition: 0s;\r\n}\r\n.btn::after {\r\n    content: \"\";\r\n    display: block;\r\n    position: absolute;\r\n    width: 100%; height: 100%;\r\n    <span style=\"color:#cd0000;\">left: var(--x, 0); top: var(--y, 0);<\/span>\r\n    pointer-events: none;\r\n    background: radial-gradient(circle, currentColor 10%, transparent 10.01%) no-repeat 50%;\r\n    transform: translate(-50%,-50%) scale(10);\r\n    opacity: 0;\r\n    transition: transform .3s, opacity .8s;\r\n}<\/pre>\n<p><code>:active<\/code>\u65f6\u5019\u9690\u85cf\uff0c\u540c\u65f6\u8bbe\u7f6e\u8fc7\u6e21\u65f6\u95f4\u4e3a0\u3002\u4e8e\u662f\uff0c\u70b9\u51fb\u91ca\u653e\u7684\u65f6\u5019\uff0c\u5c31\u4f1a\u6709\u8fc7\u6e21\u6548\u679c\u3002<\/p>\n<p>\u5927\u5bb6\u53ef\u4ee5\u8bbf\u95ee\u8fd9\u4e2a\u5730\u5740\u8fdb\u884c\u4f53\u9a8c\uff1a<a href=\"https:\/\/xy-ui.codelabo.cn\/docs\/#\/xy-button\" rel=\"noopener\" target=\"_blank\">https:\/\/xy-ui.codelabo.cn\/docs\/#\/xy-button<\/a><\/p>\n<p><script src=\"\/study\/202006\/var.js\"><\/script><\/p>\n<h4>\u6848\u4f8b3\uff1a\u70b9\u51fb\u9875\u9762\u51fa\u73b0\u6587\u5b57\u6548\u679c<\/h4>\n<p>\u53c8\u4f8b\u5982\uff0c\u70b9\u51fb\u672c\u6587\u9875\u9762\u4efb\u610f\u4f4d\u7f6e\u90fd\u4f1a\u51fa\u73b0\u4e0b\u56fe\u6240\u793a\u7684\u63d0\u793a\u4fe1\u606f\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202006\/body-click-popup.gif\" width=\"200\" height=\"83\" alt=\"\u70b9\u51fb\u9875\u9762\u4f4d\u7f6e\u51fa\u73b0zhangxinxu.com\u63d0\u793a\" class=\"alignnone size-medium\" \/><\/p>\n<style>body:active::after {\n    transform: translate(-50%, -100%);\n    opacity: 0.5;\n    transition: 0s;\n    left: -999px;\n}\nbody::after {\n    content: 'zhangxinxu.com';\n    position:fixed;\n    z-index: 999;\n    left: calc(var(--clientx, -999) * 1px);\n    top: calc(var(--clienty, -999) * 1px);\n    transform: translate(-50%, calc(-100% - 20px));\n    opacity: 0;\n    transition: transform .3s, opacity .5s;\n}\n.yw-tab-tab {\n    position: relative;\n    display: flex;\n    max-width: 414px;\n    justify-content: space-between;\n    border-bottom: 1px solid #717678;\n    background-color: #fff;\n    margin: 30px auto;\n}\n.yw-tab-tab::before,\n.yw-tab-tab::after {\n    position: absolute;\n    width: calc(var(--target-width, 0) * 1px);\n    left: calc(var(--target-left, -299) * 1px);\n    color: #2a80eb;\n}\n.yw-tab-tab[style]::before,\n.yw-tab-tab[style]::after  {\n    content: '';\n}\n.yw-tab-tab::before {\n    background-color: currentColor;\n    height: calc(var(--target-height) * 1px);\n    mix-blend-mode: overlay;\n}\n.yw-tab-tab::after {\n    border-bottom: solid;    \n    bottom: -2px;\n    transition: left .2s, width .2s;\n}\n.yw-tab-a {\n    color: #717678;\n    text-decoration: none;\n    padding: 6px 0;\n}\n.yw-tab-a:hover {\n    text-decoration: none;\n}<\/style>\n<p>\u5c31\u662f\u4e0b\u9762\u4e0a\u9762\u90a3\u6bb5\u4e07\u80fd\u5de5\u5177\u4ebaJS\u52a0\u4e0b\u9762\u8fd9\u6bb5CSS\u5b9e\u73b0\u7684\uff1a<\/p>\n<pre>body:active::after {\r\n    transform: translate(-50%, -100%);\r\n    opacity: 0.5;\r\n    transition: 0s;\r\n    left: -999px;\r\n}\r\nbody::after {\r\n    content: 'zhangxinxu.com';\r\n    position:fixed;\r\n    z-index: 999;\r\n    left: calc(var(--clientx, -999) * 1px);\r\n    top: calc(var(--clienty, -999) * 1px);\r\n    transform: translate(-50%, calc(-100% - 20px));\r\n    opacity: 0;\r\n    transition: transform .3s, opacity .5s;\r\n}<\/pre>\n<h4>\u6848\u4f8b4\uff1a\u4e24\u4e2a\u6309\u94ae\u4e0b\u5212\u7ebf\u6ed1\u6765\u6ed1\u53bb\u6548\u679c<\/h4>\n<p>\u4ee5\u524d\uff0c\u4e0b\u56fe\u8fd9\u79cd\u70b9\u51fb\u9009\u9879\u5361\u6309\u94ae\uff0c\u7136\u540e\u4e0b\u5212\u7ebf\u6ed1\u6765\u6ed1\u53bb\uff0c\u5c3a\u5bf8\u8fd8\u53d8\u5316\u6548\u679c\uff0c\u4f7f\u7528\u7eafCSS\u5b9e\u73b0\u5f88\u8003\u9a8c\u529f\u529b\uff0c\u51e0\u4e4e99.99%\u7684\u5f00\u53d1\u90fd\u662f\u501f\u52a9JS\u53bb\u67e5\u8be2\u5bf9\u5e94DOM\u5143\u7d20\uff0c\u7136\u540e\u8bbe\u7f6e\u5bbd\u9ad8\u548c\u4f4d\u7f6e\u5b9e\u73b0\u7684\u4ea4\u4e92\u6548\u679c\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202007\/tab-switch.gif\" width=\"241\" height=\"63\" alt=\"\u9009\u9879\u5361\u6ed1\u6765\u6ed1\u53bb\u6548\u679c\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u73b0\u5728\uff0c\u6709\u4e86\u5de5\u5177\u4ebaJS\uff0c\u53ea\u9700\u8981\u4e00\u6bb5CSS\u5c31\u53ef\u4ee5\u641e\u5b9a\u4e86\uff0c\u751a\u81f3\u6587\u5b57\u7684\u9ad8\u4eae\u5207\u6362\u90fd\u53ef\u4ee5\u7eafCSS\u641e\u5b9a\uff0c\u5c31\u662f\u8fd9\u4e48\u795e\u5947\u3002<\/p>\n<p>\u4e0b\u9762\u8fd9\u91cc\u7684\u6548\u679c\u5c31\u662f\u5b9e\u73b0\u7684\u5b9e\u65f6\u6548\u679c\uff08\u82e5\u6ca1\u6709\u6548\u679c\uff0c\u8bf7\u8bbf\u95ee\u539f\u6587<span class=\"hidden\">\u5f20\u946b\u65ed https:\/\/www.zhangxinxu.com\/wordpress\/?p=9477<\/span>\uff09\uff1a<\/p>\n<p>\u70b9\u51fb\u4efb\u610f\u7684\u9009\u9879\u5361\u5143\u7d20\uff0c\u5c31\u53ef\u4ee5\u770b\u5230\u4e0b\u5212\u7ebf\u6ed1\u5230\u5bf9\u5e94\u4f4d\u7f6e\uff0c\u540c\u65f6\u6587\u5b57\u6709\u9ad8\u4eae\u7684\u6548\u679c\u3002<\/p>\n<div class=\"yw-tab-tab\"><a href=\"javascript:\" class=\"yw-tab-a\">QQ\u9605\u8bfb<\/a><a href=\"javascript:\" class=\"yw-tab-a\">\u8d77\u70b9\u8bfb\u4e66<\/a><a href=\"javascript:\" class=\"yw-tab-a\">\u7ea2\u8896\u8bfb\u4e66<\/a><a href=\"javascript:\" class=\"yw-tab-a\">\u98de\u8bfb\u514d\u8d39\u5c0f\u8bf4<\/a><\/div>\n<p>\u76f8\u5173\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre>&lt;div class=\"yw-tab-tab\"&gt; \r\n  &lt;a href=\"javascript:\" class=\"yw-tab-a\"&gt;QQ\u9605\u8bfb&lt;\/a&gt;\r\n  &lt;a href=\"javascript:\" class=\"yw-tab-a\"&gt;\u8d77\u70b9\u8bfb\u4e66&lt;\/a&gt;\r\n  &lt;a href=\"javascript:\" class=\"yw-tab-a\"&gt;\u7ea2\u8896\u8bfb\u4e66&lt;\/a&gt;\r\n  &lt;a href=\"javascript:\" class=\"yw-tab-a\"&gt;\u98de\u8bfb\u514d\u8d39\u5c0f\u8bf4&lt;\/a&gt;\r\n&lt;\/div&gt;<\/pre>\n<pre>.yw-tab-tab {\r\n    position: relative;\r\n    display: flex;\r\n    max-width: 414px;\r\n    justify-content: space-between;\r\n    border-bottom: 1px solid #717678;\r\n    background-color: #fff;\r\n    margin: 30px auto;\r\n}\r\n.yw-tab-tab::before,\r\n.yw-tab-tab::after {\r\n    position: absolute;\r\n    width: calc(var(--target-width, 0) * 1px);\r\n    left: calc(var(--target-left, -299) * 1px);\r\n    color: #2a80eb;\r\n}\r\n.yw-tab-tab[style]::before,\r\n.yw-tab-tab[style]::after  {\r\n    content: '';\r\n}\r\n.yw-tab-tab::before {\r\n    background-color: currentColor;\r\n    height: calc(var(--target-height) * 1px);\r\n    mix-blend-mode: overlay;\r\n}\r\n.yw-tab-tab::after {\r\n    border-bottom: solid;    \r\n    bottom: -2px;\r\n    transition: left .2s, width .2s;\r\n}\r\n.yw-tab-a {\r\n    color: #717678;\r\n    padding: 10px 0;\r\n}<\/pre>\n<p>\u5982\u679c\u662f\u79fb\u52a8\u7aef\u8bbf\u95ee\uff0c\u9700\u8981<code>mousedown<\/code>\u4e8b\u4ef6\u4fee\u6539\u6210<code>touchstart<\/code>\uff0c\u6211\u5c31\u61d2\u5f97\u8c03\u6574\u4e86\u3002<\/p>\n<h3>\u56db\u3001web\u7ec4\u4ef6\u7684\u5f88\u591aAPI\u63a5\u53e3\u53ef\u4ee5\u62dc\u62dc\u4e86<\/h3>\n<p>\u4ee5\u524dweb\u7ec4\u4ef6\u6709\u4e00\u4e2a\u4ec0\u4e48\u529f\u80fd\uff0c\u5c31\u65b0\u589e\u4e00\u4e2aAPI\u63a5\u53e3\uff0c\u770b\u4e0a\u53bb\u5f88\u5389\u5bb3\uff0c\u5b9e\u9645\u4e0a\uff0c\u52a0\u7740\u52a0\u7740\uff0cAPI\u8d8a\u6765\u8d8a\u591a\uff0c\u7ec4\u4ef6\u4e5f\u8d8a\u6765\u8d8a\u91cd\uff0c\u5b66\u4e60\u6210\u672c\u4e5f\u8d8a\u6765\u8d8a\u9ad8\uff0c\u6700\u540e\u8d70\u5411\u4e86\u6b7b\u80e1\u540c\uff0c\u53d8\u5f97\u7b28\u91cd\uff0c\u8fce\u6765\u4e86\u706d\u4ea1\u3002<\/p>\n<p>\u73b0\u5728\uff0c\u53ef\u4ee5\u6539\u53d8\u601d\u8def\u4e86\u3002<\/p>\n<p>\u90a3\u4e9b\u4e0e\u4ea4\u4e92\u8868\u73b0\u5bc6\u5207\u76f8\u5173\u7684\u529f\u80fd\uff0c\u4e8b\u5b9e\u4e0a\u4ec5\u4ec5\u5728\u7ec4\u4ef6\u5bb9\u5668\u5143\u7d20\u4e0a\u4f20\u9012CSS\u81ea\u5b9a\u4e49\u5c5e\u6027\u5c31\u53ef\u4ee5\u4e86\uff0c\u65e0\u9700\u8d1f\u8d23\u5177\u4f53\u7684\u5b9a\u4f4d\uff0c\u663e\u9690\uff0c\u6216\u8005\u6837\u5f0f\u53d8\u5316\uff0c\u5168\u90e8\u4ea4\u7ed9CSS\u3002<\/p>\n<p>\u56e0\u4e3a\u8bbe\u8ba1\u8868\u73b0\u7684\u4e1c\u897f\u662f\u4e0a\u5c42\u7684\uff0c\u7075\u6d3b\u7684\uff0c\u4e2a\u6027\u7684\uff0c\u5e94\u8be5\u5728CSS\u5c42\u9762\u8fdb\u884c\u9a7e\u9a6d\u624d\u662f\u5408\u7406\u7684\uff0c\u5339\u914d\u7684\u3002<\/p>\n<p>\u4f8b\u5982\u4e0a\u9762\u63d0\u5230\u7684loading\u7ec4\u4ef6\uff0c\u65e0\u8bba\u662f\u6761\u72b6\u7684\u8fd8\u662f\u997c\u72b6\u7684\u90fd\u662f\u8fd9\u6837\u7684\u5904\u7406\u903b\u8f91\uff0c\u53ea\u8d1f\u8d23\u4f20\u9012\u8fdb\u5ea6\u503c\uff0c\u6837\u5f0f\u65e0\u9700\u5173\u5fc3\u3002<\/p>\n<p>\u53c8\u4f8b\u5982\u6ed1\u6761\u6846\uff08\u5982\u4e0b\u56feAnt Design\u4e2d\u7684\u6ed1\u6761\u7684\u4f4d\u7f6e\u548c\u63d0\u793a\u6548\u679c\uff09\u3001popup\u63d0\u793a\u6846\u7b49\u90fd\u53ef\u4ee5\u901a\u8fc7\u4e00\u4e2aCSS\u81ea\u5b9a\u4e49\u5c5e\u6027\u5b8c\u6210\uff0cJS\u4ec5\u9700\u8981\u628aCSS\u65e0\u6cd5\u83b7\u53d6\u7684\u6570\u636e\u4f20\u9012\u5230\u7956\u5148\u5143\u7d20\u4e0a\uff0c\u4e0d\u9700\u8981\u8d1f\u8d23UI\u6837\u5f0f\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202007\/2020-07-01_005628.png\" width=\"303\" height=\"151\" alt=\"\u6ed1\u6761\u6846\u6548\u679c\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u5b9e\u5728\u592a\u665a\u4e86\uff0c\u5df2\u7ecf0:56\u4e86\uff0c\u6211\u5c31\u4e0d\u51fademo\u6f14\u793a\u4e86\uff0c\u5927\u5bb6\u9886\u4f1a\u53bb\u7cbe\u795e\u5373\u53ef\u3002<\/p>\n<h3>\u4e94\u3001\u7ed3\u8bed<\/h3>\n<p>\u7ed3\u8bed\u4e2a\u9b3c\u5927\u5934\u554a\uff0c\u773c\u775b\u90fd\u7741\u4e0d\u5f00\u4e86\u3002<\/p>\n<p>\u603b\u4e4b\uff0c\u4ea4\u4e92\u5f00\u53d1\u5b9e\u73b0\u7684\u601d\u8def\u53ef\u4ee5\u53d1\u5c55\u8f6c\u53d8\u4e86\uff0cCSS\u53d8\u91cf\uff0c\u771f\u9999\uff01<\/p>\n<p>\u611f\u8c22\u9605\u8bfb\uff0c\u6b22\u8fce\u5206\u4eab\uff01<\/p>\n<p>\u7136\u540e\u884c\u6587\u5306\u5fd9\uff0c\u8ff7\u8ff7\u7cca\u7cca\u4e0b\u7801\u7684\u5b57\uff0c\u5982\u6709\u9519\u8bef\uff0c\u6b22\u8fce\u6307\u6b63\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/emtion\/emoji\/1f61d.svg\" width=\"20\" height=\"20\" align=\"absmiddle\"><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u6b22\u8fce\u5206\u4eab\uff0c\u52ff\u5168\u6587\u8f6c\u8f7d\uff0c\u5982\u679c\u5b9e\u5728\u559c\u6b22\uff0c\u53ef\u6536\u85cf\uff0c\u6c38\u4e0d\u8fc7\u671f\uff0c\u4e14\u4f1a\u53ca\u65f6\u66f4\u65b0\u77e5\u8bc6\u70b9\u53ca\u4fee\u6b63\u9519\u8bef\uff0c\u9605\u8bfb\u4f53\u9a8c\u4e5f\u66f4\u597d\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=9477\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=9477<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202007\/cover-css-var-js.png\" width=\"160\" height=\"107\" alt=\"CSS\u53d8\u91cf\u4e0e\u7ec4\u4ef6\u5f00\u53d1\" class=\"alignright size-medium\" loading=\"lazy\" \/><\/p>\n<p>CSS\u53d8\u91cf\u5e26\u6765\u7684\u63d0\u5347\u7edd\u4e0d\u4ec5\u4ec5\u662f\u8282\u7ea6\u70b9CSS\u6210\u672c\uff0c\u5176\u53ef\u4ee5\u98a0\u8986\u76ee\u524dJS\u7ec4\u4ef6\u4ea4\u4e92\u5f00\u53d1\u7684\u601d\u8def\uff0c\u628a\u539f\u6765\u7684JS\u8d1f\u8d23\u7684UI\u5c42\u7684\u4e1c\u897f\u5168\u90e8\u8f6c\u79fb\u5230\u4e86CSS\u5c42\uff0c\u7ec4\u4ef6\u4ee3\u7801\u66f4\u7b80\u6d01\uff0c\u89c6\u89c9\u8868\u73b0\u5b9e\u73b0\u66f4\u7075\u6d3b\uff0c\u672c\u6587\u4f1a\u4e3e\u82e5\u5e72\u4f8b\u5b50\u5c55\u793a\u8fd9\u79cd\u63d0\u5347\u4e0e\u53d8\u9769\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[971,1561,1506,1542,1635,31],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/9477"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=9477"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/9477\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=9477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=9477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=9477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}