移动动画（简易版）

最新推荐文章于 2025-12-23 08:30:00 发布

原创最新推荐文章于 2025-12-23 08:30:00 发布 · 128 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画演示</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .begin{
        width:100vw;
        height: 100vh;
        background-color: pink;
    }
    .box{
        width:200px;
        height:200px;
        background-color: blue;
        color:white;
        margin-top: 30px;
        margin-left: 100px;
    }
    /* 开始定义动画 */
    @keyframes begin{
        0%{
            transform: translate(0,0);
        }
        100%{
            transform: translate(400px,400px);
        }
    }
    @keyframes reverseBegin{
        0%{
            transform: translate(400px,400px);
        }
        100%{
            transform: translate(0,0);
        }
    }
    /* 定义完动画就该使用动画了，使用动画也是使用类名 */
    .action{
        animation: begin 5s linear forwards;
    }
    .backAction{
        animation: reverseBegin 5s linear forwards;
    }
</style>
<body>
    <div class="begin">
        <span>兄弟们，这是一个css动画演示 我们使用到的属性是@keyframes,transform,translate,scale();</span>
        <button class="Yaction"style="margin-right: 30px;">点击开始动画</button>
        <button class="Baction">点击回来动画</button>

        <div class="box">我是一个要移动的盒子</div>
    </div>

    <script>
        var Yaction=document.querySelector('.Yaction');
        var Baction=document.querySelector('.Baction');
        var box=document.querySelector('.box');
        
        Yaction.addEventListener('click',function(){
            box.classList.remove('backAction');
            box.classList.add('action');
        })
        
        Baction.addEventListener('click',function(){
            box.classList.remove('action');
            box.classList.add('backAction');
        })
    </script>
</body>
</html>