在现代网页设计中，动画效果能够显著提升用户体验和交互性。在本篇文章中，我们将探讨如何利用 CSS 动画。通过这个项目，我们可以学习到 CSS 动画的基本用法，
1. 项目概述
本项目的目标是创建一个红色小球在页面上运动，同时绘制出它的运动轨迹。我们将使用 HTML、CSS实现。
2. 项目结构
我们的项目结构如下：
- index.html：页面结构。
- index.css：样式设置。
3. HTML 代码
我们首先构建基本的 HTML 结构。以下是 index.html 的代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贝塞尔曲线</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<canvas id="canvas"></canvas>
<div class="ball"></div>
</body>
</html>这里，我们包含了一个 Canvas 元素用于绘制轨迹，以及一个 div 元素来表示小球。
4. CSS 代码
接下来是样式设置，保存在 styles.css 中：
css
// common css
body {
margin: 0;
overflow: hidden; /* 隐藏滚动条 */
position: relative;
}
canvas {
position: absolute;
top: 0;
left: 0;
pointer-events: none; /* 使 Canvas 不阻止其他元素的点击 */
}
.ball {
position: absolute;
left: 50%;
top: 50%;
width: 35px;
height: 35px;
border: 1px solid #000;
background-color: red;
border-radius: 50%;
}效果一
css
//Houdini API
@property --x {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
@property --y {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
.ball {
transform: translate(var(--x), var(--y));
animation: moveX 2s, moveY 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.5, -800, 0.5, 800);
}
@keyframes moveX {
to {
--x: 200px; /* 调整最终位置的 X 值 */
}
}
@keyframes moveY {
to {
--y: 100px; /* 调整最终位置的 Y 值 */
}
}效果二
css
@property --x {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
@property --r {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.ball {
transform: rotate(var(--r)) translate(var(--x));
animation: moveX 2s, rotateR 8s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.5, -800, 0.5, 800);
}
@keyframes moveX {
to {
--x: 1px;
}
}
@keyframes rotateR {
to {
--r: 1deg;
}
}效果三
css
@property --x {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
@property --r {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.ball {
transform: rotate(var(--r)) translate(var(--x));
animation: moveX 2s cubic-bezier(0.5, -800, 0.5, 800), rotateR 4s linear;
animation-iteration-count: infinite;
}
@keyframes moveX {
to {
--x: 1px;
}
}
@keyframes rotateR {
to {
--r: 360deg;
}
}在这里，我们为小球设置了绝对定位、颜色、大小和动画。使用 CSS 属性 --x 、--y和 --r 控制小球的运动。
5. 观察小球的运动轨迹
JavaScript部分
javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const ball = document.querySelector('.ball');
// 设置 Canvas 尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let trajectoryPoints = []; // 存储小球运动的轨迹点
// 动画更新函数
function animate() {
// 获取当前小球的位置
const ballRect = ball.getBoundingClientRect();
const x = ballRect.left + ballRect.width / 2; // 小球中心的 X 坐标
const y = ballRect.top + ballRect.height / 2; // 小球中心的 Y 坐标
// 存储小球当前坐标
trajectoryPoints.push({ x, y });
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制虚线轨迹
ctx.setLineDash([5, 15]); // 设置虚线的样式
ctx.beginPath();
for (let i = 0; i < trajectoryPoints.length; i++) {
const point = trajectoryPoints[i];
if (i === 0) {
ctx.moveTo(point.x, point.y);
} else {
ctx.lineTo(point.x, point.y);
}
}
ctx.strokeStyle = 'lightgray'; // 轨迹颜色
ctx.lineWidth = 2;
ctx.stroke();
requestAnimationFrame(animate); // 循环调用
}
// 启动动画
animate();6. 动画效果展示
7. 总结
通过本次css动画的学习，我们学习了如何使用css技术实现一些不一样的动画效果。希望这个项目能够激发你对前端开发的兴趣，并在未来的项目中应用所学的知识。