JS动画效果实现

1.爱心旋转

首先要用css制作一个爱心

.z1,
        .z2 {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
        }

        .z2 {
            left: 70px;
        }

        .z3 {
            width: 100px;
            height: 100px;
            background-color: red;
            left: 35px;
            top: 35px;
            transform: rotate(45deg);
        }

然后去实现开始和停止按钮

用js去实现动画效果

//1.获取
    let divF = document.getElementById('divF')
    let z4 = document.getElementById('z4')
    function start1() {
        //2.设值
        divF.className = 'f m'
        z4.className = 'z4 z4c'
    }
    function stop1() {
        //2.设值
        divF.className = 'f'
        z4.className = 'z4 '
    }

最后实现的效果是这样的

 2.走马灯

这是动画效果

 @keyframes changeColor {
            0% {
                background-color: rgb(236, 65, 65);
            }

            20% {
                background-color: rgb(235, 176, 68);
            }

            40% {
                background-color: rgb(28, 148, 28);
            }

            60% {
                background-color: rgb(35, 35, 165);
            }

            80% {
                background-color: rebeccapurple;
            }

            100% {
                background-color: pink;
            }
        }

然后用js去循环实现

//1.获取
    let body = document.getElementById('body')
    let s = ''
    for (let i = 0; i < 10; i++) {
        s += `<div class="f">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>`
    }
    body.innerHTML = s

3.定时器

用js核心代码去实现定时器的实现

//1.获取
    let z = document.getElementById('z')
    let x = 0, y = 0
    let dsq = setInterval(() => {
        if (x >= 400 || y >= 400) {
            clearInterval(dsq)
        }
        x++,
            y++
        console.log(x, y)
        z.style.top = y + 'px'
        z.style.left = x + 'px'
    }, 10);