css3动画 位移 实例

CSS3动画是一种让网页变得更加生动活泼的效果，在其中位移是非常基础的一项。下面的代码示例中，我们将演示如何使用CSS3动画实现位移效果：

    .box {
            width: 100px;
            height: 100px;
            background-color: #FF0000;
            position: relative;
            animation: move 2s linear infinite;
    }
    @keyframes move {
        0% {
    left: 0px;
}
        50% {
    left: 400px;
}
        100% {
    left: 0px;
}
    }
    

上述代码中，我们设置了一个红色的正方形盒子，使用了相对定位，然后通过动画属性animation来调用名为move的动画。

在keyframes中我们定义了动画的每一个关键帧，在0%的时候设置盒子的left值为0，表示一开始盒子在左侧；在50%的时候将left值设为400px，表示盒子往右移动；在100%的时候将left值设为0，表示盒子回到原始位置，然后我们设置了这一动画的循环次数为无限循环。

在这个例子中，我们通过CSS3动画实现了盒子在网页上的循环平移效果，展现出一种渐进式的运动感。

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