graceScroll.vue 541 B

12345678910111213141516
  1. <template>
  2. <view class="grace-scroll-body">
  3. <view class="grace-scroll-msg grace-scrolling">
  4. <slot></slot>
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {}
  10. </script>
  11. <style scoped>
  12. .grace-scroll-body{width:100%; line-height:60rpx; height:60rpx; overflow:hidden;}
  13. .grace-scroll-msg{line-height:60rpx; height:60rpx; white-space:nowrap;}
  14. .grace-scrolling{animation:graceScrollingx 12s linear infinite;}
  15. @keyframes graceScrollingx{ 0% { transform: translateX(100%); } 100% { transform: translateX(-200%); }}
  16. </style>