[分享]css3左右移动效果

Css3作为一种能够美化网页样式的语言，在网页设计中有着非常重要的作用。其中最常见的就是各种动态效果，比如说左右移动效果。这种效果可以通过一个属性实现，即“transform: translateX(...

Css3作为一种能够美化网页样式的语言，在网页设计中有着非常重要的作用。其中最常见的就是各种动态效果，比如说左右移动效果。这种效果可以通过一个属性实现，即“transform: translateX()”，我们可以通过改变括号中的数值来调整移动的距离。

.move {
    transition: transform .3s ease-in-out;
    transform: translateX(0);
}

.move:hover {
    transform: translateX(50px);
} 

在上面的代码中，我们首先定义了一个类名为“.move”的元素，其中设置了过渡属性“transition”和初始左右位置为0的“transform: translateX(0);”属性。接着，在浮动此元素的时候，我们通过添加“.move:hover”来在鼠标悬浮时触发移动效果。“transform: translateX(50px);”表示向右移动50像素。

比如说我们想要实现单词滚动的效果，可以把一个包含若干单次的div置于另一个装载区域内，接着通过移动子元素的位置来实现滚动效果：

.scroll-wrapper {
    overflow: hidden;
}
.scroll-item {
    white-space: nowrap;
    display: inline-block;
    padding-right: 50px;
    animation: move-left 10s linear infinite;
}

@keyframes move-left {
    to {
        transform: translateX(-100%);
    }
} 

在上面的代码中，我们将父级元素“.scroll-wrapper”设为溢出隐藏的状态，这个类名下的子元素“scroll-item”里装有需要滚动的单词条。接着在子元素中加上偏移量并通过“animation”属性引入动画效果，同时通过“keyframes”设置关键帧来使得单次滚动的距离为100%。

以上就是利用CSS3实现左右移动效果的方法，希望对想优化自己网页的你有所帮助。