标签：marquee 微信 100% 程序 height 跑马灯 animation margin

在微信小程序 里实现跑马灯效果，类似滚动字幕或者滚动广告之类的，使用简单的CSS样式控制，没用到JS

wxml:

<!-- 复制的跑马灯效果 --> <view class="marquee_container" style="--marqueeWidth--:-12em">   <view class="bulletin_box_img2">     <image src="../../images/icon/bulletin.png" alt=""></image>   </view>   <view class="marquee_text">积分商城兑换商品将于每月25日集中发货，请耐心等待，介意慎拍</view> </view>

wxss:

/*首页跑马灯效果*/ @keyframes around {   from {    margin-left: 50%;   }   to {    /* var接受传入的变量 */    margin-left: var(--marqueeWidth--);   }   }      .marquee_container{   background-color: #fff;   height: 80rpx;   line-height: 80rpx;   position: relative;   width: 100%;   margin-top:0rpx;  }  .marquee_container:hover{   /* 不起作用 */   animation-play-state: paused;  }  .marquee_text{   color:#333;   font-size: 28rpx;   display: inline-block;   white-space: nowrap;   animation-name: around;   animation-duration: 10s; /*过渡时间*/   animation-iteration-count: infinite;   animation-timing-function:linear;  }  .bulletin_box_img2{   position: absolute;   width: 60rpx;   height: 54rpx;   z-index: 9;   padding-left: 15rpx;   padding-right: 15rpx;   margin-top: 14rpx;   background: #fff; } .bulletin_box_img2 image{   width: 100%;   height: 100%; }

 

 

 

 

参考链接：https://www.jb51.net/article/160412.htm

标签：marquee,微信,100%,程序,height,跑马灯,animation,margin
来源： https://www.cnblogs.com/zhainverer/p/15675070.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。