CSS3-贝塞尔曲线

最新推荐文章于 2025-06-04 18:31:15 发布

原创最新推荐文章于 2025-06-04 18:31:15 发布 · 569 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了CSS3中的贝塞尔曲线，详细解释了如何使用它来定义过渡和动画的速度曲线，通过实例展示了如何创建平滑的视觉效果，并提供了调整贝塞尔曲线参数的技巧，帮助开发者更好地控制网页元素的动态行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贝塞尔曲线</title>
    <style type="text/css">

    /*定义关键帧动画*/
    @keyframes hello {
        0% {width: 100px;height: 100px;}
        100% {/*width: 500px;height: 500px;*/transform: translateX(500px) translateY(500px);}
    }
    @-webkit-keyframes hello {
        0% {width: 100px;height: 100px;}
        100% {/*width: 500px;height: 500px;*/ transform: translateX(500px) translateY(500px);}
    }

    div {
        width: 100px;
        height: 100px;
        background-color: red;
        /*调用动画*/
        animation-name: hello;
        -webkit-animation-name: hello;

        animation-duration: 1.5s;
        -webkit-animation-duration: 1.5s;

        animation-timing-function: cubic-bezier(0,.15,.65,1.32);
        -webkit-animation-timing-function: cubic-bezier(0,.15,.65,1.32);

        animation-fill-mode: forwards;

        /*animation-iteration-count: infinite;*/

        /*animation-direction: alternate;*/
    }

    </style>
</head>
<body>

    <div ></div>

</body>
</html>