字体修改
This commit is contained in:
parent
13f3a69173
commit
089956431f
@ -1 +1 @@
|
|||||||
{"viewportLoc":[0,0],"editorLastFloorId":"street01"}
|
{"viewportLoc":[0,0],"editorLastFloorId":"guangchang2"}
|
||||||
1
main.js
1
main.js
@ -492,7 +492,6 @@ main.prototype.selectButton = function (index) {
|
|||||||
main.prototype.importFonts = function (fonts) {
|
main.prototype.importFonts = function (fonts) {
|
||||||
if (!(fonts instanceof Array) || fonts.length == 0) return;
|
if (!(fonts instanceof Array) || fonts.length == 0) return;
|
||||||
var style = document.createElement("style");
|
var style = document.createElement("style");
|
||||||
style.type = "text/css";
|
|
||||||
var html = "";
|
var html = "";
|
||||||
fonts.forEach(function (font) {
|
fonts.forEach(function (font) {
|
||||||
html +=
|
html +=
|
||||||
|
|||||||
@ -1023,6 +1023,7 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
|
|||||||
],
|
],
|
||||||
"fonts": [
|
"fonts": [
|
||||||
"HATTEN",
|
"HATTEN",
|
||||||
|
"Verdana",
|
||||||
"number",
|
"number",
|
||||||
"pala",
|
"pala",
|
||||||
"simhei"
|
"simhei"
|
||||||
@ -1493,6 +1494,10 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
|
|||||||
"type": "setValue",
|
"type": "setValue",
|
||||||
"name": "item:fly",
|
"name": "item:fly",
|
||||||
"value": "1"
|
"value": "1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "insert",
|
||||||
|
"name": "强制横屏"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"shops": [
|
"shops": [
|
||||||
|
|||||||
BIN
project/fonts/Verdana.ttf
Normal file
BIN
project/fonts/Verdana.ttf
Normal file
Binary file not shown.
3013
project/plugins.js
3013
project/plugins.js
File diff suppressed because it is too large
Load Diff
701
styles.css
701
styles.css
@ -1,534 +1,585 @@
|
|||||||
html, body {
|
html,
|
||||||
margin: 0;
|
body {
|
||||||
padding: 0;
|
margin: 0;
|
||||||
width: 100%;
|
padding: 0;
|
||||||
height: 100%;
|
width: 100%;
|
||||||
background-color: #000;
|
height: 100%;
|
||||||
overflow: hidden;
|
background-color: #000;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#gameGroup {
|
#gameGroup {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mainTips {
|
#mainTips {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
z-index: 370;
|
z-index: 370;
|
||||||
}
|
}
|
||||||
|
|
||||||
#musicBtn {
|
#musicBtn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 3px;
|
bottom: 3px;
|
||||||
right: 3px;
|
right: 3px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 400;
|
z-index: 400;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#enlargeBtn {
|
#enlargeBtn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 3px;
|
bottom: 3px;
|
||||||
right: 34px;
|
right: 34px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 400;
|
z-index: 400;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startPanel {
|
#startPanel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 300;
|
z-index: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startTop {
|
#startTop {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
z-index: 350;
|
z-index: 350;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startTopProgressBar {
|
#startTopProgressBar {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 5%;
|
height: 5%;
|
||||||
margin: 0 5%;
|
margin: 0 5%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5%;
|
top: 5%;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
z-index: 15;
|
z-index: 15;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startTopProgress {
|
#startTopProgress {
|
||||||
width: 0%;
|
width: 0%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #666;
|
background-color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startTopLoadTips {
|
#startTopLoadTips {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.6em;
|
font-size: 0.6em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10%;
|
top: 10%;
|
||||||
left: 5%;
|
left: 5%;
|
||||||
z-index: 15;
|
z-index: 15;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startTopHint {
|
#startTopHint {
|
||||||
color: #66CCFF;
|
color: #66ccff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 5%;
|
left: 5%;
|
||||||
z-index: 15;
|
z-index: 15;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startBackground {
|
#startBackground {
|
||||||
position:absolute;
|
position: absolute;
|
||||||
top:50%;
|
top: 50%;
|
||||||
left:50%;
|
left: 50%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transform:translate(-50%,-50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: 260;
|
z-index: 260;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startLogo {
|
#startLogo {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 290;
|
z-index: 290;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-top: 8%;
|
margin-top: 8%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font: bold 0em STXingkai;
|
font: bold 0em STXingkai;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startTitle {
|
#startTitle {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 280;
|
z-index: 280;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startButtonGroup {
|
#startButtonGroup {
|
||||||
width: auto;
|
width: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
display: none;
|
display: none;
|
||||||
z-index: 310;
|
z-index: 310;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin-bottom: 5%;
|
margin-bottom: 5%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
padding: 15px 25px;
|
padding: 15px 25px;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
/* default value */
|
/* default value */
|
||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
opacity: 0.55;
|
opacity: 0.55;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
border: #FFFFFF 0px solid;
|
border: #ffffff 0px solid;
|
||||||
caret-color: #ffffff;
|
caret-color: #ffffff;
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startButtons {
|
#startButtons {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#levelChooseButtons {
|
#levelChooseButtons {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.startButton {
|
.startButton {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font:1.2rem "pala", sans-serif;
|
font: 1.2rem pala, sans-serif;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0px 0;
|
padding: 0px 0;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.onChoiceAnimate {
|
.onChoiceAnimate {
|
||||||
animation: onChoice 2s ease-in-out 0s infinite normal none running;
|
animation: onChoice 2s ease-in-out 0s infinite normal none running;
|
||||||
}
|
}
|
||||||
|
|
||||||
#floorMsgGroup {
|
#floorMsgGroup {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: none;
|
display: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
z-index: 230;
|
z-index: 230;
|
||||||
}
|
}
|
||||||
|
|
||||||
#logoLabel {
|
#logoLabel {
|
||||||
margin-top: 8%;
|
margin-top: 8%;
|
||||||
font: bold 3em STXingkai;
|
font: bold 3em STXingkai;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#versionLabel {
|
#versionLabel {
|
||||||
margin-top: -3%;
|
margin-top: -3%;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
#floorNameLabel {
|
#floorNameLabel {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
#statusBar {
|
#statusBar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
background: url(project/materials/ground.png) repeat;
|
background: url(project/materials/ground.png) repeat;
|
||||||
z-index: 185;
|
z-index: 185;
|
||||||
display: none;
|
display: none;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
}
|
}
|
||||||
#statusBar .status{
|
#statusBar .status {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.status img{
|
.status img {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-height: 1.6em;
|
max-height: 1.6em;
|
||||||
}
|
}
|
||||||
#statusBar span{
|
#statusBar span {
|
||||||
font: bold italic 1.1em Verdana;
|
font: bold italic 1.1em Verdana;
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
#statusBar p {
|
#statusBar p {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 60%;
|
width: 60%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: white;
|
color: white;
|
||||||
font: bold italic 1.1em Verdana;
|
font: bold italic 1.1em Verdana;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
#toolBar {
|
#toolBar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: url(project/materials/ground.png) repeat;
|
background: url(project/materials/ground.png) repeat;
|
||||||
z-index: 210;
|
z-index: 210;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
display: none;
|
display: none;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
}
|
}
|
||||||
#toolBar .tools{
|
#toolBar .tools {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
p#hard {
|
p#hard {
|
||||||
width: 6em;
|
width: 6em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: red;
|
color: red;
|
||||||
font: bold normal 1.1em "Arial Black";
|
font: bold normal 1.1em "Arial Black";
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 6px 6px 0;
|
margin: 0 6px 6px 0;
|
||||||
word-break: keep-all;
|
word-break: keep-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#poison, span#weak, span#curse, span#pickaxe, span#bomb, span#fly {
|
span#poison,
|
||||||
font-style: normal;
|
span#weak,
|
||||||
font-size: 1em;
|
span#curse,
|
||||||
|
span#pickaxe,
|
||||||
|
span#bomb,
|
||||||
|
span#fly {
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
p#name {
|
p#name {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gameCanvas {
|
.gameCanvas {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
#gif {
|
#gif {
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#gif2 {
|
#gif2 {
|
||||||
z-index: 90;
|
z-index: 90;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#gameDraw {
|
#gameDraw {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #000000;
|
background: #000000;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 185;
|
z-index: 185;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bg {
|
#bg {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
#event {
|
#event {
|
||||||
z-index: 30;
|
z-index: 30;
|
||||||
}
|
}
|
||||||
|
|
||||||
#hero {
|
#hero {
|
||||||
z-index: 40;
|
z-index: 40;
|
||||||
}
|
}
|
||||||
|
|
||||||
#event2 {
|
#event2 {
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
}
|
}
|
||||||
|
|
||||||
#fg {
|
#fg {
|
||||||
z-index: 60;
|
z-index: 60;
|
||||||
}
|
}
|
||||||
|
|
||||||
#damage {
|
#damage {
|
||||||
z-index: 65;
|
z-index: 65;
|
||||||
}
|
}
|
||||||
|
|
||||||
#animate {
|
#animate {
|
||||||
z-index: 70;
|
z-index: 70;
|
||||||
}
|
}
|
||||||
|
|
||||||
#curtain {
|
#curtain {
|
||||||
z-index: 125;
|
z-index: 125;
|
||||||
}
|
}
|
||||||
|
|
||||||
#ui {
|
#ui {
|
||||||
z-index: 140;
|
z-index: 140;
|
||||||
}
|
}
|
||||||
|
|
||||||
#data {
|
#data {
|
||||||
z-index: 170;
|
z-index: 170;
|
||||||
}
|
}
|
||||||
|
|
||||||
#inputDiv {
|
#inputDiv {
|
||||||
display: none;
|
display: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: rgba(127,127,127,0.6);
|
background: rgba(127, 127, 127, 0.6);
|
||||||
z-index: 2000
|
z-index: 2000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#inputDialog {
|
#inputDialog {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -55%);
|
transform: translate(-50%, -55%);
|
||||||
background: white;
|
background: white;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#inputMessage {
|
#inputMessage {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-left: 8%;
|
margin-left: 8%;
|
||||||
margin-right: 5%;
|
margin-right: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#inputBox {
|
#inputBox {
|
||||||
margin-left: 8%;
|
margin-left: 8%;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding: 5px 3px;
|
padding: 5px 3px;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
background: #F0F0F0;
|
background: #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#inputYes {
|
#inputYes {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
margin-left: 8%;
|
margin-left: 8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#inputNo {
|
#inputNo {
|
||||||
float:right;
|
float: right;
|
||||||
margin-right: 10%;
|
margin-right: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#_selector, ._uievent_selector {
|
#_selector,
|
||||||
animation: selector 2s ease-in-out 0s infinite normal none running;
|
._uievent_selector {
|
||||||
|
animation: selector 2s ease-in-out 0s infinite normal none running;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes selector {
|
@-webkit-keyframes selector {
|
||||||
0% { opacity: 0.95; }
|
0% {
|
||||||
50% { opacity: 0.55; }
|
opacity: 0.95;
|
||||||
100% { opacity: 0.95; }
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes selector {
|
@keyframes selector {
|
||||||
0% { opacity: 0.95; }
|
0% {
|
||||||
50% { opacity: 0.55; }
|
opacity: 0.95;
|
||||||
100% { opacity: 0.95; }
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#next {
|
#next {
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
border-bottom-width: 4px;
|
border-bottom-width: 4px;
|
||||||
border-bottom-style: solid;
|
border-bottom-style: solid;
|
||||||
border-right-width: 4px;
|
border-right-width: 4px;
|
||||||
border-right-style: solid;
|
border-right-style: solid;
|
||||||
-webkit-animation: next .5s ease-in-out alternate infinite;
|
-webkit-animation: next 0.5s ease-in-out alternate infinite;
|
||||||
animation: next .5s ease-in-out alternate infinite;
|
animation: next 0.5s ease-in-out alternate infinite;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
z-index: 169;
|
z-index: 169;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes next {
|
@-webkit-keyframes next {
|
||||||
100% {
|
100% {
|
||||||
transform: rotate(45deg) translate(-3px, -3px);
|
transform: rotate(45deg) translate(-3px, -3px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes next {
|
@keyframes next {
|
||||||
100% {
|
100% {
|
||||||
transform: rotate(45deg) translate(-3px, -3px);
|
transform: rotate(45deg) translate(-3px, -3px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#startImageBackgroundDiv {
|
#startImageBackgroundDiv {
|
||||||
display: none;
|
display: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startImageDiv {
|
#startImageDiv {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background: black;
|
background: black;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#startImageLogo {
|
#startImageLogo {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
max-height: 60%;
|
max-height: 60%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.startImageAnimation {
|
.startImageAnimation {
|
||||||
-webkit-animation: startImage 4s ease-in-out 1s alternate 1;
|
-webkit-animation: startImage 4s ease-in-out 1s alternate 1;
|
||||||
animation: startImage 4s ease-in-out 1s alternate 1;
|
animation: startImage 4s ease-in-out 1s alternate 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes startImage {
|
@-webkit-keyframes startImage {
|
||||||
0% { opacity: 0; }
|
0% {
|
||||||
60% { opacity: 1; }
|
opacity: 0;
|
||||||
100% { opacity: 0; }
|
}
|
||||||
|
60% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes startImage {
|
@keyframes startImage {
|
||||||
0% { opacity: 0; }
|
0% {
|
||||||
60% { opacity: 1; }
|
opacity: 0;
|
||||||
100% { opacity: 0; }
|
}
|
||||||
|
60% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.startImageDivAnimation {
|
.startImageDivAnimation {
|
||||||
-webkit-animation: startImageDivDisappear 2s ease-in-out 5s alternate 1;
|
-webkit-animation: startImageDivDisappear 2s ease-in-out 5s alternate 1;
|
||||||
animation: startImageDivDisappear 2s ease-in-out 5s alternate 1;
|
animation: startImageDivDisappear 2s ease-in-out 5s alternate 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes startImageDivDisappear {
|
@-webkit-keyframes startImageDivDisappear {
|
||||||
0% { opacity: 1 }
|
0% {
|
||||||
100% { opacity: 0 }
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes startImageDivDisappear {
|
@keyframes startImageDivDisappear {
|
||||||
0% { opacity: 1 }
|
0% {
|
||||||
100% { opacity: 0 }
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
#ui-editor {
|
#ui-editor {
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Fira Code;
|
font-family: Fira Code;
|
||||||
src: url(../src/fonts/FiraCode-Regular.ttf);
|
src: url(../src/fonts/FiraCode-Regular.ttf);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 注释下面这三行以开启抗锯齿 */
|
/* 注释下面这三行以开启抗锯齿 */
|
||||||
.anti-aliasing {
|
.anti-aliasing {
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning {
|
.warning {
|
||||||
transition: left cubic-bezier(0, 0.9, 1, 0.1) 2.5s;
|
transition: left cubic-bezier(0, 0.9, 1, 0.1) 2.5s;
|
||||||
-webkit-transition: left cubic-bezier(0, 0.9, 1, 0.1) 2.5s;
|
-webkit-transition: left cubic-bezier(0, 0.9, 1, 0.1) 2.5s;
|
||||||
animation: warning 1s linear 0s alternate infinite;
|
animation: warning 1s linear 0s alternate infinite;
|
||||||
-webkit-animation: warning 1s linear 0s alternate infinite;
|
-webkit-animation: warning 1s linear 0s alternate infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes warning {
|
@keyframes warning {
|
||||||
0 % { text-shadow: 0px 0px 9px rgba(255, 0, 0, 0.5), 0px 0px 6px rgb(129, 0, 0);}
|
0 % {
|
||||||
50 % { text-shadow: 0px 0px 30px rgba(255, 0, 0, 1), 0px 0px 6px rgb(129, 0, 0);}
|
text-shadow: 0px 0px 9px rgba(255, 0, 0, 0.5), 0px 0px 6px rgb(129, 0, 0);
|
||||||
100 % { text-shadow: 0px 0px 9px rgba(255, 0, 0, 0.5), 0px 0px 6px rgb(129, 0, 0);}
|
}
|
||||||
|
50 % {
|
||||||
|
text-shadow: 0px 0px 30px rgba(255, 0, 0, 1), 0px 0px 6px rgb(129, 0, 0);
|
||||||
|
}
|
||||||
|
100 % {
|
||||||
|
text-shadow: 0px 0px 9px rgba(255, 0, 0, 0.5), 0px 0px 6px rgb(129, 0, 0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit - keyframes warning {
|
@-webkit - keyframes warning {
|
||||||
0 % { text-shadow: 0px 0px 9px rgba(255, 0, 0, 0.5), 0px 0px 6px rgb(129, 0, 0);}
|
0 % {
|
||||||
50 % { text-shadow: 0px 0px 30px rgba(255, 0, 0, 1), 0px 0px 6px rgb(129, 0, 0);}
|
text-shadow: 0px 0px 9px rgba(255, 0, 0, 0.5), 0px 0px 6px rgb(129, 0, 0);
|
||||||
100 % { text-shadow: 0px 0px 9px rgba(255, 0, 0, 0.5), 0px 0px 6px rgb(129, 0, 0);}
|
}
|
||||||
|
50 % {
|
||||||
|
text-shadow: 0px 0px 30px rgba(255, 0, 0, 1), 0px 0px 6px rgb(129, 0, 0);
|
||||||
|
}
|
||||||
|
100 % {
|
||||||
|
text-shadow: 0px 0px 9px rgba(255, 0, 0, 0.5), 0px 0px 6px rgb(129, 0, 0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gameCanvas {
|
.gameCanvas {
|
||||||
transition: transform 1.5s ease-out;
|
transition: transform 1.5s ease-out;
|
||||||
-webkit-transition: transform 1.5s ease-out;
|
-webkit-transition: transform 1.5s ease-out;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user