vue-danmaku
Version:
基于 Vue 的弹幕交互组件 | A danmaku component for Vue
1 lines • 867 B
CSS
.vue-danmaku{height:100%;overflow:hidden;position:relative;width:100%}.vue-danmaku .danmus{height:100%;left:0;opacity:0;position:absolute;top:0;-webkit-transition:all .3s;transition:all .3s;width:100%}.vue-danmaku .danmus.show{opacity:1}.vue-danmaku .danmus.paused .dm.move{animation-play-state:paused}.vue-danmaku .danmus .dm{color:#666;cursor:default;font-size:20px;position:absolute;transform:translateX(0);transform-style:preserve-3d;white-space:pre}.vue-danmaku .danmus .dm.move{animation-name:moveLeft;animation-play-state:running;animation-timing-function:linear;will-change:transform}.vue-danmaku .danmus .dm.pause{animation-play-state:paused}@keyframes moveLeft{0%{transform:translateX(0)}to{transform:translateX(var(--dm-scroll-width))}}@-webkit-keyframes moveLeft{0%{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(var(--dm-scroll-width))}}