动画效果-飞翔的小鸟

最新推荐文章于 2024-07-03 11:15:00 发布

菜鸟咸鱼一锅端

最新推荐文章于 2024-07-03 11:15:00 发布

阅读量314

点赞数

分类专栏： css js 动画文章标签： javascript css html html5

本文链接：https://blog.csdn.net/qq_37049128/article/details/107512843

版权

js 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

动画

1 篇文章 0 订阅

订阅专栏

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .bird{position:absolute;left:0;width:200px}
    </style>
    <script>
        /*
			匀速运动
				* 速度保持不变的运动


			飞翔小鸟：
				* 不断改变left值
				* setInterval()
		 */
        document.addEventListener("DOMContentLoaded",()=>{
            let bird = document.querySelector('.bird');
            //速度
            let speed = 5;
            //目标值
            let target = window.innerWidth - bird.offsetWidth;
            let timer = setInterval(()=>{
                //在原来的left基础上改变
                let left = bird.offsetLeft;
                let += speed;
                //结束条件
                if(left>target){
                    clearInterval(timer);
                    //充值目标值
                    left = target
                }
                //设置css样式
                bird.style.left = left + 'px'
            },30)
        })
    </script>
</head>
<body>
    <h1>匀速运动</h1>
    <img src="img/bird.gif" class="bird/>
</body>
</html>

效果图