CSS3 三次贝塞尔曲线(cubic-bezier)及其应用

CSS3 cubic-bezier详解及应用

最新推荐文章于 2025-02-22 18:15:23 发布

原创

最新推荐文章于 2025-02-22 18:15:23 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

本文深入探讨了CSS3中的三次贝塞尔曲线(cubic-bezier)的概念，解释了如何定义自定义过渡动画的缓动函数。通过实例，展示了cubic-bezier在创建平滑动态效果中的关键作用，帮助开发者更好地控制网页元素的动画效果。

https://blog.youkuaiyun.com/zhaozjc112/article/details/52909172

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title> css3圆形轨迹动画 </title>
    <style type="text/css">
        @keyframes animX{
            0% {left: 0px;}
            100% {left: 500px;}
        }
        @keyframes animY{
            0% {top: 0px;}
            100% {top: 500px;}
        }

        #ball {
            width: 20px;
            height: 20px;
            background-color: #f66;
            border-radius: 50%;
            position: absolute;
            animation: animX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1)  0s infinite alternate;
        }

        #lopp {
            width: 498px;
            height: 498px;
            border: 2px solid #999;
            border-radius: 50%;
            position: absolute;
            left: 9px;
            top: 9px;
        }

    </style>
</head>
<body>
<div id="lopp"></div>
<div id="ball"></div>
</body>
</html>