css - 如何将屏幕右侧的文本移动到屏幕左侧

Question

我想做一个游戏。如何让 h1 标签在 reactjs 中从左向右移动？

import React from 'react';

const Hello = (props) => (<React.StrictMode><h1 className = "App">Hello {props.name}</h1></React.StrictMode>);

export default Hello;

Answer 1

我创建了这个解决方案:codepen :

const App = () => {
    return (
      <div className="wrapper">
        <p className="marquee">Hello, world!</p>
      </div>
    );
}

  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

CSS文件:

body{ 
    overflow: hidden;
}
p{
    position: absolute;
    white-space: nowrap;
    animation: floatText 5s infinite alternate ease-in-out;
}

@-webkit-keyframes floatText{
  from {
    left: 00%;
  }

  to {
    /* left: auto; */
    left: 100%;
  }
}