胶州国际网站建设效果_无棣网页设计_杭州seo价格_广州百度快速排名优化

css实现标题跑马灯效果

      <div class="topBar"><span class="scrolling-text">滚动字幕</span></div>

@keyframes marquee {0% {transform: translateX(300%);}100% {transform: translateX(-300%);}
}.topBar {width:100%;height: 45px;line-height: 45px;background: #FFE6CC;text-align: center;font-weight: 500;font-size: 14px;color: $fontCoco;overflow: hidden;position: relative;.scrolling-text {display: inline-block;white-space: nowrap;animation: marquee 30s linear infinite;}.scrolling-text:hover {animation-play-state: paused;cursor: pointer;}}