css 通告栏

文L

已于 2023-03-13 10:08:08 修改

阅读量334

点赞数

文章标签： css html 前端

于 2023-03-13 10:07:03 首次发布

本文链接：https://blog.csdn.net/A2382662404/article/details/129485396

版权

uni-app

官网地址：uni-notice-bar 组件

html + css 滚动效果

操作步骤：
1、创建html文件；
2、添加html代码架构；
3、在body标签中使用div和p标签设计一段文字；
4、添加script标签并写入css样式代码来实现文字滚动效果；
5、通过浏览器方式查看设计效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文字循环滚动效果</title> 
<style>
.title_bale {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #ff6700;
  overflow: hidden;
}
.title {
 padding-left: 20px;
 font-size: 12px;
 color: #000;
 display: inline-block;
 white-space: nowrap;
 animation: 10s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
   0% {
       transform: translateX(200px);
       -webkit-transform: translateX(200px);
   }100% {
       transform: translateX(-100%);
       -webkit-transform: translateX(-100%);
   }
}
@-webkit-keyframes wordsLoop {
   0% {
       transform: translateX(200px);
       -webkit-transform: translateX(200px);
   }
   100% {
       transform: translateX(-100%);
       -webkit-transform: translateX(-100%);
   }
}
</style>
</head>
<body>
  <div class="title_bale">
     <div class="title">
        文字滚动的内容
     </div>
  <div>
</body>
</html>

跑马灯组件

 <div class="marquee-wrap" ref="marquee-wrap">
    <div class="scroll" ref="scroll">
      <p class="marquee">{{text}}</p>
      <p class="copy" ref="copy"></p>
    </div>
    <p class="getWidth" ref="getWidth">{{text}}</p>
 </div>
 
export default {
 name: 'marquee',
 data () {
   return {
     timer: null,
     text: ''
   }
 },
 created () {
   let timer = setTimeout(() => {
     this.move()
     clearTimeout(timer)
   }, 1000)
 },

 mounted () {
   for (let item of this.val) {
   this.text += item
   }
 },
 methods: {
   move () {
   let maxWidth = this.$refs['marquee-wrap'].clientWidth
   let width = this.$refs['getWidth'].scrollWidth
     if (width <= maxWidth) return
   let scroll = this.$refs['scroll']
   let copy = this.$refs['copy']
     copy.innerText = this.text
     let distance = 0 
     this.timer = setInterval(() => {
       distance -= 1
       if (-distance >= width) {
         distance = 16
       }
       scroll.style.transform = 'translateX(' + distance + 'px)'
     }, 20)
   }
 },
 beforeDestroy () {
   clearInterval(this.timer)
 }
}
<style>
.marquee-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.marquee{
  margin-right: 0.16rem;
}
p {
  word-break:keep-all;
  white-space: nowrap;
  font-size: 0.28rem;
}
.scroll {
  display: flex;
}
.getWidth {
  word-break:keep-all;
  white-space:nowrap;
  position: absolute;
  opacity: 0;
  top: 0;
}
</style>