console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标运动</title>

    <style>
        body {
            margin: 0;
        }

        div {
            display: flex;
            justify-content: center;
        }
        a{
            display: block;
            margin: 0 20px;
            text-align: center;
        }

        i {
            position: relative;
            top: 0px;
            left: 0px;

            width: 60px;
            height: 40px;
            margin-top: 20px;

            display: block;

            opacity:1;

        }

        i img{
            position: absolute;
            top: 20px;

            height: 30px;
            margin: 0 auto;

            opacity: 1;
        }

    </style>


    <script>

        window.onload = function () {
            let oMove = document.getElementById("move");
            let aList=oMove.getElementsByTagName('a')

            for(let i=0;i<aList.length;i++){
            aList[i].timer=null
            
            // 鼠标动作           
            aList[i].onmouseover = function () {
                let i0=aList[i].getElementsByTagName('i')[0]
                startMove(i0,{'top':-30,'opacity':0},function(){
                    i0.style.top=30+'px'
                    startMove(i0,{'top':0,'opacity':100})
                });
            }


        }
    }

            // 获取样式的函数
            function getStyle(obj,attr){
            return getComputedStyle(obj,false)[attr];
        }

        function startMove(obj,json,fn) {
            // 清除计时器
            clearInterval(obj.timer);
            // 设定计时器
            obj.timer = setInterval(function () {
                //引入假设
                let flag=true;

                //每一个属性都运行
                for(let attr in json){
                //取值
                let icur=0;

                // 透明度判定
                if(attr=='opacity'){
                    // 浮点数的取值，之后四舍五入
                    icur=Math.round(parseFloat(getStyle(obj,attr))*100)
            }
                else{
                    icur=parseInt(getStyle(obj,attr),10)
                }          

                // 缓冲动画，
                let speed = (json[attr]-icur)/10;
                // 防止无法到位，速度上下取整
                speed=speed>0?Math.ceil(speed):Math.floor(speed)

                // 赋值
                if(attr=='opacity'){
                obj.style[attr] = (icur+speed)/100
                }
                else{
                obj.style[attr] = icur + speed + 'px'
                }

                if(icur!=json[attr]){
                    flag=false
                }
                else{
                    flag;}
            }
            
            // 检测停止

                if(flag==true){
                    clearInterval(obj.timer);
                    if(fn){
                        fn()
                    }
                }


        }
            , 30)
        }




    </script>



</head>

<body>

    <div id="move">
        <a href="#"><i><img src="https://via.placeholder.com/35x35" alt=""></i><p>铅笔</p></a>
        <a href="#"><i><img src="https://via.placeholder.com/35x35" alt=""></i><p>铅笔</p></a>
        <a href="#"><i><img src="https://via.placeholder.com/35x35" alt=""></i><p>铅笔</p></a>
        <a href="#"><i><img src="https://via.placeholder.com/35x35" alt=""></i><p>铅笔</p></a>
        <a href="#"><i><img src="https://via.placeholder.com/35x35" alt=""></i><p>铅笔</p></a>

    </div>



</body>

</html>