HTML代码：

<div class="card" style="width: 38rem; background-color:#F6F7F9;">
<div class="mt-2 mb-1 mr-2 ml-2">
<marquee scrollamount="5" direction="left" onmouseover=this.stop() onmouseout=this.start()>
<small class="text-muted"><i class="far fa-grin-alt"></i>    好的作品值得分享，值得赞赏！开发一个动作往往需要大量的精力，分享它们是一件高尚的事。如果Ta的作品帮到了你，请给Ta鼓励。你的赞赏将会带来更多的分享，从而帮到更多的人，谢谢你！</small>
</marquee>
</div>
</div>

<div class="Move_text card" style="max-width: 31rem; background-color:#F6F7F9;">
<div class="moving_text">
<div class="yidong_text">
<div class="mt-2 mb-2 mr-2 ml-2">
<small class="text-muted"><i class="far fa-grin-alt"></i>    好的作品值得分享，值得赞赏！开发一个动作往往需要大量的精力，分享它们是一件高尚的事。如果Ta的作品帮到了你，请给Ta鼓励。你的赞赏将会带来更多的分享，从而帮到更多的人，谢谢你！</small>
</div>
</div>
</div>
</div>

<!-------------内容从右至左滚动---------------->
<style>
.Move_text {
width: 100%;
overflow: hidden;
}
.moving_text {
white-space: nowrap;
animation: slide 15s 3s infinite linear;
}
.yidong_text {
display: inline-block;
width: 200px;
}
@keyframes slide {
0% { transform: translateX(0%); }
100% { transform: translateX(-50%); }
}
.moving_text:hover {
animation-play-state: paused;
transition: all 1s ease-out;
}
</style>
<!-------------内容从右至左滚动---------------->