结合 CSS3 transition transform 实现简单的跑马灯效果

1. 跑马灯效果的实现

1.1 什么是跑马灯效果

跑马灯是一种网页设计效果，可以通过向左或向右移动让内容一直滚动显示。在网页上使用跑马灯的主要目的是让重要信息或需要关注的信息能够自动快速的在屏幕上滚动过去。

1.2 如何实现跑马灯效果

实现跑马灯效果的常用方法有以下 4 种：

- CSS3 transform + transition

- CSS3 animation

- JavaScript 代码实现

- jQuery 插件实现

本文我们主要介绍第一种方法，使用 CSS3 transform + transition 实现跑马灯效果。

1.3 CSS3 transform + transition 实现方法

首先，需要使用 CSS 的 transform 属性来改变盒子的位置，然后使用 transition 属性来让盒子平滑过渡。其实现方法如下：

.wrap {
  width: 100%;
  overflow: hidden;
}
.wrap ul {
  width: 200%;
  overflow: hidden;
  display: flex;
  animation: roll 10s linear infinite;
}
.wrap ul li {
  width: 50%;
  float: left;
}
@keyframes roll {
  0% { transform: translate3d(0,0,0) }
  100% { transform: translate3d(-50%,0,0) }
}

其中，`.wrap` 是外层容器，`ul` 是包含所有滚动内容的内层容器，在 `wrap` 中设定宽度和 `overflow: hidden`，使其可以观察到下面的动态效果。`li` 是内部滚动元素，设置宽度和浮动使其排列在一行。

使用 `transform` 属性，将内容块转换（透视，平移，旋转）成三维空间中的物体，然后使用 `transition` 属性使其平滑过渡。

`@keyframes` 规则定义了动画序列，具体修改 `transform` 属性来实现移动动画。

完整代码如下：

/* 轮播图 */

.carousel-wrap {
  overflow: hidden;
}
.carousel-contents {
  width: 200%;
  height: 100%;
  display: flex;
  transition: transform 1s;
  animation: roll 10s linear infinite;
}
.carousel-item {
  height: 100%;
  width: 50%;
  float: left;
  text-align: center;
}
/* 动画 */
@keyframes roll {
  0% { transform: translate3d(0,0,0) }
  100% { transform: translate3d(-50%,0,0) }
}

2. 小结

本文介绍了使用 CSS3 transform 和 transition 属性实现网页跑马灯效果的方法，并给出相应代码的实现。

对于前端开发人员来说，掌握基本的跑马灯效果实现能力，在实际开发过程中能够很好的帮助到我们，更多相关知识可以参考 MDN 等前端技术文档。