@tomiaa/live2d
Version:
2 lines (1 loc) • 1.45 kB
CSS
@keyframes live2d-loading-rotate{0%{transform:rotate(-360deg)}}.k-live2d{position:fixed;bottom:0;right:0;z-index:2000}.k-live2d .k-hitokoto{top:-80px}.k-live2d .k-live2d__loading{position:absolute;right:0;bottom:0;font-size:25px;animation:live2d-loading-rotate 2s linear infinite}.k-live2d .k-live2d__control{position:absolute;top:0;right:.2em;z-index:2}.k-live2d .k-live2d__control svg{margin-bottom:.2em}.k-live2d .k-live2d__control i{display:block;position:relative}.k-live2d .k-live2d__control i:after{opacity:0;content:attr(data-tip);position:absolute;right:120%;top:0%;white-space:nowrap;line-height:1;background-color:#303133;color:#fff;padding:5px 11px;font-size:12px;border-radius:4px}.k-live2d .k-live2d__control i:hover:after{opacity:1}.k-live2d__expand{position:fixed;bottom:1em;right:1em;width:50px;height:50px;cursor:pointer;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.8);border-radius:50%;box-shadow:0 2px 8px #00000026;transition:all .3s;z-index:2001}.k-live2d__expand svg{width:30px;height:30px;color:#667eea}.k-live2d__expand:hover{background:rgba(255,255,255,.95);transform:scale(1.1)}.k-live2d__expand:after{opacity:0;content:attr(data-tip);position:absolute;right:120%;top:50%;transform:translateY(-50%);white-space:nowrap;line-height:1;background-color:#303133;color:#fff;padding:5px 11px;font-size:12px;border-radius:4px;pointer-events:none}.k-live2d__expand:hover:after{opacity:1}