使用跑马灯输出随机语录
时间: 2024-02-21 10:47:47 浏览: 22
好的,以下是一些随机语录:
1. 人生如棋,落子无悔。
2. 世上无难事,只怕不努力。
3. 一日不学,天下无知。
4. 书山有路勤为径,学海无涯苦作舟。
5. 明日复明日,明日何其多。
6. 天行健,君子以自强不息。
7. 成功源于追求卓越的态度。
8. 世界上没有绝对的安全,只有相对的安全。
9. 一分耕耘,一分收获。
10. 生命不止,奋斗不息。
相关问题
我需要使用react输出一个跑马灯
我可以为您提供一个使用React输出跑马灯的示例代码:import React from 'react';import {Marquee, MarqueeDirection} from 'react-marquee-slider'; const App = () => { return ( <Marquee // Set the direction of the marquee direction={MarqueeDirection.left} // Speed of the marquee speed={60} // Delay between each loop loops={1} > 这是一个跑马灯展示! </Marquee> );}export default App;
使用js写个跑马灯文字
以下是一个简单的Javascript跑马灯文字的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>跑马灯文字</title>
<style type="text/css">
#marquee {
overflow: hidden;
position: relative;
background-color: #eee;
height: 30px;
font-size: 20px;
font-weight: bold;
line-height: 30px;
padding-left: 100%;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div id="marquee">这是跑马灯文字,这是跑马灯文字,这是跑马灯文字,这是跑马灯文字,这是跑马灯文字。</div>
<script type="text/javascript">
// 获取跑马灯元素的宽度
var marqueeWidth = document.getElementById('marquee').offsetWidth;
// 设置跑马灯动画的持续时间
var duration = marqueeWidth / 50;
// 设置跑马灯动画的样式
document.styleSheets[0].addRule('@keyframes marquee', '0% { transform: translateX(0); } 100% { transform: translateX(-' + marqueeWidth + 'px); }', 0);
// 设置跑马灯动画的持续时间
document.styleSheets[0].addRule('#marquee', 'animation-duration: ' + duration + 's;', 0);
</script>
</body>
</html>
```
该示例使用CSS3动画实现跑马灯效果,通过Javascript动态计算文字宽度和设置动画持续时间来实现自适应效果。可以根据需要进行修改和定制。