如何将文本移动到屏幕右侧并返回到左侧屏幕？

Question

如何将文本移动到屏幕右侧并返回到左侧屏幕？

3

我想制作一个游戏。如何在ReactJS中使h1标签左右移动？

import React from 'react';

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

export default Hello;

- Umut Arpat

这不是一个React任务，主要是CSS。请尝试访问https://dev59.com/5Ggv5IYBdhLWcg3wVPTU - rotimi-best

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ibraheem Ahmed · Accepted Answer

我创建了这个解决方案：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%;
  }
}