.h1 { text-align: center; } body{ background-color: transparent !important; } .voice-box { box-sizing : border-box; display : flex; justify-content: center; margin : 50px auto; padding : 50px; width : 60%; border-radius : 3px; } .voice-box input { box-sizing : border-box; padding : 10px; width : 70%; height : 50px; font-size : 18px; color : #187cff; border : 1px solid #187cff; border-radius: 3px 0px 0px 3px; } .voice-box button { width : 30%; height : 50px; line-height : 50px; font-size : 18px; color : white; background : #187cff; border : none; border-radius: 0px 3px 3px 0px; cursor : pointer; } .voice-box button::before { content : ""; display : inline-block; width : 23px; height : 26px; vertical-align : middle; background : url(../img/voice.png) no-repeat; background-size: contain; } .fixed-box { box-sizing: border-box; display : none; position : fixed; top : 0px; right : 0px; bottom : 0px; left : 0px; border : .04rem solid #e0e7ff; background: rgba(16, 22, 62, .2); } .fixed-close { position : absolute; top : 0px; right : 0px; padding : 24px; width : 20px; height : 20px; border : none; background : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABeklEQVRIibXWsWoVQRQA0LObgGCTFFr6env9h/yETSz0tclrBEUJWhjzAqkV/A9/QrC2CtgIYqk2DwvdMExm991ZJrdaZoY53Bnm3u0Wy80BPuI21jjRPjqc4il+4FG3WG4ucS9ZtMaqMfoej5OxLz3uZAuPcXaDKNzt/TuCPFrgYyi87fEK543xKfQFLvoEaYVvQ19DnwxO4euWaA5P4UcBPIzCbmHRcYLleDqfox9wGEG5nnGKRzOvRilnnOIDluPD/BT6HG/GNp+CI/j+HDQCR/BqlPE7LuGlO5+F1sARPIzWwh32Jub3K/YKw1PFYYgV3rWEI2iKh2r7NnhbGZzdWKaeU03tzZ/W8ARH/2TGMq5BZ7XUElzVZebiOTzU3ho0RUqts4in8Kwuk8Uqig/wti4TQSP41XgfQMNlMIBf9fPd/x8t0RTn+h/LEX52i+XmN241RtM4K+Dfe3y7QZTysV/u7D18+RkP8AfPxPpubXzCL9zHVzz5C8ecbD1n3xuUAAAAAElFTkSuQmCC) no-repeat center center; background-size: 20px; transition : all .5s; cursor : pointer; outline : none; } .fixed-close:hover { transform : rotate(270deg); -webkit-transform: rotate(270deg); } .fixed-main { box-sizing : border-box; position : absolute; left : 20%; bottom : 0px; padding : 30px; width : 60%; height : 240px; font-size : 18px; background : white; border : 2px solid #e0e7ff; border-radius: 5px 5px 0px 0px; overflow-y : auto; } .fixed-icon { box-sizing : border-box; display : flex; justify-content: center; align-items : center; position : absolute; top : 50%; left : 50%; margin-top : -50px; margin-left : -50px; width : 100px; height : 100px; background : linear-gradient(115deg, #56d8e4 5%, #9f01ea 95%); border : 1px solid #e0e7ff; border-radius : 50%; } .fixed-icon::before { content : ""; position : absolute; display : inline-block; width : 100px; height : 100px; border : 1px solid #9f01ea; box-shadow : 0px 0px 6px 0px #9f01ea; border-radius: 50%; animation : move 1.5s infinite; } .fixed-icon::after { content : ""; position : absolute; display : inline-block; width : 100px; height : 100px; border : 1px solid #56d8e4; box-shadow : 0px 0px 6px 0px #56d8e4; border-radius: 50%; animation : move 1.5s .5s infinite; } .fixed-icon img { width : 30px; height: 50px; } @keyframes move { 0% { opacity : 1; transform: scale(1); } 100% { opacity : 0; transform: scale(2); } } ::-webkit-scrollbar { width : 6px; height : 6px; background-color: #f9f9f9; } ::-webkit-scrollbar-thumb { border-radius : 6px; background-color: #187cff; }