找回密码
 立即注册
搜索
热搜: ROOT 面具 串号
新壳软件»首页 › 软件工具 › 技术教程 › js实现淡入淡出动画效果，结合HTML，分享代码教程 ...

js实现淡入淡出动画效果，结合HTML，分享代码教程

神勇爱指甲油 | 2023-11-5 16:03:36 | 显示全部楼层 |阅读模式
在HTML中使用JavaScript实现淡入淡出动画效果，可以通过逐渐改变元素的透明度来实现。以下是一种方法：在HTML中定义你想要应用淡入淡出效果的元素。使用JavaScript来改变元素的样式属性，特别是opacity。使用setInterval或setTimeout函数来创建动画效果。下面是一个简单的例子，展示了如何实现淡入淡出效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Fade In and Fade Out Animation</title>
  7. <style>
  8. #box {
  9.   width: 200px;
  10.   height: 200px;
  11.   background-color: blue;
  12.   opacity: 1;
  13.   transition: opacity 2s; /* This will ensure the fade effect happens smoothly */
  14. }
  15. </style>
  16. </head>
  17. <body>

  19. <div id="box"></div>

  21. <button onclick="fadeIn()">Fade In</button>
  22. <button onclick="fadeOut()">Fade Out</button>

  24. <script>
  25. function fadeOut() {
  26.   let box = document.getElementById('box');
  27.   let opacity = 1; // initial opacity
  28.   let intervalID = setInterval(function () {
  29.     if (opacity <= 0.1) {
  30.       clearInterval(intervalID);
  31.       box.style.display = 'none';
  32.     }
  33.     box.style.opacity = opacity;
  34.     opacity -= 0.1;
  35.   }, 200);
  36. }

  38. function fadeIn() {
  39.   let box = document.getElementById('box');
  40.   let opacity = 0; // initial opacity
  41.   box.style.display = 'block';
  42.   let intervalID = setInterval(function () {
  43.     if (opacity >= 1) {
  44.       clearInterval(intervalID);
  45.     }
  46.     box.style.opacity = opacity;
  47.     opacity += 0.1;
  48.   }, 200);
  49. }
  50. </script>

  52. </body>
  53. </html>
复制代码
演示教程：
1、在本地创建一个1.html的网页文件
截图202311051602272546.png

2、然后编辑把上面的代码粘贴进去
截图202311051602553536.png

3、然后打开网页看下具体的运行效果
截图202311051603232068.png

js

相关帖子
回复

举报

整齐扯服饰 | 2023-11-5 16:03:54 | 显示全部楼层
学习了
回复

举报

无聊的铃铛 | 2023-11-5 16:04:01 | 显示全部楼层
好的楼主，学习了
回复

举报

悦耳打野狼 | 2023-11-5 16:04:06 | 显示全部楼层
这个挺好用
回复

举报

tygfzfean | 2023-11-5 16:05:02 | 显示全部楼层
回复

举报

和谐与火 | 2023-11-5 16:05:08 | 显示全部楼层
支持支持
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新壳软件 |网站地图

GMT+8, 2023-12-11 17:34 , Processed in 0.062949 second(s), 29 queries .

Powered by Discuz! X3.5

© 2001-2017 Comsenz Inc.