文字横向滚动效果

算云烟

已于 2023-07-20 14:05:59 修改

阅读量208

点赞数

分类专栏： CSS 文章标签： css 前端 html

于 2023-07-20 14:05:39 首次发布

本文链接：https://blog.csdn.net/zxcbnm7089/article/details/131828928

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该效果类似于街边广告牌文字横向滚动效果

<!DOCTYPE html>
<html>
<head>
<style>
 
.cssmarquee {
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
  background: rgba(255, 255, 255, .6);
  overflow: hidden;
}
.cssmarquee .wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: cssmarqueeWrapper 10s linear infinite;
}
.cssmarquee .marqueeWords {
  position: absolute;
  background: rgba(0, 255, 255, .5);
  height: 100%;
  left: 0;
  top: 0;
  font-weight: bold;
  color: #fff;
  margin: 0;
  text-align: left;
  white-space: nowrap; /* no wrap */
  transform:translateX(0);
  animation: cssmarquee 10s linear infinite;
}
@keyframes cssmarqueeWrapper {
  0% {
    transform: translateX(100%); /* parent 100% */
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes cssmarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* words -100% */
  }
}
</style>
</head>
<body>
 
<div class="cssmarquee">
  <div class="wrapper">
    <p class="marqueeWords">
      Hello world!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热烈庆祝程序员节！&nbsp;&nbsp;May you have a happy day!&nbsp;&nbsp;God bless  you!&nbsp;&nbsp;Thanks you!&nbsp;&nbsp;
    </p>
  </div>
</div>
</body>
</html>