CSS3 transition 实现通知消息轮播条

下面是CSS3 transition 实现通知消息轮播条的完整攻略：

什么是CSS3 transition

CSS3 transition 是一种比 CSS2 中的 animate 更加强大的动画属性。相比于 animate，transition 在不需要 JavaScript 的情况下，能够通过 CSS 来为元素添加动画特效。

如何使用CSS3 transition 实现通知消息轮播条

要实现通知消息轮播条，需要使用到以下 CSS 属性：

1. transform，用于改变元素的位置、大小和旋转角度等属性；
2. transition，用于定义元素从一种样式逐渐变为另一种样式的过渡效果。

下面是一些实例说明：

示例1：使用transform改变元素位置实现轮播条

一般来说，消息轮播条会包括一些通知的标题和摘要信息。我们可以通过transform改变元素位置来实现轮播条的滚动效果。

首先，我们需要定义一个container元素，用来包含所有消息通知元素。container元素需要设置一个固定宽度和高度，并且必须设置 overflow:hidden 属性，以便隐藏消息通知元素超出的部分。

接下来，我们需要为每个消息通知元素设置一个class，比如是 .notice-item，这个class将被用来控制消息通知元素的样式（比如字体大小、颜色等）。

最后，我们只需要使用 CSS3 的 transform 属性为 .notice-item 元素定义一个动画，就可以实现所有通知消息在轮播条上滚动的效果了。

<style>
    .container {
        width: 300px;
        height: 50px;
        overflow: hidden;
    }
    .notice-item {
        height: 50px;
        display: inline-block;
        white-space: nowrap;
    }
    .notice-item .title {
        display: inline-block;
        font-weight: bold;
        padding-right: 10px;
    }
    .notice-item .content {
        display: inline-block;
    }
    /* 为notice-item实现动画效果 */
    .notice-item {
        transform: translateX(0);
        animation: shift-left 10s linear infinite;
        -webkit-animation: shift-left 10s linear infinite;
    }
    /* 动画的关键帧 */
    @keyframes shift-left {
        0% {transform: translateX(0);}
        100% {transform: translateX(-200%);}
    }
    @-webkit-keyframes shift-left {
        0% {-webkit-transform: translateX(0);}
        100% {-webkit-transform: translateX(-200%);}
    }
</style>
<div class="container">
    <div class="notice-item">
        <span class="title">通知标题1</span>
        <span class="content">通知内容1</span>
    </div>
    <div class="notice-item">
        <span class="title">通知标题2</span>
        <span class="content">通知内容2</span>
    </div>
    <div class="notice-item">
        <span class="title">通知标题3</span>
        <span class="content">通知内容3</span>
    </div>
</div>

这个例子中，我们定义了一个 container 元素，它的宽度是 300px，高度是 50px， overflow 属性被设置为 hidden。接着，我们给每个 notice-item 定义了一些基本样式，然后为 notice-item 设置了一个动画，动画会沿着轴水平移动 notice-item 的宽度的几倍，正常情况下不会出现滚动条。

示例2：使用opacity 改变元素透明度实现轮播条

除了使用 transform 改变元素位置之外，还可以使用 opacity 属性改变元素透明度，实现轮播条的滚动效果。

具体来说，我们只需要用类似于上面的方式为每个消息通知元素添加样式，然后将 opacity 设置为 0 或者 1，然后使用 transition 属性实现一个渐变效果即可：

<style>
    .container {
        width: 300px;
        height: 50px;
        overflow: hidden;
    }
    .notice-item {
        height: 50px;
        display: inline-block;
        white-space: nowrap;
    }
    .notice-item .title {
        display: inline-block;
        font-weight: bold;
        padding-right: 10px;
    }
    .notice-item .content {
        display: inline-block;
    }
    /* 为notice-item实现动画效果 */
    .notice-item {
        opacity: 0;
        transition: opacity 1s linear;
        -webkit-transition: opacity 1s linear;
    }
    .notice-item.active {
        opacity: 1;
    }
</style>
<div class="container">
    <div class="notice-item active">
        <span class="title">通知标题1</span>
        <span class="content">通知内容1</span>
    </div>
    <div class="notice-item">
        <span class="title">通知标题2</span>
        <span class="content">通知内容2</span>
    </div>
    <div class="notice-item">
        <span class="title">通知标题3</span>
        <span class="content">通知内容3</span>
    </div>
</div>

在这个例子中，我们定义了一个 container 元素，它的宽度是 300px，高度是 50px， overflow 属性被设置为 hidden。每个 notice-item 元素被定义了一些基本样式，其中 opacity 被默认设置为 0，然后我们使用 transition 属性实现了一个 1s 的过渡效果，可以让元素从 opacity:0 动画变为 opacity:1。

那么，当将 .active 类应用到某个 notice-item 元素上时，这个元素就会从透明变成不透明，这就是我们最终要达到的“滚动标条”的效果。最后通过 JavaScript 代码每定时间隔切换 active 类的元素即可。