- 使用CSS动画（CSS Animations）
CSS动画允许你通过在CSS中定义关键帧（keyframes）来创建动画。这种方式不需要JavaScript，仅使用CSS即可实现动画效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Example</title>
<style>
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.animated-div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
</style>
</head>
<body>
<div class="animated-div"></div>
</body>
</html>
- 使用CSS过渡（CSS Transitions）
CSS过渡允许元素在指定的时间内从一个样式平滑过渡到另一个样式。这对于简单的动画效果非常有用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Transition Example</title>
<style>
.transition-div {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 2s; /* 时间 */
}
.transition-div:hover {
background-color: yellow; /* 鼠标悬停时的颜色 */
}
</style>
</head>
<body>
<div class="transition-div"></div>
</body>
</html>
- 使用JavaScript动画（JavaScript Animations）
通过JavaScript，你可以使用requestAnimationFrame方法或者setInterval/setTimeout来创建复杂的动画效果。这种方法提供了更高的控制能力。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Animation Example</title>
</head>
<body>
<div id="js-animated-div" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
let element = document.getElementById('js-animated-div');
let pos = 0; // 初始位置为0px;
function move() {
if (pos == 350) { // 当位置达到350px时停止动画。
clearInterval(id); // 清除定时器以停止动画。
} else { // 否则，更新位置并重新设置定时器。
pos++;
element.style.left = pos + 'px';
}
}
let id = setInterval(move, 10); // 每10毫秒调用一次move函数。
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
