html+css+js完成代码弹出功能
简介：本文讲解如何使用html+css+js实现代码在网页中弹射出来的功能。
效果展示
代码会不断的在屏幕上弹出然后消失
完整代码
下面是完整的代码和详细的解释。
<!DOCTYPE html> <html> <head> <title>Code Effect</title> <style> /* 设置#code元素的样式 */ #code { position: fixed; /* 元素固定在视口中 */ top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; /* 背景色透明 */ overflow: hidden; /* 溢出隐藏 */ color: rgb(0, 63, 150); /* 字体颜色 */ font-size: 110px; /* 字体大小 */ font-family: 'Courier New', monospace; /* 字体类型 */ } </style> </head> <body> <div id="code"></div> <script> /* 生成随机字符串并返回 */ function getRandomString() { const stringList = [ "#include<iostream>\nusing namespace std;\n\nint main()\n{\n\tcout << \"Hello, World!\" << endl;\n\treturn 0;\n}", "import math\n\nprint(math.sqrt(2))", "for i in range(10):\n print(i)", "public class HelloWorld {\n public static void main(String[] args) {\n System.out.println(\"Hello, World!\");\n }\n}", "console.log(\"Hello, World!\");", "def hello():\n print(\"Hello, World!\")\nhello()", "var s = \"Hello, World!\";\nconsole.log(s);", "using System;\n\nclass Program\n{\n static void Main(string[] args)\n {\n Console.WriteLine(\"Hello, World!\");\n }\n}" ]; return stringList[Math.floor(Math.random() * stringList.length)]; } /* 创建代码块元素 */ function createCodeElement() { const element = document.createElement("pre"); /* 用<pre>标签创建元素 */ element.innerHTML = getRandomString(); /* 将随机字符串作为元素内容 */ element.style.position = "absolute"; /* 元素的定位方式设为绝对定位 */ element.style.top = Math.random() * 100 + "%"; /* 随机设置元素的上边距 */ element.style.left = Math.random() * 100 + "%"; /* 随机设置元素的左边距 */ element.style.transform = "translate(-50%, -50%)"; /* 将元素居中显示 */ element.style.animation = "floatup 10s ease-out forwards"; /* 设置元素的动画效果 */ document.getElementById("code").appendChild(element); /* 将元素添加到#code中 */ setTimeout(() => { element.remove(); /* 在5秒后删除元素 */ }, 5000); } setInterval(createCodeElement, 200); /* 每隔200毫秒调用createCodeElement函数来添加代码块 */ </script> </body> </html>
