css3 跑马灯 演示

CSS3的强大功能不仅限于美化网页的样式，还可以实现很多有趣的动态效果，比如跑马灯。下面我们来演示一下如何使用CSS3实现一个简单的跑马灯效果。

style>
.marquee {
    width: 300px;
    height: 50px;
    overflow: hidden;
    border: 1px solid #ccc;
}
.marquee div {
    display: inline-block;
    padding-right: 100px;
    animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-100%);
}
}
    /style>
    div class="marquee">
    div>
    这是跑马灯效果的第一条信息/div>
    div>
    这是跑马灯效果的第二条信息/div>
    div>
    这是跑马灯效果的第三条信息/div>
    /div>
    

通过上面的代码，我们可以看到实现跑马灯效果的关键在于CSS3的动画属性animation和transform。

首先，我们给容器元素设置了一个固定的宽度和高度，并将其 overflow 属性设为 hidden，这是因为我们只想显示容器元素内部的一部分，隐藏其它部分。然后，我们在容器元素内部添加三个 div 元素，每个 div 元素都包含一条信息。接着，我们给 div 元素设置了 display: inline-block 属性使其在一行内显示，同时padding-right: 100px 增加了 div 元素之间的间隔。

最关键的是，我们使用了 CSS3 动画属性 animation，并给其设置了一个名为 marquee 的关键帧动画。在该动画中，我们通过 transform: translateX(-100%); 将div元素往左移动，直到左边界与容器元素的左边界贴在一起，这时候我们让动画从头再开始，实现了循环滚动的效果。

通过上述的CSS3代码，实现了简单的CSS3跑马灯效果。有了这样的例子，相信大家可以更好地理解CSS3动画属性的使用，也可以根据自己的需要进行进一步的改进和扩展。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！