#yyds干货盘点#CSS3实现匀速正方形轨迹运动

1.效果

2.代码

// html
<div class="path">
    <div class="box"></div>
</div>
// css
.path {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
    margin: 50px auto;
}

.box {
    width: 40px;
    height: 40px;
    background: #fb3;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 0;
    left: 0;
    animation: move 4s linear;
}

@keyframes move {
    25% {
        left: 200px;
        top: 0;
    }

    50% {
        left: 200px;
        top: 200px;
    }

    75% {
        left: 0;
        top: 200px;
    }
}

3.核心代码说明

4.总结

• CSS3动画