透明度动画

最新推荐文章于 2022-01-29 14:36:55 发布

FrontJS

最新推荐文章于 2022-01-29 14:36:55 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 js

本文链接：https://blog.youkuaiyun.com/TSeven37/article/details/81187313

前端同时被 2 个专栏收录

40 篇文章

订阅专栏

23 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的透明度动画效果。通过鼠标悬停在红色方块上，可以动态调整其透明度，从30%平滑过渡到100%，鼠标移开则恢复至30%。此动画适用于IE和非IE浏览器，展示了如何使用alpha过滤器和opacity属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE  HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>透明度动画</title>
<style type="text/css">
*{
  padding:0;
  margin:0;
}
#div1{
  width:200px;
  height:200px;
  background: red;
  filter: alpha(opacity:30); /*IE浏览器*/
  opacity: 0.3;/*非IE浏览器*/
}
</style>
<script type="text/javascript">
  window.onload = function(){
      var div1 = document.getElementById('div1');
      div1.onmouseover = function(){
          move(10,100);
      }

      div1.onmouseout = function(){
          move(-10,30);
      }
  }
    var timer = null;
    var alpha = 30;
    /*
      speed变化速度（+/-代表运动方向）
      stopPoint停止点
    */
   function move(speed,stopPoint){
      var div1 = document.getElementById('div1');

        //避免多个定时器的变化叠加，保证只有一个定时器
         clearInterval(timer);
        
         timer = setInterval(function(){
                alpha = alpha + speed;

                //临界值判断，当运动到临界值为0时停止 清除定时器 
               if(alpha == stopPoint){ 
                  div1.style.filter = 'alpha(opacity:'+alpha+')'; //变化
                  div1.style.opacity = alpha / 100;
                  clearInterval(timer);
               }else{
                  div1.style.filter = 'alpha(opacity:'+alpha+')'; //变化
                  div1.style.opacity = alpha / 100;
               }
                
            },30);
  }
</script>
</head>
<body>
  <div id="div1">
  </div>
  
</div>
</body>
</html>