漂浮運動軌跡是一種在網頁中使用JS和CSS來實現的效果，它可以讓頁面中的元素像飄浮的小球一樣，沿著指定的路徑運動，給人以輕松、有趣的感覺。以下是一個簡單的示例代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漂浮運動軌跡</title>
<style>
.ball {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
var ball = document.querySelector('.ball');
var path = new Path2D('M10 80 Q 50 10 90 80 T 170 80');
var length = path.getTotalLength();
var speed = 0.5;
var distance = 0;
function moveBall() {
distance += speed;
var pos = path.getPointAtLength(distance % length);
ball.style.transform = 'translate(' + pos.x + 'px, ' + pos.y + 'px)';
window.requestAnimationFrame(moveBall);
}
moveBall();
</script>
</body>
</html>在上面的代碼中，我們首先定義了一個 CSS 類 ball ，用于設置小球的樣式。然后，在頁面中創建了一個 div 元素，并添加了該類。在 JS 部分，我們通過 document.querySelector() 方法獲取了這個 div 元素，并定義了一條二次貝塞爾曲線的路徑，并獲取了它的總長度。在 moveBall() 函數中，我們定義了球的運動速度 speed 和它當前的運動距離 distance ，并通過 window.requestAnimationFrame() 方法來不斷更新小球的位置，使它一直保持在路徑上運動。最后，我們在函數內使用了 path.getPointAtLength() 方法來獲取小球在運動路徑上當前的點的位置，并將該位置通過 transform 屬性應用到球上，使它移動到相應的位置。
上一篇滾動條設置 css
下一篇mysql 索引設計