#landlord { user-select: none; position: fixed; left: 5px; bottom: 0; width: 250px; height: 280px; z-index: 10000; font-size: 0; /*transition: all .3s ease-in-out;*/ display:none; } #open_live2d{ border: 2px solid rgba(75,127,199,0.9); border-radius: 2px; background-color: rgba(74, 59, 114,0.9); padding:2px 10px; color:#fff; height:24px; line-height:24px; font-size:12px; position:fixed; right:5px; bottom:5px; z-index:10000; cursor:pointer; display:none; } #showInfoBtn{ display:none; } #live2d { width: 250px; height: 280px; position: relative; z-index:3; } .message { opacity: 0; color: #fff; box-sizing: border-box; width: 250px; height: auto; margin: auto; padding: 7px; bottom: 280px; left: 0px; text-align: center; border: 2px solid rgba(75,127,199,0.9); border-radius: 5px; background-color: rgba(74, 59, 114,0.9); font-size: 13px; font-weight: 400; text-overflow: ellipsis; text-transform: uppercase; overflow: hidden; position: absolute; /*animation-delay: 5s; animation-duration: 50s; animation-iteration-count: infinite; animation-name: shake; animation-timing-function: ease-in-out;*/ } .live_talk_input_body{ position:absolute; bottom:15px; left:0; width:250px; display:none; z-index:4; } .live_talk_input_text_body{ width:250px; box-sizing:border-box; height:28px; border: 2px solid rgb(223, 179, 241); border-radius: 5px; background-color: rgba(74, 59, 114,0.9); } .live_talk_input_name_body{ width:70px; box-sizing:border-box; height:24px; border: 2px solid rgb(223, 179, 241); border-radius: 5px; background-color: rgba(74, 59, 114,0.9); margin-bottom:3px; } .live_talk_name{ background-color:transparent; border:0px; margin:0; width:66px; height:20px; line-height:20px; text-align:center; font-size:12px; color:#fff; outline:none; box-sizing:border-box; padding:0 3px; } .live_talk_talk{ background-color:transparent; border:0px; margin:0; width:206px; height:24px; line-height:24px; text-align:left; font-size:12px; color:#fff; outline:none; box-sizing:border-box; padding:0 3px; float:left; } .live_talk_send_btn{ background-color:transparent; color:#fff; border:0px; cursor:pointer; padding:0 4px; border-left:1px solid #fff; font-size:12px; float:right; height:18px; line-height:18px; outline:none; margin:3px 0 0 0; } .white_input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #E4E4E4; opacity: 1; } .white_input::-moz-placeholder { /* Mozilla Firefox 19+*/ color: #E4E4E4; opacity: 1; } .white_input:-ms-input-placeholder { color: #E4E4E4; } .white_input::-webkit-input-placeholder { color: #E4E4E4; } .hide-button { position: absolute; top: 10px; right: 0; /* bottom: 30px; */ display: none; overflow: hidden; /* padding: 4px; */ width: 60px; height: 20px; border: 1px solid rgba(255,137,255,.4); border-radius: 12px; background: rgba(255,137,255,.2); box-shadow: 0 3px 15px 2px rgba(255,137,255,.4); text-align: center; font-size: 12px; cursor: pointer; } .hide-button:hover { border: 1px solid #f4a7b9; background: #f4f6f8; } .live_ico_box{ width:15px; position:absolute; z-index:5; right:0; top:10px; opacity:0.9; } .live_ico_item{ width:15px; height: 20px; cursor:pointer; background-position:center center; background-repeat:no-repeat; background-size:15px; } .live_ico_item.type_talk{ background-image:url(../images/talk.png); } .live_ico_item.type_quit{ background-image:url(../images/quite.png); } .live_ico_item.type_info{ background-image:url(../images/info.png); } .live_ico_item.type_music{ background-image:url(../images/music.png); } .live_ico_item.type_youdu{ background-image:url(../images/youdu.png); } .live_ico_item.type_music.play{ background-image:url(../images/pasue.png); } .live_ico_item.type_youdu.doudong{ -webkit-animation-name: shake-little; -ms-animation-name: shake-little; animation-name: shake-little; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running } .douqilai,.douqilai *{ animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); } .l2d_caihong{ animation: rainbow 1.5s infinite; } @media (max-width: 860px) { #landlord { display: none!important; } } @keyframes shake { 2% { transform: translate(0.5px, -1.5px) rotate(-0.5deg); } 4% { transform: translate(0.5px, 1.5px) rotate(1.5deg); } 6% { transform: translate(1.5px, 1.5px) rotate(1.5deg); } 8% { transform: translate(2.5px, 1.5px) rotate(0.5deg); } 10% { transform: translate(0.5px, 2.5px) rotate(0.5deg); } 12% { transform: translate(1.5px, 1.5px) rotate(0.5deg); } 14% { transform: translate(0.5px, 0.5px) rotate(0.5deg); } 16% { transform: translate(-1.5px, -0.5px) rotate(1.5deg); } 18% { transform: translate(0.5px, 0.5px) rotate(1.5deg); } 20% { transform: translate(2.5px, 2.5px) rotate(1.5deg); } 22% { transform: translate(0.5px, -1.5px) rotate(1.5deg); } 24% { transform: translate(-1.5px, 1.5px) rotate(-0.5deg); } 26% { transform: translate(1.5px, 0.5px) rotate(1.5deg); } 28% { transform: translate(-0.5px, -0.5px) rotate(-0.5deg); } 30% { transform: translate(1.5px, -0.5px) rotate(-0.5deg); } 32% { transform: translate(2.5px, -1.5px) rotate(1.5deg); } 34% { transform: translate(2.5px, 2.5px) rotate(-0.5deg); } 36% { transform: translate(0.5px, -1.5px) rotate(0.5deg); } 38% { transform: translate(2.5px, -0.5px) rotate(-0.5deg); } 40% { transform: translate(-0.5px, 2.5px) rotate(0.5deg); } 42% { transform: translate(-1.5px, 2.5px) rotate(0.5deg); } 44% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); } 46% { transform: translate(1.5px, -0.5px) rotate(-0.5deg); } 48% { transform: translate(2.5px, -0.5px) rotate(0.5deg); } 50% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); } 52% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); } 54% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); } 56% { transform: translate(0.5px, 2.5px) rotate(1.5deg); } 58% { transform: translate(2.5px, 2.5px) rotate(0.5deg); } 60% { transform: translate(2.5px, -1.5px) rotate(1.5deg); } 62% { transform: translate(-1.5px, 0.5px) rotate(1.5deg); } 64% { transform: translate(-1.5px, 1.5px) rotate(1.5deg); } 66% { transform: translate(0.5px, 2.5px) rotate(1.5deg); } 68% { transform: translate(2.5px, -1.5px) rotate(1.5deg); } 70% { transform: translate(2.5px, 2.5px) rotate(0.5deg); } 72% { transform: translate(-0.5px, -1.5px) rotate(1.5deg); } 74% { transform: translate(-1.5px, 2.5px) rotate(1.5deg); } 76% { transform: translate(-1.5px, 2.5px) rotate(1.5deg); } 78% { transform: translate(-1.5px, 2.5px) rotate(0.5deg); } 80% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); } 82% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); } 84% { transform: translate(-0.5px, 0.5px) rotate(1.5deg); } 86% { transform: translate(2.5px, 1.5px) rotate(0.5deg); } 88% { transform: translate(-1.5px, 0.5px) rotate(1.5deg); } 90% { transform: translate(-1.5px, -0.5px) rotate(-0.5deg); } 92% { transform: translate(-1.5px, -1.5px) rotate(1.5deg); } 94% { transform: translate(0.5px, 0.5px) rotate(-0.5deg); } 96% { transform: translate(2.5px, -0.5px) rotate(-0.5deg); } 98% { transform: translate(-1.5px, -1.5px) rotate(-0.5deg); } 0%, 100% { transform: translate(0, 0) rotate(0); } } @keyframes quan { 0% { transform:rotate(0); animation-timing-function:linear; } 100% { transform:rotate(360deg); } } @-webkit-keyframes quan { 0% { -webkit-transform:rotate(0); -webkit-animation-timing-function:linear; } 100% { -webkit-transform:rotate(360deg); } } @-moz-keyframes quan { 0% { -moz-transform:rotate(0); -moz-animation-timing-function:linear; } 100% { -moz-transform:rotate(360deg); } } @-o-keyframes quan { 0% { -o-transform:rotate(0); -o-animation-timing-function:linear; } 100% { -o-transform:rotate(360deg); } } @-ms-keyframes quan { 0% { -ms-transform:rotate(0); -ms-animation-timing-function:linear; } 100% { -ms-transform:rotate(360deg); } } @-webkit-keyframes shake-little { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg) } 2% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg) } 4% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 6% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 8% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 10% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg) } 12% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg) } 14% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 16% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 18% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 20% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 22% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg) } 24% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 26% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 28% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 30% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 32% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg) } 34% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 36% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg) } 38% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg) } 40% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 42% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 44% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg) } 46% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 48% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 50% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 52% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 54% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 56% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg) } 58% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg) } 60% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 62% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 64% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg) } 66% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 68% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg) } 70% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg) } 72% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg) } 74% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 76% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 78% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg) } 80% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg) } 82% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg) } 84% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg) } 86% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 88% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 90% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 92% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 94% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } 96% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg) } 98% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg) } } @-ms-keyframes shake-little { 0% { -ms-transform: translate(0px, 0px) rotate(0deg) } 2% { -ms-transform: translate(0px, 0px) rotate(-0.5deg) } 4% { -ms-transform: translate(0px, 0px) rotate(-0.5deg) } 6% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 8% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 10% { -ms-transform: translate(0px, 0px) rotate(-0.5deg) } 12% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 14% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 16% { -ms-transform: translate(0px, 0px) rotate(-0.5deg) } 18% { -ms-transform: translate(0px, 0px) rotate(-0.5deg) } 20% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 22% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg) } 24% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 26% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 28% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 30% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 32% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 34% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 36% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 38% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 40% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 42% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg) } 44% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg) } 46% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 48% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 50% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 52% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg) } 54% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 56% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 58% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 60% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 62% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 64% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 66% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg) } 68% { -ms-transform: translate(0px, 0px) rotate(-0.5deg) } 70% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 72% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 74% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg) } 76% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 78% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 80% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 82% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg) } 84% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 86% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 88% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 90% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg) } 92% { -ms-transform: translate(0px, 0px) rotate(-0.5deg) } 94% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } 96% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg) } 98% { -ms-transform: translate(0px, -1px) rotate(-0.5deg) } } @keyframes shake-little { 0% { transform: translate(0px, 0px) rotate(0deg) } 2% { transform: translate(-1px, -1px) rotate(-0.5deg) } 4% { transform: translate(-1px, -1px) rotate(-0.5deg) } 6% { transform: translate(0px, 0px) rotate(-0.5deg) } 8% { transform: translate(0px, -1px) rotate(-0.5deg) } 10% { transform: translate(-1px, -1px) rotate(-0.5deg) } 12% { transform: translate(0px, 0px) rotate(-0.5deg) } 14% { transform: translate(0px, 0px) rotate(-0.5deg) } 16% { transform: translate(0px, -1px) rotate(-0.5deg) } 18% { transform: translate(0px, 0px) rotate(-0.5deg) } 20% { transform: translate(-1px, -1px) rotate(-0.5deg) } 22% { transform: translate(-1px, -1px) rotate(-0.5deg) } 24% { transform: translate(-1px, -1px) rotate(-0.5deg) } 26% { transform: translate(-1px, 0px) rotate(-0.5deg) } 28% { transform: translate(0px, -1px) rotate(-0.5deg) } 30% { transform: translate(0px, -1px) rotate(-0.5deg) } 32% { transform: translate(0px, 0px) rotate(-0.5deg) } 34% { transform: translate(0px, -1px) rotate(-0.5deg) } 36% { transform: translate(-1px, 0px) rotate(-0.5deg) } 38% { transform: translate(-1px, -1px) rotate(-0.5deg) } 40% { transform: translate(0px, 0px) rotate(-0.5deg) } 42% { transform: translate(-1px, -1px) rotate(-0.5deg) } 44% { transform: translate(-1px, 0px) rotate(-0.5deg) } 46% { transform: translate(-1px, -1px) rotate(-0.5deg) } 48% { transform: translate(0px, -1px) rotate(-0.5deg) } 50% { transform: translate(0px, -1px) rotate(-0.5deg) } 52% { transform: translate(0px, 0px) rotate(-0.5deg) } 54% { transform: translate(-1px, 0px) rotate(-0.5deg) } 56% { transform: translate(0px, 0px) rotate(-0.5deg) } 58% { transform: translate(0px, 0px) rotate(-0.5deg) } 60% { transform: translate(0px, 0px) rotate(-0.5deg) } 62% { transform: translate(0px, -1px) rotate(-0.5deg) } 64% { transform: translate(0px, 0px) rotate(-0.5deg) } 66% { transform: translate(-1px, -1px) rotate(-0.5deg) } 68% { transform: translate(0px, -1px) rotate(-0.5deg) } 70% { transform: translate(0px, 0px) rotate(-0.5deg) } 72% { transform: translate(-1px, -1px) rotate(-0.5deg) } 74% { transform: translate(-1px, -1px) rotate(-0.5deg) } 76% { transform: translate(-1px, 0px) rotate(-0.5deg) } 78% { transform: translate(0px, 0px) rotate(-0.5deg) } 80% { transform: translate(0px, -1px) rotate(-0.5deg) } 82% { transform: translate(-1px, 0px) rotate(-0.5deg) } 84% { transform: translate(-1px, -1px) rotate(-0.5deg) } 86% { transform: translate(0px, -1px) rotate(-0.5deg) } 88% { transform: translate(0px, 0px) rotate(-0.5deg) } 90% { transform: translate(-1px, -1px) rotate(-0.5deg) } 92% { transform: translate(-1px, 0px) rotate(-0.5deg) } 94% { transform: translate(-1px, 0px) rotate(-0.5deg) } 96% { transform: translate(0px, -1px) rotate(-0.5deg) } 98% { transform: translate(0px, -1px) rotate(-0.5deg) } } @keyframes shake-it{ 0%{ text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5); } 25%{ text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5); } 50%{ text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5); } 100%{ text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5); } } @keyframes rainbow { 100% { filter: hue-rotate(360deg); } }