vue\u89c6\u9891\u80cc\u666f\u5728app\u4e2d\u5bfc\u5165html<\/p>\n\n\n\n
<div class=\"box\">\n <video autoplay loop muted=\"\" preload>\n <source src=\"..\/src\/components\/xgPlayer\/8c22afd58dec4d1fbb09b8603986a54e.mp4\">\n <\/video>\n<\/div><\/code><\/pre>\n\n\n\n\u5bfc\u5165css<\/p>\n\n\n\n
#app{\n \/*\u5176\u4ed6*\/\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n video {\n z-index: -9999;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n .m-content-display {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n }\n .m-router-view {\n flex: 1;\n }\n }<\/code><\/pre>\n\n\n\n\u65b0\u5efa\u4e00\u4e2a\u7279\u6548\u7ec4\u4ef6\u5728app\u5bfc\u5165<\/p>\n\n\n\n
<template>\n <div id=\"panel\">\n <\/div>\n<\/template>\n\n<script>\nexport default {\n methods: {\n mouseMove(e) {\n \/*\u8fd9\u91cc\u83b7\u53d6\u5143\u7d20\u8282\u70b9*\/\n let oPanel = document.getElementById(\"panel\");\n let oSpan = document.createElement(`span`);\n \/*\u6d4f\u89c8\u5668\u517c\u5bb9*\/\n e = e || window.Event;\n \/\/ let x = e.clientX;\n \/\/ let y = e.clientY;\n \/*\u83b7\u53d6\u76f8\u5173\u53c2\u6570*\/\n oSpan.style.left = e.clientX + `px`;\n oSpan.style.top = e.clientY - 50 + `px`;\n \/*\u8bbe\u5b9a\u968f\u673a\u6570\u5b58\u50a8\u5728size\u4e2d*\/\n let size = Math.random() * 20;\n \/*\u7ed9\u8282\u70b9\u8d4b\u503c\u53c2\u6570\u6570\u503c*\/\n oSpan.style.width = 5 + size + `px`;\n oSpan.style.height = 5 + size + `px`;\n \/*\u5728body\u4e2d\u6dfb\u52a0span\u6807\u7b7e*\/\n oPanel.appendChild(oSpan);\n \/*\u8bbe\u7f6e\u5b9a\u65f6\u5668 \u95f4\u9694\u65f6\u95f4\u4e3a2000\u6beb\u79d2*\/\n setTimeout(() => {\n \/*\u6e05\u9664ospan\u8282\u70b9*\/\n oSpan.remove();\n }, 1000);\n },\n },\n mounted() {\n \/*\u8fd9\u91cc\u662f\u7ed9\u6574\u4e2a\u9875\u9762\u6dfb\u52a0\u4e86\u4e00\u4e2a\u9f20\u6807\u79fb\u52a8\u7684\u76d1\u542c\u4e8b\u4ef6 e\u4e3a\u4e8b\u4ef6\u5bf9\u8c61*\/\n document.addEventListener(`mousemove`, this.mouseMove);\n },\n beforeDestroy() {\n document.removeEventListener(`mousemove`, this.mouseMove);\n },\n};\n<\/script>\n\n<style lang='less'>\n#panel {\n \/\/ height: 100vh;\n width: 100%;\n \/\/ display: flex;\n \/\/ align-items: center;\n \/\/ justify-content: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n span {\n width: 10px;\n height: 10px;\n background: #55b9f3;\n border-radius: 50%;\n position: absolute;\n box-shadow: 5px 5px 15px #489dcf, -5px -5px 15px #62d5ff;\n animation: blow 4s linear infinite;\n -webkit-animation: blow 4s linear infinite;\n }\n}\n\/*\u8fd9\u91cc\u662f\u5b9a\u4e49\u91cc\u4e00\u4e2a\u52a8\u753b\u6548\u679c*\/\n\n@keyframes blow {\n 0% {\n transform: translate(-50%, -50%);\n \/*\u8fd9\u91cc\u662f\u5b9a\u4e49\u521d\u59cb\u900f\u660e\u5ea6\u4e3a1*\/\n opacity: 1;\n \/*\n\t\u8fd9\u91cc\u662f\u521d\u59cb\u6ee4\u955c\u6548\u679c\n\t\u7ed9\u56fe\u50cf\u5e94\u7528\u8272\u76f8\u65cb\u8f6c\u3002\"angle\"\u4e00\u503c\u8bbe\u5b9a\u56fe\u50cf\u4f1a\u88ab\u8c03\u6574\u7684\u8272\u73af\u89d2\u5ea6\u503c\u3002\n\t\u503c\u4e3a0deg\uff0c\u5219\u56fe\u50cf\u65e0\u53d8\u5316\u3002\u82e5\u503c\u672a\u8bbe\u7f6e\uff0c\u9ed8\u8ba4\u503c\u662f0deg\u3002\n\t\u8be5\u503c\u867d\u7136\u6ca1\u6709\u6700\u5927\u503c\uff0c\u8d85\u8fc7360deg\u7684\u503c\u76f8\u5f53\u4e8e\u53c8\u7ed5\u4e00\u5708\u3002\n\t*\/\n filter: hue-rotate(0deg);\n \/*\u8fd9\u91cc\u662f\u6d4f\u89c8\u5668\u517c\u5bb9*\/\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n }\n\n 100% {\n \/*\n\t2D\u8f6c\u5316\n \t\u8fd9\u91cc\u662f\u4ece\u81ea\u8eab\u5411\u4e0a\u5e73\u79fb\n \t*\/\n transform: translate(-50%, -1000%);\n \/*\u8fd9\u91cc\u662f\u5b9a\u4e49\u7ed3\u675f\u65f6\u900f\u660e\u5ea6\u4e3a0*\/\n opacity: 0;\n \/*\n\t\u8fd9\u91cc\u662f\u7ed3\u675f\u6ee4\u955c\u6548\u679c\n\t\u7ed9\u56fe\u50cf\u5e94\u7528\u8272\u76f8\u65cb\u8f6c\u3002\"angle\"\u4e00\u503c\u8bbe\u5b9a\u56fe\u50cf\u4f1a\u88ab\u8c03\u6574\u7684\u8272\u73af\u89d2\u5ea6\u503c\u3002\n\t\u503c\u4e3a0deg\uff0c\u5219\u56fe\u50cf\u65e0\u53d8\u5316\u3002\u82e5\u503c\u672a\u8bbe\u7f6e\uff0c\u9ed8\u8ba4\u503c\u662f0deg\u3002\n\t\u8be5\u503c\u867d\u7136\u6ca1\u6709\u6700\u5927\u503c\uff0c\u8d85\u8fc7360deg\u7684\u503c\u76f8\u5f53\u4e8e\u53c8\u7ed5\u4e00\u5708\u3002\n\t*\/\n filter: hue-rotate(720deg);\n \/*\u8fd9\u91cc\u662f\u6d4f\u89c8\u5668\u517c\u5bb9*\/\n -webkit-transform: translate(-50%, -1000%);\n -moz-transform: translate(-50%, -1000%);\n -ms-transform: translate(-50%, -1000%);\n -o-transform: translate(-50%, -1000%);\n -webkit-filter: hue-rotate(720deg);\n }\n}\n<\/style>\n\n<\/code><\/pre>\n\n\n\n\u5b8c\u6210\u89c6\u9891\u52a8\u6001\u80cc\u666f<\/p>\n","protected":false},"excerpt":{"rendered":"
vue\u89c6\u9891\u80cc\u666f\u5728app\u4e2d\u5bfc\u5165html \u5bfc\u5165css \u65b0\u5efa\u4e00\u4e2a\u7279\u6548\u7ec4\u4ef6\u5728app\u5bfc\u5165 \u5b8c\u6210\u89c6\u9891\u52a8\u6001\u80cc\u666f<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[16,13],"tags":[12],"_links":{"self":[{"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=\/wp\/v2\/posts\/95"}],"collection":[{"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=95"}],"version-history":[{"count":2,"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=\/wp\/v2\/posts\/95\/revisions"}],"predecessor-version":[{"id":176,"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=\/wp\/v2\/posts\/95\/revisions\/176"}],"wp:attachment":[{"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=95"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=95"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}