JS实现透明度渐变动画

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS实现透明度渐变动画</title><style type="text/css">*{margin:0;padding:0;}#box{width:200px;height:200px;background-color:red;filter:alpha(opacity=30);opacity:0.3;}</style><script type="text/javascript">window.onload = function(){var box = document.getElementById('box');box.onmouseover = function(){changeopa(100);}box.onmouseout = function(){changeopa(30);}}var timer;var opa=30;function changeopa(aim){var box = document.getElementById('box');clearInterval(timer);timer=setInterval(function(){if(opa==aim){clearInterval(timer);}else{opa+=(aim-65)/3.5;
          box.style.opacity=opa/100;
          box.style.filter='alpha(opacity='+opa+')';console.log(opa);}},30)}</script>
</head>
<body><div id="box"></div>
</body>
</html>

遇到的问题及注意事项：

1、浮点运算进行多次后会出现误差，尽量使用整数运算。

转载于:https://www.cnblogs.com/oliverliu/p/6857111.html

JS实现透明度渐变动画相关推荐

Flutter透明度渐变动画Opacity实现透明度渐变动画效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程掘金 EDU学院教程知乎 Flutter系列文章在Flutter 中实 ...
Flutter透明度渐变动画FadeTransition实现透明度渐变动画效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程掘金 EDU学院教程知乎 Flutter系列文章在Flutter 中实 ...
flutter FadeTransition实现透明度渐变动画
更多文章请查看 flutter从入门到精通 flutter 动画状态监听器 AnimationController //动画控制器AnimationController controller;//A ...
Flutter AnimatedOpacity 实现透明度渐变动画效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 在Flutter 中实现透明度渐变效果的方式可通过以下通过 AnimatedOpacity 实现就是本文了通过 ...
View的透明度，设置view透明度setAlpha 及 Alpha透明度渐变动画
> android设置view透明度的效果的三种方式: 1.android:background="#ff6495ED"> 2.textView.setBackgro ...
android 缩放透明动画,Android旋转、平移、缩放和透明度渐变的补间动画
android实现旋转.平移.缩放和透明度渐变的补间动画,具体实现如下: 1.在新建项目的res目录中,创建一个名为anim的目录,并在该目录中创建实现旋转.平移.缩放和透明度渐变的动画资源文件. 透 ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
Android学习—补间动画（渐变动画）
使用xml的方式设置动画属性 1 <?xml version="1.0" encoding="utf-8"?> 2 <set xmlns:an ...
JS实现css属性动画效果
html代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...

JS实现透明度渐变动画

JS实现透明度渐变动画相关推荐

最新文章

热门文章