js动画效果代码案例

admin 2024年03月07日 15:24 36 0

我可以给你一个简单的JavaScript动画效果代码案例，这是一个简单的淡入淡出效果，使用了CSS的`opacity`属性和JavaScript的`setInterval`函数。

HTML部分：

<!DOCTYPE html>
<html>
<head>
    <title>淡入淡出效果</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: red;
            opacity: 1;
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button onclick="startAnimation()">开始动画</button>

    <script src="animation.js"></script>
</body>
</html>

JavaScript部分（animation.js）：

let opacity = 1;
let direction = 1;

function startAnimation() {
    let box = document.getElementById('box');

    let interval = setInterval(function() {
        if (opacity <= 0 && direction === -1) {
            direction = 1;
        } else if (opacity >= 1 && direction === 1) {
            direction = -1;
        }

        opacity += direction * 0.1;
        box.style.opacity = opacity;
    }, 100);
}

在这个例子中，我们有一个红色的方块，当你点击"开始动画"按钮时，这个方块会开始淡入淡出，这是通过改变方块的`opacity`属性实现的，而`opacity`属性的变化是通过JavaScript的`setInterval`函数定时改变的。

这个动画效果在CSS中也设置了`transition`属性，这是为了让`opacity`属性的变化有一个过渡效果，看起来更平滑。

这只是一个非常基础的动画效果，JavaScript和CSS可以创建更复杂的动画效果，包括2D和3D转换、动画帧等。