微信小程序里实现跑马灯效果
在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS
wxml:
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