HTML+CSS+JS实现透明度动画

1.box.html代码：

2.box.css代码：

body {
    padding: 0px;
    margin: 0px;
}

#box {
    height: 200px;
    width: 200px;
    background-color: rebeccapurple;
    -webkit-border-radius: 5%;
    -moz-border-radius: 5%;
    border-radius: 5%;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
    opacity: 0.3;
}

3.box.js代码：

window.onload = function () {
    var box = document.getElementById('box');
    box.onmouseover = function () {
        move(100);
    }
    box.onmouseout = function () {
        move(30);
    }
}
var timer = null;
var alpha = 30;

function move(target) {
    var box = document.getElementById('box');
    clearInterval(timer);
    timer = setInterval(function () {
        var speed = 0;
        if (alpha > target) {
            speed = -10;
        } else {
            speed = 10;
        }
        if (alpha == target) {
            clearInterval(timer);
        } else {
            alpha += speed;
            box.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + alpha + ')';
            box.style.opacity = alpha / 100;
        }
    }, 30);
}