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 {
            position: relative;
            top: 0;
            left: 0px;

            width: 200px;
            height: 100px;
            margin-top: 20px;
            background: #900;
            border: 2px solid #000;
            opacity: .3;

        }

    </style>


    <script>

        window.onload = function () {
            let oDiv = document.getElementsByTagName("div");

            for(let i=0;i<oDiv.length;i++){
            oDiv[i].timer=null
            
            // 鼠标动作           
            oDiv[i].onmouseover = function () {
                startMove(oDiv[i],{'width':220,'height':200,'opacity':100});
            }
            oDiv[i].onmouseleave = function () {
            startMove(oDiv[i],{'width':200,'height':100,'opacity':30});
            }
        }
    }

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

        function startMove(obj,json,fn) {
            // 清除计时器
            clearInterval(obj.timer);
            // 设定计时器
            obj.timer = setInterval(function () {

                //每一个属性都运行
                for(let attr in json){

                //引入假设
                let flag=true;
                //取值
                let icur=0;

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

                // 透明度判定
                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'
                }
            }
            



        }
            , 30)
        }




    </script>



</head>

<body>


    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>


</body>

</html>