纯 CSS 实现的三种通知栏滚动效果 ​

纯 CSS 实现的三种通知栏滚动效果

第一种 ​

1. 视口容器高度需要固定，超出视口容器隐藏内容；
2. 为了营造出无缝滚动回来，内容需要准备两份，彼此紧随；
3. 通过移动内层 translatey 实现滚动效果；
4. 在第一份内容完全滚出视口容器的一瞬间，立刻将内容位置进行复原；
5. 通过 infinite 来循环此过程；

第二种 ​

1. 视口容器高度需要固定，超出视口容器隐藏内容；
2. 为了营造出无缝滚动回来，内容需要准备两份，彼此紧随；
3. 通过移动内层 translatey 实现滚动效果；
4. 在第一份内容完全滚出视口容器的一瞬间，立刻将内容位置进行复原；
5. 通过 infinite 来循环此过程；

第三种 ​

1. 这种视口容器高度就不需要固定了，它并不依赖，超出视口容器隐藏内容；
2. 利用 padding-right 来制造空白间隔，以百分比为单位；
3. 内容需要准备两份，通过 animation-delay 来延时第二份内容的出现，这里也有另一个思路就是直接来移动内层容器的 translatex，与第一种是一样的道理；