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

2024年3月30日 87次阅读 来源: lgl_

https://blog.csdn.net/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>
    原文作者：lgl_
    原文地址: https://blog.csdn.net/lgl_19910331/article/details/82952067
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞