@keyframes rotate360 { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } @-webkit-keyframes rotate360 { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } #music { padding: 8px; width: 64px; position: fixed; height: 64px; top: 0; right: 0; z-index: 100000; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEUAAAD////////////////////////////////////////////////////////////////////xY8b8AAAAEXRSTlMA8ECA4GAQ0DCQUCCwwHCgn6cm+4MAAAF+SURBVEjHzVZbcsMgDERgYcBgZ+9/2YqmKTEieDz96X55sJZFDySMgmdXFgiW4tibC/h9xQnrPuNskerOh0tWkNxRlShun+wdiXUM70shCofc0DysYs56nYWyDkSY2k5amVjZA2s7zECclX32k+DljsHAYaY4gPQmScjmAhnUPF+xXqdUjH6jAArmEoHgfvJbvxSwq+i+DhWxGI1B6Jfnxp7AIwJAMXSxp+rqLgJDBQge/izB3yGKQ4LdFwDlfS3WQHkgjAnG2Hz+GQBvuJ1IEWq6TnVKSCJzTAhH6dLtTIH7TNjId6ko4nmaKHTuJTk/YCeEDhb4j4S500Y5PQurhkOZJ66hJU6Xht2d9WMCIani4wUCSo3QFV9X3hYvaEItb3WBHJ5ouucLpK5owBNNtruiqgnYDEFmMxJwrc1M0drM3UZ2t1XeasYFtJ3a/WNu/wDSnYFSAL49sjqk+VBMenmbj92/D/b2dKD8ejpkQjXfbj1O+DqlqT1/krb+Aul6F180HShIAAAAAElFTkSuQmCC') no-repeat center center; background-size: 48px; } .ipadEr.closeEr{ position: relative; } .p1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .p2{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .demo{ background: -webkit-linear-gradient(left, red, blue); background: -o-linear-gradient(right, red, blue); background: -moz-linear-gradient(right, red, blue); background: linear-gradient(to right, red, blue); } .ipadEr.closeEr::after{ content: "是否已经替换了二维码？记得更换，更换再开启"; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; -webkit-flex-direction: column; font-size: 16px; padding: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; color: white; text-align: justify; background-color: black; } /*loading*/ #page_loading{ display: flex; justify-content: center; align-items: center; flex-direction: column; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; -webkit-flex-direction: column; width:100%; height:100%; position: fixed; left:0; top:0; background:#75d4a1; z-index: 3000; } #pl_num { font-size: 20px; color: white; text-align: center; margin-top: 10px } /*间接性摇晃*/ @keyframes ballRotate { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); transform-origin: bottom; -webkit-transform-origin: bottom } 10% { transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform-origin: bottom; -webkit-transform-origin: bottom } 30% { transform: rotate(5deg); -webkit-transform: rotate(5deg); transform-origin: bottom; -webkit-transform-origin: bottom } 50% { transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform-origin: bottom; -webkit-transform-origin: bottom } 70% { transform: rotate(5deg); -webkit-transform: rotate(5deg); transform-origin: bottom; -webkit-transform-origin: bottom } 80% { transform: rotate(0deg); -webkit-transform: rotate(0deg); transform-origin: bottom; -webkit-transform-origin: bottom } 100% { transform: rotate(0deg); -webkit-transform: rotate(0deg); transform-origin: bottom; -webkit-transform-origin: bottom } } @-webkit-keyframes ballRotate { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); transform-origin: bottom; -webkit-transform-origin: bottom } 10% { transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform-origin: bottom; -webkit-transform-origin: bottom } 30% { transform: rotate(5deg); -webkit-transform: rotate(5deg); transform-origin: bottom; -webkit-transform-origin: bottom } 50% { transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform-origin: bottom; -webkit-transform-origin: bottom } 70% { transform: rotate(5deg); -webkit-transform: rotate(5deg); transform-origin: bottom; -webkit-transform-origin: bottom } 80% { transform: rotate(0deg); -webkit-transform: rotate(0deg); transform-origin: bottom; -webkit-transform-origin: bottom } 100% { transform: rotate(0deg); -webkit-transform: rotate(0deg); transform-origin: bottom; -webkit-transform-origin: bottom } } .bRotate { animation: 1s linear ballRotate infinite; -webkit-animation: 1s linear ballRotate infinite } /*左下摇晃*/ @-webkit-keyframes shankLeftBottom{ 0%{ transform: rotate(0deg); -webkit-transform: rotate(0deg); transform-origin: left bottom; -webkit-transform-origin: left bottom; } 50%{ transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform-origin: left bottom; -webkit-transform-origin: left bottom; } 100%{ transform: rotate(0deg); -webkit-transform: rotate(0deg); transform-origin: left bottom; -webkit-transform-origin: left bottom; } } @keyframes shankLeftBottom{ 0%{ transform: rotate(0deg); -webkit-transform: rotate(0deg); transform-origin: left bottom; -webkit-transform-origin: left bottom; } 50%{ transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform-origin: left bottom; -webkit-transform-origin: left bottom; } 100%{ transform: rotate(0deg); -webkit-transform: rotate(0deg); transform-origin: left bottom; -webkit-transform-origin: left bottom; } } .shankLeftBottom{ animation: 1s linear shankLeftBottom infinite; -webkit-animation: 1s linear shankLeftBottom infinite; } /*中心摇晃*/ /*中心摇晃*/ @-webkit-keyframes shankCenter{ 0%{ transform: rotate(0deg); -webkit-transform: rotate(0deg); } 25%{ transform: rotate(-2deg); -webkit-transform: rotate(-2deg); } 50%{ transform: rotate(0deg); -webkit-transform: rotate(0deg); } 75%{ transform: rotate(2deg); -webkit-transform: rotate(2deg); } 100%{ transform: rotate(0deg); -webkit-transform: rotate(0deg); } } @keyframes shankCenter{ 0%{ transform: rotate(0deg); -webkit-transform: rotate(0deg); } 25%{ transform: rotate(-2deg); -webkit-transform: rotate(-2deg); } 50%{ transform: rotate(0deg); -webkit-transform: rotate(0deg); } 75%{ transform: rotate(2deg); -webkit-transform: rotate(2deg); } 100%{ transform: rotate(0deg); -webkit-transform: rotate(0deg); } } .shankCenter{ animation: 1s linear shankCenter infinite; -webkit-animation: 1s linear shankCenter infinite; } /*搜索移动*/ @keyframes searchMove { 0% { transform: translate(0, 0); -webkit-transform: translate(0, 0); } 25% { transform: translate(-15px, -15px); -webkit-transform: translate(-15px, -15px); } 50% { transform: translate(-30px, 0px); -webkit-transform: translate(-30px, 0px); } 75% { transform: translate(-15px, 0.15px); -webkit-transform: translate(-15px, 0.15px); } 100% { transform: translate(0, 0); -webkit-transform: translate(0, 0); } } @-webkit-keyframes searchMove { 0% { transform: translate(0, 0); -webkit-transform: translate(0, 0); } 25% { transform: translate(-15px, -15px); -webkit-transform: translate(-15px, -15px); } 50% { transform: translate(-30px, 0px); -webkit-transform: translate(-30px, 0px); } 75% { transform: translate(-15px, 0.15px); -webkit-transform: translate(-15px, 0.15px); } 100% { transform: translate(0, 0); -webkit-transform: translate(0, 0); } } .searchMove{ animation: 2.0s linear searchMove infinite; -webkit-animation: 2.0s linear searchMove infinite; } /*变大变小*/ @keyframes bigAndSmall195 { 0% { transform: scale(1, 1) } 50% { transform: scale(0.95, 0.95) } 100% { transform: scale(1, 1) } } @-webkit-keyframes bigAndSmall195 { 0% { transform: scale(1, 1) } 50% { transform: scale(0.95, 0.95) } 100% { transform: scale(1, 1) } } .bigAndSmall { animation: 1.8s linear bigAndSmall195 infinite; -webkit-animation: 1.8s linear bigAndSmall195 infinite } /*盖章*/ @keyframes smallScale{ 0% { opacity: 1; transform:scale(2,2); -webkit-transform: scale(2,2); } 100% { opacity: 1; transform:scale(1,1); -webkit-transform: scale(1,1); } } @-webkit-keyframes smallScale { 0% { opacity: 1; transform:scale(2,2); -webkit-transform: scale(2,2); } 100% { opacity: 1; transform:scale(1,1); -webkit-transform: scale(1,1); } } .smallScale{ animation: smallScale 0.2s linear forwards; -webkit-animation: smallScale 0.2s linear forwards; } /*闪烁*/ @keyframes blingling{ 0% { opacity: 1; } 50% { opacity: 0.4; } 100%{ opacity: 1; } } @-webkit-keyframes blingling { 0% { opacity: 1; } 50% { opacity: 0.4; } 100%{ opacity: 1; } } .blingling{ animation: blingling 1.2s linear infinite; -webkit-animation: blingling 1.2s linear infinite; } /*向右上角飘*/ .ballMove{ animation: 10.0s linear ballMove infinite; -webkit-animation: 10.0s linear ballMove infinite; } @-webkit-keyframes ballMove{ 0%{ transform: matrix(1,0,0,1,0,0); -webkit-transform: matrix(1,0,0,1,0,0); } 100%{ transform: matrix(1,0,0,1,-400,-660); -webkit-transform: matrix(1,0,0,1,-400,-660); } } @keyframes ballMove{ 0%{ transform: matrix(1,0,0,1,0,0); -webkit-transform: matrix(1,0,0,1,0,0); } 100%{ transform: matrix(1,0,0,1,-400,-660); -webkit-transform: matrix(1,0,0,1,-400,-660); } } /*向下更多*/ .downMore{ animation: downMore 1.5s linear infinite; -webkit-animation: downMore 1.5s linear infinite; } @keyframes downMore { 0% { opacity: 1; transform: matrix(1,0,0,1,0,0); -webkit-transform: matrix(1,0,0,1,0,0); } 100% { opacity: 0; transform: matrix(1,0,0,1,0,30); -webkit-transform: matrix(1,0,0,1,0,30); } } @-webkit-keyframes downMore { 0% { opacity: 1; transform: matrix(1,0,0,1,0,0); -webkit-transform: matrix(1,0,0,1,0,0); } 100% { opacity: 0; transform: matrix(1,0,0,1,0,30); -webkit-transform: matrix(1,0,0,1,0,30); } } .widthFull{ width: 100%; } .delay01{ animation-delay: 0.1s!important; -webkit-animation-delay: 0.1s!important; } .delay02{ animation-delay: 0.2s!important; -webkit-animation-delay: 0.2s!important; } .delay03{ animation-delay: 0.3s!important; -webkit-animation-delay: 0.3s!important; } .delay04{ animation-delay: 0.4s!important; -webkit-animation-delay: 0.4s!important; } .delay05{ animation-delay: 0.5s!important; -webkit-animation-delay: 0.5s!important; } .delay06{ animation-delay: 0.6s!important; -webkit-animation-delay: 0.6s!important; } .delay07{ animation-delay: 0.7s!important; -webkit-animation-delay: 0.7s!important; } .delay08{ animation-delay: 0.8s!important; -webkit-animation-delay: 0.8s!important; } .delay09{ animation-delay: 0.9s!important; -webkit-animation-delay: 0.9s!important; } .delay10{ animation-delay: 1.0s!important; -webkit-animation-delay: 1.0s!important; } .delay11{ animation-delay: 1.1s!important; -webkit-animation-delay: 1.1s!important; } .delay12{ animation-delay: 1.2s!important; -webkit-animation-delay: 1.2s!important; } .delay13{ animation-delay: 1.3s!important; -webkit-animation-delay: 1.3s!important; } .delay14{ animation-delay: 1.4s!important; -webkit-animation-delay: 1.4s!important; } .delay15{ animation-delay: 1.5s!important; -webkit-animation-delay: 1.5s!important; } .delay16{ animation-delay: 1.6s!important; -webkit-animation-delay: 1.6s!important; } .delay17{ animation-delay: 1.7s!important; -webkit-animation-delay: 1.7s!important; } .delay18{ animation-delay: 1.8s!important; -webkit-animation-delay: 1.8s!important; } .delay19{ animation-delay: 1.9s!important; -webkit-animation-delay: 1.9s!important; } .delay20{ animation-delay: 2.0s!important; -webkit-animation-delay: 2.0s!important; } .delay21{ animation-delay: 2.1s!important; -webkit-animation-delay: 2.1s!important; } .delay22{ animation-delay: 2.2s!important; -webkit-animation-delay: 2.2s!important; } .delay23{ animation-delay: 2.3s!important; -webkit-animation-delay: 2.3s!important; } .delay24{ animation-delay: 2.4s!important; -webkit-animation-delay: 2.4s!important; } .delay25{ animation-delay: 2.5s!important; -webkit-animation-delay: 2.5s!important; } .delay26{ animation-delay: 2.6s!important; -webkit-animation-delay: 2.6s!important; } .delay27{ animation-delay: 2.7s!important; -webkit-animation-delay: 2.7s!important; } .delay28{ animation-delay: 2.8s!important; -webkit-animation-delay: 2.8s!important; } .delay29{ animation-delay: 2.9s!important; -webkit-animation-delay: 2.9s!important; } .delay30{ animation-delay: 3.0s!important; -webkit-animation-delay: 3.0s!important; } .mt5{ margin-top: 5px; } .mt10{ margin-top: 10px; } .mt20{ margin-top: 20px; } .mt30{ margin-top: 30px; } .mt40{ margin-top: 40px; } body { /* IOS禁止微信调整字体大小 */ -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; } .absolute{ position: absolute; } .relative{ position: relative; } .fixed{ position: fixed; } .djs{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 200px; -webkit-text-stroke: 6px white; color: white; opacity: 0; } .djs:nth-child(1) { animation:1s xx1 linear 0s forwards; -webkit-animation:1s xx1 linear 0s forwards; } .djs:nth-child(2) { animation:1s xx1 linear 1s forwards; -webkit-animation:1s xx1 linear 1s forwards; } @keyframes xx1{ 0% { opacity: 1; transform:scale(1,1); -webkit-transform: scale(1,1); } 100% { opacity: 0; transform:scale(0.5,0.5); -webkit-transform:scale(0.5,0.5); } } @-webkit-keyframes xx1 { 0% { opacity: 1; transform:scale(1,1); -webkit-transform: scale(1,1); } 100% { opacity: 0; transform:scale(0.5,0.5); -webkit-transform:scale(0.5,0.5); } } .upMore img { animation: start 1.5s infinite ease-in-out; -webkit-animation: start 1.5s infinite ease-in-out; } @-webkit-keyframes start { 0%,30% {opacity: 0;-webkit-transform: translate(0,10px);} 60% {opacity: 1;-webkit-transform: translate(0,0);} 100% {opacity: 0;-webkit-transform: translate(0,-8px);} } @-moz-keyframes start { 0%,30% {opacity: 0;-moz-transform: translate(0,10px);} 60% {opacity: 1;-moz-transform: translate(0,0);} 100% {opacity: 0;-moz-transform: translate(0,-8px);} } @keyframes start { 0%,30% {opacity: 0;transform: translate(0,10px);} 60% {opacity: 1;transform: translate(0,0);} 100% {opacity: 0;transform: translate(0,-8px);} } #headimgurl{ position: fixed; left: 0px; top: 0px; opacity: 0; pointer-events: none; z-index: 100000000; } /*变大变小*/ @keyframes bigAndSmall19{ 0% { transform: scale(1, 1) } 50% { transform: scale(0.9, 0.9) } 100% { transform: scale(1, 1) } } @-webkit-keyframes bigAndSmall195 { 0% { transform: scale(1, 1) } 50% { transform: scale(0.9, 0.9) } 100% { transform: scale(1, 1) } } .bigAndSmall1 { animation: 1.8s linear bigAndSmall19 infinite; -webkit-animation: 1.8s linear bigAndSmall19 infinite } .toTopLeft{ animation: 1.6s linear toTopLeft infinite; -webkit-animation: 1.6s linear toTopLeft infinite; } @-webkit-keyframes toTopLeft{ 0%{ transform: translate(0px,0px); -webkit-transform: translate(0px,0px); } 50%{ transform: translate(20px,20px); -webkit-transform: translate(20px,20px); } 100%{ transform: translate(0px,0px); -webkit-transform: translate(0px,0px); } } @keyframes toTopLeft{ 0%{ transform: translate(0px,0px); -webkit-transform: translate(0px,0px); } 50%{ transform: translate(20px,20px); -webkit-transform: translate(20px,20px); } 100%{ transform: translate(0px,0px); -webkit-transform: translate(0px,0px); } } .rotate90{ transform: rotate(90deg); -webkit-transform: rotate(90deg); } .upDown { animation: upDown 3s linear infinite; -webkit-animation: upDown 3s linear infinite } @keyframes upDown { 0% { transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0) } 50% { transform: matrix(1, 0, 0, 1, 0, 20); -webkit-transform: matrix(1, 0, 0, 1, 0, 20) } 100% { transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0) } } @-webkit-keyframes upDown { 0% { transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0) } 50% { transform: matrix(1, 0, 0, 1, 0, 20); -webkit-transform: matrix(1, 0, 0, 1, 0, 20) } 100% { transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0) } } #main{ width: 750px; margin-left: -375px; left: 50%; } #elseMain{ width: 750px; margin: 0 auto; position: relative; } .ggbtn img:nth-child(2){ display: none; } .ggbtn.selected img:nth-child(1){ display: none; } .ggbtn.selected img:nth-child(2){ display: block; }