php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例

这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细&＃xff0c;对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

代码如下

{{notice}}

x

data: {

//初始化数据

hideNotice: false,

notice: &＃39;&＃39;,

}

// 点击关闭公告

switchNotice: function() {

this.setData({

hideNotice: true

})

},

&＃64;keyframes remindMessage {

0% {

-webkit-transform: translateX(90%);

}

100% {

-webkit-transform: translateX(-180%);

}

}

.tongzhitext {

margin-right:80rpx;

margin-left: 10rpx;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

.tongzhi-text {

font-size: 28rpx;

animation: remindMessage 14s linear infinite;

width: 100%;

color: #d09868;

display: block;

}

.notice-wrap {

background: #ffebda;

width: 100%;

height: 60rpx;

line-height: 60rpx;

color: #d09868;

font-size: 28rpx;

}

.closeView {

width: 45rpx;

height: 45rpx;

line-height: 45rpx;

position: absolute;

right: 20rpx;

top: 5rpx;

text-align: center;

font-size: 35rpx;

}

效果展示

以上就是本文的全部内容&＃xff0c;希望对大家的学习有所帮助&＃xff0c;也希望大家多多支持。