目录

1. css实现抛物线

1. css实现抛物线

• 快速生成贝塞尔曲线参数 http://cubic-bezier.com/#.2,.92,.92,.25

<!-- 父元素控制水平运动，子元素控制垂直方向运动   -->
<div class="box">
    <div class="item"></div>
</div>

<style>
    .box {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 100px;
        top: 100px;
    }
    .item {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: pink;
    }
    /* 水平方向匀速移动100px */
    .box:hover {
        transform: translate(100px, 0);
        transition: 0.5s linear;
    }
     /* 垂直方向速度先快后慢，移动300px */
    .box:hover .item {
        transform: translate(0, 300px);
        transition: 0.5s cubic-bezier(.55,0,.85,.36);
    }
</style>