效果图

wKiom1hSWtzz5BqzAAADOmDzy1Q162.png-wh_50

wKioL1hSWt3RX6sEAAACzXUDWRI081.png-wh_50

代码块

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>

QQ截图20181014143201.jpg