투명 애니메이션
효과를 얻으려면: 사진으로 여러 번 이동할 때. 이미지에는 그라데이션 효과가 있습니다. 마우스가 떠나면 원래 이미지 효과가 복원됩니다.
답변:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>透明度动画</title> <style type="text/css"> *{ margin:0; padding:0; } #div1{ width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3; } </style> <script> window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(100); } oDiv.onmouseout = function(){ startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer); }else{ alpha = alpha + speed; oDiv.style.filter = 'alpha(opacity:'+alpha+')'; oDiv.style.opacity = alpha/100; } },30) } </script> </head> <body> <div id="div1"></div> </body> </html>
위는 프론트엔드 실습--JavaScript--애니메이션(2) 내용입니다. , PHP 중국어 넷(www.php.cn)에 주목해주세요!