.vue-danmaku{position:relative;overflow:hidden;height:100%;width:100%}.vue-danmaku .danmus{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;-webkit-transition:all .3s;transition:all .3s}.vue-danmaku .danmus.show{opacity:1}.vue-danmaku .danmus.paused .dm.move{animation-play-state:paused}.vue-danmaku .danmus .dm{position:absolute;font-size:20px;color:#666;white-space:pre;cursor:default;transform:translate(0);transform-style:preserve-3d}.vue-danmaku .danmus .dm.move{will-change:transform;animation-name:moveLeft;animation-timing-function:linear;animation-play-state:running}.vue-danmaku .danmus .dm.pause{animation-play-state:paused}@keyframes moveLeft{0%{transform:translate(0)}to{transform:translate(var(--dm-scroll-width))}}@-webkit-keyframes moveLeft{0%{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(var(--dm-scroll-width))}}body{margin:0;padding:0}#app{position:relative;height:100vh;width:100vw;display:flex;align-items:center;justify-content:center}#app .demo{position:fixed;top:0;width:100%;height:100%;z-index:0;background:linear-gradient(45deg,#5ac381,#20568b)}#app .demo .danmu-item{display:flex;align-items:center;z-index:10;color:#fff}#app .demo .danmu-item .img{height:25px;width:25px;border-radius:50%;margin-right:5px}#app .main{position:absolute;z-index:1;display:flex;justify-content:center;align-items:center;flex-direction:column}#app .main .intro{display:inline-block;color:#fff;text-align:center;text-shadow:2px 4px 6px rgba(0,0,0,.4)}#app .main .intro h1{font-size:48px;line-height:32px}#app .main .action{margin-top:20px;color:#fff;min-width:360px;min-height:300px}#app .main .action .title{width:80px;display:inline-block;text-align:right}#app .main .action .btn{color:#000;background:#fff;border:none;padding:6px 16px;margin-right:8px;border-radius:5px;min-height:31px;outline:none;cursor:pointer;transition:all .3s}#app .main .action .btn:hover{background-color:#f3f7fa}#app .main .action .btn:active{background-color:#fff}#app .main .action .ipt{width:130px;padding:8px 16px;border-radius:5px;outline:none;border:none;margin-right:8px}#app .github-corner:hover .octo-arm{animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 500px){#app .main{transform:scale(.9);transform-origin:center;transition:transform .3s ease}#app .github-corner:hover .octo-arm{animation:none}#app .github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}