测试

<style>
@font-face {

  font-family: "iconfont"; /* Project id 2516453 */

  src: url("//at.alicdn.com/t/font_2516453_g6qjhhqblt9.woff2?t=1620545333370")

      format("woff2"),

    url("//at.alicdn.com/t/font_2516453_g6qjhhqblt9.woff?t=1620545333370")

      format("woff"),

    url("//at.alicdn.com/t/font_2516453_g6qjhhqblt9.ttf?t=1620545333370")

      format("truetype");

}

.gonggao-iconfont {

  font-family: "iconfont" !important;

  font-size: 16px;

  font-style: normal;

  -webkit-font-smoothing: antialiased;

  -webkit-text-stroke-width: 0.2px;

  -moz-osx-font-smoothing: grayscale;

}

.gundong-gonggao {

  width: 400px;/*宽度，自己看着大小调*/

  height: 60xp;/*高度，自己看着大小调*/

  background-color: #fff;

  align-items: center;

  display: flex;

  border-radius: 8px;

  box-sizing: border-box;

  height: 56px;

  margin-bottom: 24px;

  padding: 0 20px;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  font-size: 18px;/*字体大小，自己看着大小调*/

  color: #353535;

  margin-bottom: 30px;

  cursor: pointer;

  box-shadow: 2px 1px 8px 1px rgb(228, 232, 235);

  margin: 40px auto;

  i {

    color: #ff6146;

    font-size: 20px;

    margin-right: 10px;

  }


  @keyframes marquee {

    0% {

      transform: translateX(0);

    }

    100% {

      transform: translateX(-100%);

    }

  }

  .gonggao-content{

    flex: 1;

    overflow: hidden;

    

    span {

      display: block;

      width: auto;

      white-space: nowrap;

      animation: marquee 30s linear infinite;

      padding-left: 105%;

      padding-right: 120%;

      /*如果不希望鼠标停留后暂停公告*/

      &:hover {

        animation-play-state: paused;

      }

      /*就把注释夹着的这段代码删了*/

    }

  }

}
</style>