HTML+CSS+JavaScript实现匀速动画、缓动动画

每份代码都有注释 就不多解释 康康代码吧~

1、html代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="css/animation.css">
    <script src="js/animation.js">script>
head>
<body>
<div class="fa">
    <div class="bear">div>
    <div class="bg-1">div>
    <div class="bg-2">div>
div>
body>
html>

2、CSS

/*父盒子*/
.fa {
     
    width: 100%;
    height: 590px;
    /*溢出隐藏*/
    overflow: hidden;
    /*父相*/
    position: relative;
}
.fa .bear {
     
    background: url("../image/bear.png") no-repeat;
    width: 200px;
    height: 100px;
    /*子绝*/
    position: absolute;
    bottom: 30px;
    /*显示在  最上面*/
    z-index: 20;
}
/*近山*/
.fa .bg-1 {
     
    background: url("../image/bg1.png") no-repeat;
    width: 100%;
    height: 336px;
    /*子绝*/
    position: absolute;
    bottom: 0px;
    /*显示在  远山上面  熊下面*/
    z-index: 10;
}
/*远山*/
.fa .bg-2 {
     
    background: url("../image/bg2.png") no-repeat;
    width: 100%;
    height: 569px;
    /*子绝*/
    position: absolute;
    bottom: 10px;
}

3、JavaScript

// 定义元素对象变量
var fa;
var bear;
var bg_1;
var bg_2;
//定义 三个子盒子 背景图片匀速动画的运动值变量
var bear_st = 0;
var bg1_st = 0;
var bg2_st = 0;
//定义 定时器变量
var timer;
var timer1;
var timer2;
var timer3;
//定义bear盒子 在fa父盒子 缓动动画的运动值 变量
var mov = 1300;
var cha = 0;
//页面加载事件
window.onload = function () {
     
    //获取元素对象
    fa = document.querySelector(".fa");
    bear = document.querySelector(".bear");
    bg_1 = document.querySelector(".bg-1");
    bg_2 = document.querySelector(".bg-2");
};
// 设置bear背景图片  匀速动画 定时器
timer1=window.setInterval(function () {
     
    bear_st += 200;
    if (bear_st == 1600) {
     
        bear_st = 0;
    }
    bear.style.backgroundPositionX = -bear_st + "px";
}, 100);
//设置近山 背景图片 匀速动画 定时器
timer2=window.setInterval(function () {
     
    bg1_st += 100;
    if (bg1_st == 2600) {
     
        bg1_st = 0;
    }
    bg_1.style.backgroundPositionX = -bg1_st + "px";
}, 120);
//设置远山 背景图片 匀速动画 定时器
timer3=window.setInterval(function () {
     
    bg2_st += 80;
    if (bg2_st >= 2640) {
     
        bg2_st = 1160;
        bg2_st += 80;
    }
    bg_2.style.backgroundPositionX = -bg2_st + "px";
}, 120);
// 设置bear盒子  缓动动画 定时器
timer=window.setInterval(function move() {
     
    cha = mov / 20;
    mov = mov - cha;
    console.log(bear.offsetLeft);
    bear.style.left = (bear.offsetLeft + cha) + "px";
    // 当bear 运动出 fa盒子 可视区域  清除定时器
    if (bear.offsetLeft > (fa.offsetWidth)) {
     
        window.clearTimeout(timer);
        window.clearTimeout(timer1);
        window.clearTimeout(timer2);
        window.clearTimeout(timer3);
    }
}, 110);

接下来看看效果吧!

由于gif过大会无法上传,所以我删了很多帧,gif效果看起来会停顿很大,但实际网页效果还是很好的,可以自己运行一下看效果~

你可能感兴趣的:(css,html,javascript)