文字横向滚动效果

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

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!        热烈庆祝程序员节!  May you have a happy day!  God bless  you!  Thanks you!  
    p>
  div>
div>
body>
html>

你可能感兴趣的:(CSS,css,前端,html)