css实现公告内容滚动展示

最新推荐文章于 2024-01-10 14:12:40 发布

钥零零

最新推荐文章于 2024-01-10 14:12:40 发布

阅读量1.6k

点赞数 1

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

本文链接：https://blog.csdn.net/qingmuzhang/article/details/125315609

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现公告栏内容滚动循环展示

在这里插入图片描述

<template>
    <div class="mes-rut">
        <div class="dva rut-tit1">公告</div>
        <div class="dva rut-line"></div>
        <div class="dva rut-tit2 not-tit1">
          <div class="inner-container rut-tit3"  v-html="noticeContent">
          </div>
        </div>
      </div>
</template>
<style>
       /*重点实现样式*/
      .not-tit1 {
            position: absolute;
            left: 1.6rem;
            width: 80%;
            overflow: hidden;
        }
		.inner-container {
          margin-left: 100%; 
          width: 100%;
          animation: myMove 30s linear infinite; 
          animation-fill-mode: forwards;
        }
    	 /*文字无缝滚动*/
        @keyframes myMove {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(-2500px);
          }
        }
		.rut-tit3 {
            white-space: nowrap;
        }
		 /*以上*/
    
      .mes-rut {
            position: absolute;
            left: 0.45rem;
            top: 4.69rem;
            width: 9.1rem;
            height: 1rem;
            line-height: 1rem;
            padding: 0 0.3rem;
            background: #ffeefb;
            border-radius: 0.1rem 0.1rem 0 0;
            z-index: 99;
        }
		.dva {
            display: inline-block;
            vertical-align: middle;
        }
		.rut-tit1 {
            font-family: PingFangSC-Regular;
            font-size: 0.4rem;
            color: #ff0089;
        }
		.rut-line {
            color: #ffa6eb;
            height: 0.26rem;
            width: 1.5px;
            background: #ffa6eb;
            margin: 0 0.2rem;
        }
 </style>