wc-lantern
Version:
[](https://www.webcomponents.org/element/wibus-wee/lantern-element) [](https://www.npmjs.com/package/wc-lant
114 lines (113 loc) • 6.82 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "src/index.ts",
"declarations": [
{
"kind": "class",
"description": "A Lantern Component",
"name": "LanternElement",
"members": [
{
"kind": "field",
"name": "styles",
"static": true,
"default": "css`\n \n @media only screen and (max-width: 768px) {\n .moblieNo{\n display: none;\n }\n }\n\n .lantern-box0 {\n position: fixed;\n top: -40px;\n right: -20px;\n z-index: 999;\n }\n \n .lantern-box1 {\n position: fixed;\n top: -30px;\n right: 10px;\n z-index: 999;\n }\n \n .push-left {\n right: auto;\n float: left;\n }\n .lantern-box1 .lantern {\n position: relative;\n width: 120px;\n height: 90px;\n margin: 50px;\n background: #d8000f;\n background: rgba(216, 0, 15, 0.8);\n border-radius: 50% 50%;\n -webkit-transform-origin: 50% -100px;\n -webkit-animation: swing 5s infinite ease-in-out;\n box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);\n }\n \n .lantern {\n position: relative;\n width: 120px;\n height: 90px;\n margin: 50px;\n background: #d8000f;\n background: rgba(216, 0, 15, 0.8);\n border-radius: 50% 50%;\n -webkit-transform-origin: 50% -100px;\n -webkit-animation: swing 3s infinite ease-in-out;\n box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);\n }\n \n .lantern-a {\n width: 100px;\n height: 90px;\n background: #d8000f;\n background: rgba(216, 0, 15, 0.1);\n margin: 12px 8px 8px 10px;\n border-radius: 50% 50%;\n border: 2px solid #dc8f03;\n }\n \n .lantern-b {\n width: 45px;\n height: 90px;\n background: #d8000f;\n background: rgba(216, 0, 15, 0.1);\n margin: -4px 8px 8px 26px;\n border-radius: 50% 50%;\n border: 2px solid #dc8f03;\n }\n \n .xian {\n position: absolute;\n top: -20px;\n left: 60px;\n width: 2px;\n height: 20px;\n background: #dc8f03;\n }\n \n .shui-a {\n position: relative;\n width: 5px;\n height: 20px;\n margin: -5px 0 0 59px;\n -webkit-animation: swing 4s infinite ease-in-out;\n -webkit-transform-origin: 50% -45px;\n background: #ffa500;\n border-radius: 0 0 5px 5px;\n }\n \n .shui-b {\n position: absolute;\n top: 14px;\n left: -2px;\n width: 10px;\n height: 10px;\n background: #dc8f03;\n border-radius: 50%;\n }\n \n .shui-c {\n position: absolute;\n top: 18px;\n left: -2px;\n width: 10px;\n height: 35px;\n background: #ffa500;\n border-radius: 0 0 0 5px;\n }\n \n .lantern:before {\n position: absolute;\n top: -7px;\n left: 29px;\n height: 12px;\n width: 60px;\n content: \" \";\n display: block;\n z-index: 999;\n border-radius: 5px 5px 0 0;\n border: solid 1px #dc8f03;\n background: #ffa500;\n background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);\n }\n \n .lantern:after {\n position: absolute;\n bottom: -7px;\n left: 10px;\n height: 12px;\n width: 60px;\n content: \" \";\n display: block;\n margin-left: 20px;\n border-radius: 0 0 5px 5px;\n border: solid 1px #dc8f03;\n background: #ffa500;\n background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);\n }\n \n .lantern-t {\n font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;\n font-size: 3.2rem;\n color: #dc8f03;\n font-weight: bold;\n line-height: 85px;\n text-align: center;\n }\n \n .night .lantern-t, \n .night .lantern-box0, \n .night .lantern-box1 {\n background: transparent !important;\n }\n \n @-moz-keyframes swing {\n 0% {\n -moz-transform: rotate(-10deg)\n }\n \n 50% {\n -moz-transform: rotate(10deg)\n }\n \n 100% {\n -moz-transform: rotate(-10deg)\n }\n }\n \n @-webkit-keyframes swing {\n 0% {\n -webkit-transform: rotate(-10deg)\n }\n \n 50% {\n -webkit-transform: rotate(10deg)\n }\n \n 100% {\n -webkit-transform: rotate(-10deg)\n }\n }\n `"
},
{
"kind": "field",
"name": "text",
"type": {
"text": "string"
},
"default": "'春,节'",
"description": "The text on lantern，use `,` to divide the text"
},
{
"kind": "field",
"name": "number",
"type": {
"text": "number"
},
"default": "2",
"description": "The number of lanterns returned, up to 2"
},
{
"kind": "field",
"name": "displayMobile",
"type": {
"text": "boolean"
},
"default": "false",
"description": "display on moblie (very not recommended)"
},
{
"kind": "field",
"name": "disPlayBoth",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether to display left or right; otherwise, the output will be based on the 'position' field"
},
{
"kind": "field",
"name": "position",
"type": {
"text": "string"
},
"default": "'right'",
"description": "The position of the lantern, left or right"
},
{
"kind": "method",
"name": "loopRender",
"privacy": "private",
"parameters": [
{
"name": "i",
"type": {
"text": "number"
}
},
{
"name": "position",
"type": {
"text": "string"
}
}
]
},
{
"kind": "method",
"name": "sliceName",
"privacy": "private"
},
{
"kind": "method",
"name": "render"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "LanternElement",
"declaration": {
"name": "LanternElement",
"module": "src/index.ts"
}
}
]
}
]
}