微信小程序纯css制做跑马灯效果

最新推荐文章于 2024-05-30 10:50:01 发布

原创最新推荐文章于 2024-05-30 10:50:01 发布 · 656 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #css

微信小程序专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种不依赖JavaScript，仅使用CSS实现两端有间距的滚动通知栏的方法。通过@keyframes动画和相对定位，创建了一个类似有赞效果的滚动通知栏。示例代码中展示了如何设置伪类before和after来制造间距，并通过动画控制文字从右至左滚动，最终回到初始位置。

效果

思路

太多案例都是js操作了，我真的看不懂，偶然看到有人用css做，但是不太合我心意，我的这个noticeBar两端是有间距的，方便可以放点slot。类似于有赞的效果：
在这里插入图片描述

利用动画@keyframes实现
利用盒子的相对定位、绝对定位。利用子绝父相的道理，用view套住要展示的文字。
一开始文字是left:100%到最后left:-150%就是为了能全部文字过一遍。
用两个伪类before和after遮住文字，营造出有间距的样子。

源码(随便改改都彳亍)

<view class="rollCon">
  <view class="box">
    <view class="text">
    995年JavaScript诞生时如早一年。在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
    </view>
  </view>
</view>

.rollCon {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60rpx;
  box-sizing: border-box;
  z-index: 100;
  background: #fde8c7;
  font-size: 20rpx;
  line-height: 60rpx;
}
  
.rollCon::before {
	content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    display: inline-block;
    height: 100%;
    z-index: 100;
    background: #fde8c7;
}
    
.rollCon::after {
 	content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    display: inline-block;
    height: 100%;
    z-index: 100;
    background: #fde8c7;
 }
   
.box {
    width: 100%;
    position: relative;
    white-space: nowrap;
}
   
.text {
	white-space: nowrap;
    position: absolute;
    top: 0;
    font-size: 24rpx;
    animation: around 10s infinite linear;
}
@keyframes around {
  from {
    left: 100%;
    right: 1%;
  }
  to {
    left: -150%;
  }
}