纯css3实现三个版本的滚动公告
前情：老板说一个好的员工都是让甲方做选择题而不是问答题。
今天需要上一个公告，基于“前情”准备了三个版本。
第一版：横向单条从右往左滚动。。。。。。
<div class="horNotice"><div class="horMove"><span class="item">我们来喽，我们来喽，欢迎来到我的直播间！</span><span class="item">我们来喽，我们来喽，欢迎来到我的直播间！</span></div></div>
.horNotice {position: relative;width: 100%;margin: 0 auto;overflow: hidden;white-space: nowrap;height: 40px;
}
.horNotice .horMove {position: absolute;top: 0;left: 100%;white-space: nowrap;animation: moveAniHor 40s linear infinite normal;
}
.horNotice .horMove .item {font-size: 16px;color: red;
}
@keyframes moveAniHor {0% {left: 100%;}50% {left: 0;}100% {left: -100%;}
}
第二版：横向多条上下切换滚动。。。。。。
<div class="horNoticeTwo"><div class="horMoveTwo"><div class="item">种草成功，点小心心！</div><div class="item">种草成功，点小心心！</div></div></div>
.horNoticeTwo {position: relative;width: 100%;margin: 0 auto;overflow: hidden;white-space: nowrap;height: 40px;
}
.horNoticeTwo .horMoveTwo .item {position: absolute;top: 0;left: 0;white-space: nowrap;font-size: 20px;
}
.horNoticeTwo .horMoveTwo .item:nth-child(1) {animation: moveAni 5s linear infinite normal;
}
.horNoticeTwo .horMoveTwo .item:nth-child(2) {animation: moveAni2 5s linear infinite normal;
}
@keyframes moveAni {0% {top: 0;opacity: 1;}50% {top: 0;opacity: 1;}75% {top: -50%;opacity: 1;}100% {top: -100%;opacity: 0;}
}
@keyframes moveAni2 {0% {top: 100%;opacity: 0;}50% {top: 100%;opacity: 0;}75% {top: 50%;opacity: 1;}100% {top: 0;opacity: 1;}
}
第三版：纵向单条从下往上滚动。。。。。。
<div class="verNotice"><div class="verMove"><p>O<br>M<br>G<br>！<br>也太好看了吧<br>！<br>美们<br>，<br>买它<br>！<br></p></div></div>
.verNotice {height: 100%;width: 20px;overflow: hidden;position: absolute;top: 0;left: 10px;
}
.verNotice p {margin: 0;width: 20px;text-align: center;font-size: 20px;position: absolute;top: 100%;animation: anim1 10s linear infinite;
}
@keyframes anim1 {0% {top: 100%;}50% {top: 0;}100% {top: -100%;}
}
一般需要字体垂直排布时只要设置好宽度文字就会自动排布，但是字母和标点不一定垂直排布，这时候就需要手动换行了。