UNPKG

yidao

Version:

yijing

github.com/840450999/yidao

840450999/yidao

12 lines (11 loc) • 3.87 kB
1
2
3
4
5
6
7
8
9
10
11
12
// Imports import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from "./node_modules/css-loader/dist/runtime/noSourceMaps.js"; import ___CSS_LOADER_API_IMPORT___ from "./node_modules/css-loader/dist/runtime/api.js"; import ___CSS_LOADER_GET_URL_IMPORT___ from "./node_modules/css-loader/dist/runtime/getUrl.js"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL("./bg.png", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); // Module ___CSS_LOADER_EXPORT___.push([module.id, ":root {\n --b-color: black;\n --a-color: black;\n --bg-color: #b59253;\n --ybg-color: #b59253;\n --yao-width: 2rem;\n --yao-height: 0.2rem;\n}\n\nbody {\n font-family: \"Reggae One\", cursive;\n font-weight: 600;\n color: var(--b-color);\n padding: 0;\n margin: 0;\n height: 100vh; \n /* background: var(--bg-color); */\n background: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + "), url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + "), var(--ybg-color); \n overflow-x: hidden;\n}\n\n@media screen and (max-width: 1000px) { \n .BaGua-content {\n display: flex;\n justify-content: center;\n width: 100%;\n height: 64vh;\n }\n .Ci-content {\n width: 100%;\n }\n}\n\n@media screen and (min-width: 1000px) {\n body{\n font-size: 1.3rem;\n }\n\n #app {\n position: relative;\n width: 30vw;\n height: 30vw;\n left: calc(50vw - 200px - 2rem - 350px);\n top: calc(50vh - 200px - 2rem - 60px);\n }\n .BaGua-content {\n width: calc(100vw - 700px);\n }\n .Ci-content {\n position: absolute;\n right: 0;\n top: 0;\n width: 700px;\n height: 100vh;\n }\n}\n\n.Ci-content {\n padding-left: 10px;\n background: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + "), url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + "), var(--ybg-color);\n}\n\n#app {\n transform: rotate(180deg);\n line-height: 1.7rem;\n}\n\n.g {\n display: inline-block;\n text-align: center;\n}\n\n.g-content {\n transition: 1s all;\n}\n\n.y0 { \n pointer-events: none;\n width: var(--yao-width);\n height: var(--yao-height);\n background: linear-gradient(90deg, var(--b-color) 40%, transparent 40%, transparent 60%, var(--b-color) 63%);\n margin-top: 4px;\n}\n\n.y1 { \n pointer-events: none;\n width: var(--yao-width);\n height: var(--yao-height);\n background: var(--b-color);\n margin-top: 4px;\n}\n\n.y01 {\n /* padding:10px 0; */\n}\n\n.y01 * {\n position: absolute;\n}\n\n.y01 .y1 {\n animation: y01 2s alternate infinite;\n}\n\n@keyframes y01 {\n 100% {\n opacity: 0;\n }\n}\n\n#ci {\n font-family: \"Reggae One\", cursive;\n font-weight: 600;\n text-indent: 2rem;\n color: var(--a-color);\n height: 100%;\n overflow: auto;\n}\n\n#ci * {\n animation: 1s ci;\n}\n\n@keyframes ci {\n 0% {\n color: transparent;\n }\n 100% {\n color: var(--a-color);\n }\n}\n\n.taiji {\n position: relative;\n transform: scale(0.1);\n transform-origin: 0 0;\n border-radius: 50%;\n width: 0px;\n height: 300px;\n border-left: 150px solid black;\n border-right: 150px solid #ffffff;\n background: radial-gradient(black, #ffffff);\n /* transition: all 12s; */\n}\n\n.taiji::after {\n content: \" \";\n position: absolute;\n margin-left: -75px;\n margin-top: 150px;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: 50px solid #ffffff;\n background: black;\n /* box-shadow: 0px 0px 40px 40px inset black; */\n /* position: relative; */\n}\n\n.taiji::before {\n content: \" \";\n position: absolute;\n display: inline-block;\n left: -75px;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: #ffffff;\n border: 50px solid black;\n /* transition: 2s all; */\n}\n", ""]); // Exports export default ___CSS_LOADER_EXPORT___;