記住該記住的,忘記該忘記的。改變能改變的,接受不能改變的。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiYWan5SO2IDO5YWZxEjZidzNzcTZyYzX3IjNxATMxAzLchDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.gif)
<view class='notice-board'>
<view class="scorll-view">
<view class="notice animation">記住該記住的,忘記該忘記的。改變能改變的,接受不能改變的。</view>
</view>
</view>
.notice-board {
width: 100%;
box-sizing: border-box;
font-size: 28rpx;
height: 60rpx;
background: #888af7;
display: flex;
align-items: center;
position: fixed;
top: 0;
z-index: 999;
}
.scorll-view {
flex: 1;
line-height: 1;
white-space: nowrap;
overflow: hidden;
color: yellow;
}
.notice{
transform: translateX(100%);
}
.animation {
-webkit-animation: rolling 12s linear infinite;
animation: rolling 12s linear infinite;
}
@-webkit-keyframes rolling {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-170%);
}
}
@keyframes rolling {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-170%);
}
}