You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
545 lines
19 KiB
545 lines
19 KiB
/* 格式化 */
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "微软雅黑";
|
|
font-size: 12px;
|
|
color: #000;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
span,
|
|
p,
|
|
ul,
|
|
li,
|
|
table,
|
|
tr,
|
|
td,
|
|
input,
|
|
a,
|
|
dl,
|
|
dt,
|
|
dd {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-decoration: none;
|
|
list-style: none;
|
|
text-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px;
|
|
}
|
|
|
|
img {
|
|
vertical-align: top;
|
|
border: none
|
|
}
|
|
|
|
#jg {
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.drag {
|
|
width: 90%;
|
|
padding: 30px 0;
|
|
background-color: rgb(255, 255, 255);
|
|
border: 8px dashed rgb(0, 0, 0, .3);
|
|
border-radius: 50px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.img_box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.img_box img {
|
|
max-width: 180px;
|
|
max-height: 180px;
|
|
min-width: 80px;
|
|
|
|
}
|
|
|
|
.img_one {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 2px;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.img_one .type {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 0 0 20px 0;
|
|
display: inline;
|
|
min-width: 20px;
|
|
padding: 0 10px;
|
|
text-align: center;
|
|
backdrop-filter: saturate(180%) blur(3px);
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
font-weight: 900;
|
|
}
|
|
|
|
.img_one .type.jpeg,
|
|
.img_one .type.jpg {
|
|
color: rgb(77, 77, 255);
|
|
}
|
|
|
|
.img_one .type.gif {
|
|
color: rgb(77, 208, 255);
|
|
}
|
|
|
|
.img_one .type.png {
|
|
color: rgb(77, 255, 148);
|
|
}
|
|
|
|
.img_one .type.webp {
|
|
color: rgb(160, 255, 77);
|
|
}
|
|
|
|
.img_one .type.svg {
|
|
color: rgb(246, 255, 77);
|
|
}
|
|
|
|
.img_one .type.ico {
|
|
color: rgb(255, 130, 77);
|
|
}
|
|
|
|
.img_one .type.bmp {
|
|
color: rgb(255, 89, 77);
|
|
}
|
|
|
|
.img_one .size {
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: 100%;
|
|
backdrop-filter: saturate(180%) blur(10px);
|
|
background-color: rgba(0, 0, 0, 0.38);
|
|
color: #fff;
|
|
bottom: 0;
|
|
left: 0
|
|
}
|
|
|
|
|
|
.download_but {
|
|
width: 90%;
|
|
padding: 14px;
|
|
margin: 20px auto;
|
|
background-color: rgb(55, 78, 255);
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
border-radius: 100px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.download_but:hover {
|
|
opacity: .9;
|
|
}
|
|
|
|
.drag:hover {
|
|
opacity: .8;
|
|
}
|
|
|
|
.con {}
|
|
|
|
.p1 {
|
|
font-size: 100px;
|
|
line-height: 100px;
|
|
height: 100px;
|
|
font-weight: 900;
|
|
opacity: .3;
|
|
}
|
|
|
|
.p2 {
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
padding: 25px 0;
|
|
text-align: center;
|
|
font-weight: 900;
|
|
}
|
|
.p2 h1, .p2 h2{
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
}
|
|
|
|
|
|
.p2 label {
|
|
font-size: 14px;
|
|
}
|
|
|
|
#files {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
@keyframes ggg {
|
|
100% {
|
|
background-position: 100%;
|
|
}
|
|
}
|
|
|
|
body.ondragover .ready {
|
|
display: flex
|
|
}
|
|
|
|
.ready {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 100;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
backdrop-filter: saturate(180%) blur(10px);
|
|
color: #fff;
|
|
font-size: 22px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 10px solid transparent;
|
|
box-sizing: border-box;
|
|
background:
|
|
linear-gradient(rgb(55, 78, 255),
|
|
rgba(55, 78, 255, 1)) padding-box,
|
|
repeating-linear-gradient(-45deg,
|
|
black 0, rgba(55, 78, 255, .8) 25%,
|
|
white 0, white 50%) 0/1em 1em;
|
|
animation: ggg 12s linear infinite;
|
|
opacity: .8;
|
|
display: none;
|
|
}
|
|
|
|
.ready p {
|
|
font-size: 80px;
|
|
text-align: center;
|
|
line-height: 100px;
|
|
}
|
|
|
|
#can {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* --------------------------------------------- */
|
|
#loading {
|
|
display: none;
|
|
zoom: 6;
|
|
}
|
|
|
|
select {
|
|
height: 30px;
|
|
font-size: 15px;
|
|
background-color: #fff;
|
|
border: 2px solid rgb(55, 78, 255);
|
|
border-left: 5px solid rgb(55, 78, 255);
|
|
padding: 0 10px;
|
|
|
|
}
|
|
[type=checkbox] {
|
|
zoom:2;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
.viewInGithub {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* --------------------------------------------- */
|
|
/* 烟花 - from https://codepen.io/yshlin/pen/ylDEk */
|
|
.pyro>.before,
|
|
.pyro>.after {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
|
|
|
|
animation: 1s bang ease-out 3 backwards, 1s gravity ease-in 3 backwards, 5s position linear 3 backwards;
|
|
|
|
/* animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; */
|
|
}
|
|
|
|
.pyro>.after {
|
|
-moz-animation-delay: 1.25s, 1.25s, 1.25s;
|
|
-webkit-animation-delay: 1.25s, 1.25s, 1.25s;
|
|
-o-animation-delay: 1.25s, 1.25s, 1.25s;
|
|
-ms-animation-delay: 1.25s, 1.25s, 1.25s;
|
|
animation-delay: 1.25s, 1.25s, 1.25s;
|
|
-moz-animation-duration: 1.25s, 1.25s, 6.25s;
|
|
-webkit-animation-duration: 1.25s, 1.25s, 6.25s;
|
|
-o-animation-duration: 1.25s, 1.25s, 6.25s;
|
|
-ms-animation-duration: 1.25s, 1.25s, 6.25s;
|
|
animation-duration: 1.25s, 1.25s, 6.25s;
|
|
}
|
|
|
|
@-webkit-keyframes bang {
|
|
to {
|
|
box-shadow: -234px -283.6666666667px #ff0900, 21px -260.6666666667px #5eff00, -203px -141.6666666667px #ff00bf, 120px -228.6666666667px #ff00b7, 103px 11.3333333333px #ff9900, -14px -414.6666666667px #ff009d, -186px -1.6666666667px #00eaff, 217px -114.6666666667px #ff0095, 111px -407.6666666667px #bf00ff, 71px 42.3333333333px #d5ff00, -189px 37.3333333333px #ff00e1, 185px -301.6666666667px #1eff00, 141px -400.6666666667px #ff8400, 129px -290.6666666667px #ffc800, 92px 45.3333333333px #ff0077, -137px -72.6666666667px #fff700, 171px -383.6666666667px #e6ff00, -238px -1.6666666667px #00ffaa, -8px -99.6666666667px #4dff00, -37px -329.6666666667px #ff6f00, 208px -221.6666666667px #00fffb, -75px -209.6666666667px #007bff, -140px -45.6666666667px #09ff00, 85px -125.6666666667px #0d00ff, 234px -238.6666666667px #09ff00, 104px -156.6666666667px #ff00d5, 213px -225.6666666667px #ff0055, -8px -360.6666666667px #00ffbf, -71px 75.3333333333px #ff0062, -129px -124.6666666667px #ff0033, 212px 47.3333333333px #d000ff, 19px -248.6666666667px #ff00ae, 72px -293.6666666667px #ff0080, -91px -28.6666666667px #00ffb3, 132px -258.6666666667px #0044ff, 7px -72.6666666667px #00ffe6, -179px -346.6666666667px #4800ff, 200px -351.6666666667px #4d00ff, -183px -228.6666666667px #aa00ff, -80px -211.6666666667px #ff9900, 70px -91.6666666667px #006aff, -243px -163.6666666667px #ff00a6, 76px -135.6666666667px #ff0084, -212px -297.6666666667px #00ffbb, 128px 46.3333333333px #95ff00, -113px 79.3333333333px #00ffbb, -157px -34.6666666667px #ff00c8, -160px -74.6666666667px #9500ff, 228px 48.3333333333px #00ff62, -235px -57.6666666667px #ff00b3, 185px -149.6666666667px #b300ff;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bang {
|
|
to {
|
|
box-shadow: -234px -283.6666666667px #ff0900, 21px -260.6666666667px #5eff00, -203px -141.6666666667px #ff00bf, 120px -228.6666666667px #ff00b7, 103px 11.3333333333px #ff9900, -14px -414.6666666667px #ff009d, -186px -1.6666666667px #00eaff, 217px -114.6666666667px #ff0095, 111px -407.6666666667px #bf00ff, 71px 42.3333333333px #d5ff00, -189px 37.3333333333px #ff00e1, 185px -301.6666666667px #1eff00, 141px -400.6666666667px #ff8400, 129px -290.6666666667px #ffc800, 92px 45.3333333333px #ff0077, -137px -72.6666666667px #fff700, 171px -383.6666666667px #e6ff00, -238px -1.6666666667px #00ffaa, -8px -99.6666666667px #4dff00, -37px -329.6666666667px #ff6f00, 208px -221.6666666667px #00fffb, -75px -209.6666666667px #007bff, -140px -45.6666666667px #09ff00, 85px -125.6666666667px #0d00ff, 234px -238.6666666667px #09ff00, 104px -156.6666666667px #ff00d5, 213px -225.6666666667px #ff0055, -8px -360.6666666667px #00ffbf, -71px 75.3333333333px #ff0062, -129px -124.6666666667px #ff0033, 212px 47.3333333333px #d000ff, 19px -248.6666666667px #ff00ae, 72px -293.6666666667px #ff0080, -91px -28.6666666667px #00ffb3, 132px -258.6666666667px #0044ff, 7px -72.6666666667px #00ffe6, -179px -346.6666666667px #4800ff, 200px -351.6666666667px #4d00ff, -183px -228.6666666667px #aa00ff, -80px -211.6666666667px #ff9900, 70px -91.6666666667px #006aff, -243px -163.6666666667px #ff00a6, 76px -135.6666666667px #ff0084, -212px -297.6666666667px #00ffbb, 128px 46.3333333333px #95ff00, -113px 79.3333333333px #00ffbb, -157px -34.6666666667px #ff00c8, -160px -74.6666666667px #9500ff, 228px 48.3333333333px #00ff62, -235px -57.6666666667px #ff00b3, 185px -149.6666666667px #b300ff;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bang {
|
|
to {
|
|
box-shadow: -234px -283.6666666667px #ff0900, 21px -260.6666666667px #5eff00, -203px -141.6666666667px #ff00bf, 120px -228.6666666667px #ff00b7, 103px 11.3333333333px #ff9900, -14px -414.6666666667px #ff009d, -186px -1.6666666667px #00eaff, 217px -114.6666666667px #ff0095, 111px -407.6666666667px #bf00ff, 71px 42.3333333333px #d5ff00, -189px 37.3333333333px #ff00e1, 185px -301.6666666667px #1eff00, 141px -400.6666666667px #ff8400, 129px -290.6666666667px #ffc800, 92px 45.3333333333px #ff0077, -137px -72.6666666667px #fff700, 171px -383.6666666667px #e6ff00, -238px -1.6666666667px #00ffaa, -8px -99.6666666667px #4dff00, -37px -329.6666666667px #ff6f00, 208px -221.6666666667px #00fffb, -75px -209.6666666667px #007bff, -140px -45.6666666667px #09ff00, 85px -125.6666666667px #0d00ff, 234px -238.6666666667px #09ff00, 104px -156.6666666667px #ff00d5, 213px -225.6666666667px #ff0055, -8px -360.6666666667px #00ffbf, -71px 75.3333333333px #ff0062, -129px -124.6666666667px #ff0033, 212px 47.3333333333px #d000ff, 19px -248.6666666667px #ff00ae, 72px -293.6666666667px #ff0080, -91px -28.6666666667px #00ffb3, 132px -258.6666666667px #0044ff, 7px -72.6666666667px #00ffe6, -179px -346.6666666667px #4800ff, 200px -351.6666666667px #4d00ff, -183px -228.6666666667px #aa00ff, -80px -211.6666666667px #ff9900, 70px -91.6666666667px #006aff, -243px -163.6666666667px #ff00a6, 76px -135.6666666667px #ff0084, -212px -297.6666666667px #00ffbb, 128px 46.3333333333px #95ff00, -113px 79.3333333333px #00ffbb, -157px -34.6666666667px #ff00c8, -160px -74.6666666667px #9500ff, 228px 48.3333333333px #00ff62, -235px -57.6666666667px #ff00b3, 185px -149.6666666667px #b300ff;
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes bang {
|
|
to {
|
|
box-shadow: -234px -283.6666666667px #ff0900, 21px -260.6666666667px #5eff00, -203px -141.6666666667px #ff00bf, 120px -228.6666666667px #ff00b7, 103px 11.3333333333px #ff9900, -14px -414.6666666667px #ff009d, -186px -1.6666666667px #00eaff, 217px -114.6666666667px #ff0095, 111px -407.6666666667px #bf00ff, 71px 42.3333333333px #d5ff00, -189px 37.3333333333px #ff00e1, 185px -301.6666666667px #1eff00, 141px -400.6666666667px #ff8400, 129px -290.6666666667px #ffc800, 92px 45.3333333333px #ff0077, -137px -72.6666666667px #fff700, 171px -383.6666666667px #e6ff00, -238px -1.6666666667px #00ffaa, -8px -99.6666666667px #4dff00, -37px -329.6666666667px #ff6f00, 208px -221.6666666667px #00fffb, -75px -209.6666666667px #007bff, -140px -45.6666666667px #09ff00, 85px -125.6666666667px #0d00ff, 234px -238.6666666667px #09ff00, 104px -156.6666666667px #ff00d5, 213px -225.6666666667px #ff0055, -8px -360.6666666667px #00ffbf, -71px 75.3333333333px #ff0062, -129px -124.6666666667px #ff0033, 212px 47.3333333333px #d000ff, 19px -248.6666666667px #ff00ae, 72px -293.6666666667px #ff0080, -91px -28.6666666667px #00ffb3, 132px -258.6666666667px #0044ff, 7px -72.6666666667px #00ffe6, -179px -346.6666666667px #4800ff, 200px -351.6666666667px #4d00ff, -183px -228.6666666667px #aa00ff, -80px -211.6666666667px #ff9900, 70px -91.6666666667px #006aff, -243px -163.6666666667px #ff00a6, 76px -135.6666666667px #ff0084, -212px -297.6666666667px #00ffbb, 128px 46.3333333333px #95ff00, -113px 79.3333333333px #00ffbb, -157px -34.6666666667px #ff00c8, -160px -74.6666666667px #9500ff, 228px 48.3333333333px #00ff62, -235px -57.6666666667px #ff00b3, 185px -149.6666666667px #b300ff;
|
|
}
|
|
}
|
|
|
|
@keyframes bang {
|
|
to {
|
|
box-shadow: -234px -283.6666666667px #ff0900, 21px -260.6666666667px #5eff00, -203px -141.6666666667px #ff00bf, 120px -228.6666666667px #ff00b7, 103px 11.3333333333px #ff9900, -14px -414.6666666667px #ff009d, -186px -1.6666666667px #00eaff, 217px -114.6666666667px #ff0095, 111px -407.6666666667px #bf00ff, 71px 42.3333333333px #d5ff00, -189px 37.3333333333px #ff00e1, 185px -301.6666666667px #1eff00, 141px -400.6666666667px #ff8400, 129px -290.6666666667px #ffc800, 92px 45.3333333333px #ff0077, -137px -72.6666666667px #fff700, 171px -383.6666666667px #e6ff00, -238px -1.6666666667px #00ffaa, -8px -99.6666666667px #4dff00, -37px -329.6666666667px #ff6f00, 208px -221.6666666667px #00fffb, -75px -209.6666666667px #007bff, -140px -45.6666666667px #09ff00, 85px -125.6666666667px #0d00ff, 234px -238.6666666667px #09ff00, 104px -156.6666666667px #ff00d5, 213px -225.6666666667px #ff0055, -8px -360.6666666667px #00ffbf, -71px 75.3333333333px #ff0062, -129px -124.6666666667px #ff0033, 212px 47.3333333333px #d000ff, 19px -248.6666666667px #ff00ae, 72px -293.6666666667px #ff0080, -91px -28.6666666667px #00ffb3, 132px -258.6666666667px #0044ff, 7px -72.6666666667px #00ffe6, -179px -346.6666666667px #4800ff, 200px -351.6666666667px #4d00ff, -183px -228.6666666667px #aa00ff, -80px -211.6666666667px #ff9900, 70px -91.6666666667px #006aff, -243px -163.6666666667px #ff00a6, 76px -135.6666666667px #ff0084, -212px -297.6666666667px #00ffbb, 128px 46.3333333333px #95ff00, -113px 79.3333333333px #00ffbb, -157px -34.6666666667px #ff00c8, -160px -74.6666666667px #9500ff, 228px 48.3333333333px #00ff62, -235px -57.6666666667px #ff00b3, 185px -149.6666666667px #b300ff;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes gravity {
|
|
to {
|
|
transform: translateY(200px);
|
|
-moz-transform: translateY(200px);
|
|
-webkit-transform: translateY(200px);
|
|
-o-transform: translateY(200px);
|
|
-ms-transform: translateY(200px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes gravity {
|
|
to {
|
|
transform: translateY(200px);
|
|
-moz-transform: translateY(200px);
|
|
-webkit-transform: translateY(200px);
|
|
-o-transform: translateY(200px);
|
|
-ms-transform: translateY(200px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes gravity {
|
|
to {
|
|
transform: translateY(200px);
|
|
-moz-transform: translateY(200px);
|
|
-webkit-transform: translateY(200px);
|
|
-o-transform: translateY(200px);
|
|
-ms-transform: translateY(200px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes gravity {
|
|
to {
|
|
transform: translateY(200px);
|
|
-moz-transform: translateY(200px);
|
|
-webkit-transform: translateY(200px);
|
|
-o-transform: translateY(200px);
|
|
-ms-transform: translateY(200px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes gravity {
|
|
to {
|
|
transform: translateY(200px);
|
|
-moz-transform: translateY(200px);
|
|
-webkit-transform: translateY(200px);
|
|
-o-transform: translateY(200px);
|
|
-ms-transform: translateY(200px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes position {
|
|
|
|
0%,
|
|
19.9% {
|
|
margin-top: 10%;
|
|
margin-left: 40%;
|
|
}
|
|
|
|
20%,
|
|
39.9% {
|
|
margin-top: 40%;
|
|
margin-left: 30%;
|
|
}
|
|
|
|
40%,
|
|
59.9% {
|
|
margin-top: 20%;
|
|
margin-left: 70%;
|
|
}
|
|
|
|
60%,
|
|
79.9% {
|
|
margin-top: 30%;
|
|
margin-left: 20%;
|
|
}
|
|
|
|
80%,
|
|
99.9% {
|
|
margin-top: 30%;
|
|
margin-left: 80%;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes position {
|
|
|
|
0%,
|
|
19.9% {
|
|
margin-top: 10%;
|
|
margin-left: 40%;
|
|
}
|
|
|
|
20%,
|
|
39.9% {
|
|
margin-top: 40%;
|
|
margin-left: 30%;
|
|
}
|
|
|
|
40%,
|
|
59.9% {
|
|
margin-top: 20%;
|
|
margin-left: 70%;
|
|
}
|
|
|
|
60%,
|
|
79.9% {
|
|
margin-top: 30%;
|
|
margin-left: 20%;
|
|
}
|
|
|
|
80%,
|
|
99.9% {
|
|
margin-top: 30%;
|
|
margin-left: 80%;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes position {
|
|
|
|
0%,
|
|
19.9% {
|
|
margin-top: 10%;
|
|
margin-left: 40%;
|
|
}
|
|
|
|
20%,
|
|
39.9% {
|
|
margin-top: 40%;
|
|
margin-left: 30%;
|
|
}
|
|
|
|
40%,
|
|
59.9% {
|
|
margin-top: 20%;
|
|
margin-left: 70%;
|
|
}
|
|
|
|
60%,
|
|
79.9% {
|
|
margin-top: 30%;
|
|
margin-left: 20%;
|
|
}
|
|
|
|
80%,
|
|
99.9% {
|
|
margin-top: 30%;
|
|
margin-left: 80%;
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes position {
|
|
|
|
0%,
|
|
19.9% {
|
|
margin-top: 10%;
|
|
margin-left: 40%;
|
|
}
|
|
|
|
20%,
|
|
39.9% {
|
|
margin-top: 40%;
|
|
margin-left: 30%;
|
|
}
|
|
|
|
40%,
|
|
59.9% {
|
|
margin-top: 20%;
|
|
margin-left: 70%;
|
|
}
|
|
|
|
60%,
|
|
79.9% {
|
|
margin-top: 30%;
|
|
margin-left: 20%;
|
|
}
|
|
|
|
80%,
|
|
99.9% {
|
|
margin-top: 30%;
|
|
margin-left: 80%;
|
|
}
|
|
}
|
|
|
|
@keyframes position {
|
|
|
|
0%,
|
|
19.9% {
|
|
margin-top: 10%;
|
|
margin-left: 40%;
|
|
}
|
|
|
|
20%,
|
|
39.9% {
|
|
margin-top: 40%;
|
|
margin-left: 30%;
|
|
}
|
|
|
|
40%,
|
|
59.9% {
|
|
margin-top: 20%;
|
|
margin-left: 70%;
|
|
}
|
|
|
|
60%,
|
|
79.9% {
|
|
margin-top: 30%;
|
|
margin-left: 20%;
|
|
}
|
|
|
|
80%,
|
|
99.9% {
|
|
margin-top: 30%;
|
|
margin-left: 80%;
|
|
}
|
|
} |