效果图
代码块
html页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>opacity animation</title>
</head>
<body>
<div class="container"></div>
</body>
</html>
css样式:
<style>
.container{
width: 200px;
height: 200px;
background-color: #006400;
flter:alpha(opacity:30);
opacity: 0.3;
}
</style>
javascript脚本:
<script>
window.onload = function (){
var objContainer = document.getElementsByClassName("container")[0];
objContainer. = function (){
myanimation(objContainer,100);
}
objContainer. = function (){
myanimation(objContainer,30);
}
}
var timer = null,alpha = 30;
function myanimation(obj,target){
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if (alpha > target) {
speed = -10;
}else{
speed = 10;
}
if (alpha == target) {
clearInterval(timer);
}else{
alpha += speed;
obj.style.filter = 'alpha(opacity:'+alpha+')';
obj.style.opacity = alpha / 100;
}
},30);
}
</script>
转载于:https://blog.51cto.com/suyanzhu/1883091