透明度动画

最新推荐文章于 2022-01-29 14:36:55 发布
最新推荐文章于 2022-01-29 14:36:55 发布
阅读量299 收藏
点赞数
分类专栏： 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TSeven37/article/details/81187313
版权
前端 同时被 2 个专栏收录
40 篇文章 0 订阅
订阅专栏
js
23 篇文章 0 订阅
订阅专栏 
<!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>

 

FrontJS
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
animation css 透明度逐渐_CSS动效集锦，视觉魔法的碰撞与融合（二）
weixin_35015064的博客
01-06 288
引言长久以来，我认识到。CSS，是存在极限的。正如曾经替你扛下一切的那个男人，也总有他眼含热泪地拼上一切，却也无法帮你做到的事情，他只能困窘地让你看到他的无能为力，怅然若失。 然后和曾经他成长的时代，做一一告别。CSS有他难以做到的事情，我们帮他用lottie解决CSS有他可以做到的事情，我们用我们的头脑帮他解决本文实现的CSS效果一览标题吸顶手写箭头文字背景圆形天坑按钮波澜动态方形加载骨架多行省...
flutter FadeTransition实现透明度渐变动画
08-25
`FadeTransition`是Flutter提供的一个用于实现对象透明度渐变的动画类。在这个实例中，我们将详细探讨如何使用`FadeTransition`来创建透明度渐变动画，并了解相关的动画机制。 首先，我们需要创建一个`Animation...
animation css 透明度逐渐_Animation动画之AlphaAnimation（透明度变化）_html/css_WEB-ITnose...
weixin_35128544的博客
02-15 249
说到动画我想大家并不陌生，接下来就说一下Animation动画中的AlphaAnimation，这是一个改变组件透明度的类。接下来我们代码分析。1、首先编写布局文件。//这里定义了一个显示图片的组件2、接下来编写MainActivity.java文件。package com.example.dell.bitmapproject;import android.support.v7.app.AppCo...
animation css 透明度逐渐_CSS 动画
weixin_34963576的博客
12-28 263
CSS动画已经出现好久了，但是至今对它掌握的很熟练的朋友并不多，可能是工作用不到，也肯能是兼容性等原因，但是作为一个前端程序员，个人认为动画这方面的东西还是要掌握的，因为随着老旧浏览器的逐渐淘汰兼容性的问题，我们已经可以慢慢忽略，所以这时，让我们的网页‘动起来’似乎变成一个异常有意思的事情了。简介CSS动画，也称关键帧动画。通过@keyframes来定义关键帧。在视频领域，电影、电...
Animation 动画透明转换
精益求精
03-16 760
<br />view = (ImageView)getTarget();  <br />        alpha1 = new AlphaAnimation((float)fromAlpha, (float)toAlpha);  <br />        alpha2 = new AlphaAnimation((float)toAlpha,(float)fromAlpha);  <br />        alpha1.setDuration((long)(getDuration()*1000)); 
JS实现的透明度渐变动画效果示例
10-18
主要介绍了JS实现的透明度渐变动画效果,涉及javascript响应鼠标事件针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
jQuery实现鼠标响应式透明度渐变动画效果示例
10-18
本示例将详细解析如何使用jQuery实现鼠标响应式透明度渐变动画效果。 首先，我们要理解jQuery的核心概念。jQuery通过选择器选取DOM元素，然后对这些元素进行操作。在这个例子中，我们关注的是`onmouseover`和`...
圆圈水纹透明flash动画
07-28
制作此类动画时，设计师需要掌握基本的图形设计技巧，如使用形状工具绘制水纹图案，调整渐变和透明度设置以达到水波纹的逼真效果。同时，也需要熟悉ActionScript编程，以便编写控制动画行为的代码，比如雨滴下落的...
JavaScript实现动画打开半透明提示层的方法
10-24
主要介绍了JavaScript实现动画打开半透明提示层的方法,涉及javascript操作DOM的相关技巧,非常具有实用价值,需要的朋友可以参考下
属性动画（objectAnimator,valueAnimator,平移、缩放、旋转、透明度）
03-18
代码主要演示了属性动画，包括平移、缩放、旋转、透明度，同步执行多个动画，ObjectAnimator，ValueAnimator，估值器等。
HTML5 CSS3 淡入淡出动画效果的Tab菜单特效.rar
07-10
HTML5 CSS3 淡入淡出动画效果的Tab菜单特效，圆角风格，同样带有渐变动画效果，整体风格我觉得相当的漂亮，来自国外CSS3达人网站的作品，代码简洁，TAB效果如示例截图所示。
动画——透明度
qq_21119289的博客
03-02 223
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #divid{ height: 200px; width: 200px;
Android动画基础【2】——（视觉动画系统之透明度动画）
丶一个有梦想的老实人 的博客
08-24 677
Android中视图动画系统： 和逐帧动画不同的是，视图动画系统操作的对象是视图对象。换句话说，视图动画系统可以让例如文本框、按钮、ImageView等动起来。 视图动画系统中所用的类所在包为: android.view.animation中。 其中包括的类有: Animation类。Animation子类包括: AlphaAnimation、ScaleAnimation、Translate...
Android补间动画（（1）透明度动画（alpha）（2）旋转动画（rotate））【2】
m0_46579394的博客
01-29 375
Android补间动画（（1）透明度动画（alpha）（2）旋转动画（rotate））【2】新手必学必会！
animation css 透明度逐渐_CSS Animation 属性
weixin_30913041的博客
01-26 129
1 2 3 4 5 title6 7 .play-box{8 width:200px;9 height:20px;10 margin:5px auto;11 background-color:#00ccff;12 border:1px solid #000;13 -webkit-animation:kf_play 3s ease infinite alternate;14 ...
Js动画-改变透明度（二）
依稀梦兮的博客
04-02 496
JS改变透明度 //Description:鼠标移入颜色变深，移出变淡 var timer=null; var alpha=30; function startMove(target) { var Div=document.getElementById("div1"); clearInterval(timer); timer=setInterval ( ...
5_透明度变化的动画
houyanhua1的专栏
07-25 331
一、Activity中 AlphaAnimation aa = new AlphaAnimation(0.2f, 1.0f); aa.setDuration(3000); rl_splash_bg.startAnimation(aa);     //
Android View 透明度动画
最新发布
07-08
在 Android 中，您可以使用透明度动画来改变 View 的可见性。以下是一个简单的示例代码，展示了如何使用透明度动画实现 View 的淡入淡出效果： ```java import android.animation.ObjectAnimator; import android.view.View; public class MainActivity extends AppCompatActivity { private View myView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); myView = findViewById(R.id.my_view); // 设置初始透明度为 0 myView.setAlpha(0f); // 创建透明度动画，从 0 到 1，持续时间为 1000 毫秒 ObjectAnimator fadeIn = ObjectAnimator.ofFloat(myView, "alpha", 0f, 1f); fadeIn.setDuration(1000); // 创建透明度动画，从 1 到 0，持续时间为 1000 毫秒 ObjectAnimator fadeOut = ObjectAnimator.ofFloat(myView, "alpha", 1f, 0f); fadeOut.setDuration(1000); // 设置动画循环播放 fadeIn.setRepeatCount(ObjectAnimator.INFINITE); fadeOut.setRepeatCount(ObjectAnimator.INFINITE); // 顺序播放淡入和淡出动画 AnimatorSet animatorSet = new AnimatorSet(); animatorSet.playSequentially(fadeIn, fadeOut); // 开始动画 animatorSet.start(); } } ``` 在上述代码中，我们使用 `ObjectAnimator` 创建了两个透明度动画，一个用于淡入效果，一个用于淡出效果。然后，我们使用 `AnimatorSet` 将这两个动画按顺序播放，并将动画设置为循环播放。最后，调用 `start()` 方法开始动画。 请注意，上述代码需要在 `onCreate()` 方法或其他适当的生命周期方法中调用，以确保正确的 View 初始化和动画启动。同时，您需要替换代码中的 `R.layout.activity_main` 和 `R.id.my_view` 分别为您的布局文件和目标 View 的 ID。 这样，您就可以实现一个简单的透明度动画效果，让 View 在淡入和淡出之间循环显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值