专业编程基础技术教程

网站首页 > 基础教程 正文

文字跳动特效表白网页 只有文字跳动的小视频做法

ccvgpt 2024-10-12 13:39:38 基础教程 8 ℃

效果图如下：

以下为部分代码，由于太长就不全部贴出来了，需要完整源码点击链接获取，邀请码填写：11

文字跳动特效表白网页 只有文字跳动的小视频做法

[html] view plain copy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <link rel="stylesheet" type="text/css" href="main.css"/>
  6. <title>炫酷文字跳动漂浮</title>
  7. <script type="text/javascript">
  8. function stops(){
  9. return false;
  10. }
  11. document.oncontextmenu=stops;
  12. </script>
  13. </head>
  14. <body>
  15. <article>
  16. <p class="text" id="text">当你需要我的时候，我都会在这里；
  17. 当你有麻烦的时候，我都会在你身边；当你觉得孤独的时候；
  18. 当你认为所有的人都已绝望；
  19. 到我这里来，我会给你所有的爱。
  20. 可能遇见你，对我来说是最大的幸福。
  21. 有了你，我的生涯变的无穷广阔，有了你，世界变得如斯迷人。
  22. 你是世界，世界是你。
  23. 我乐意用本人的心，好好的陪着你，爱着你。
  24. 陪你到你想去的处所，居心走完咱们人生的余下的旅程。
  25. 在将来的日子里，兴许什么都无奈断定，但独一能够肯定的是，我爱的人是你，无论当初仍是未来，我想我这里都会是你最暖和的港湾，都是为你遮风避雨的城墙。
  26. 你悄悄为我做的一切，天地知晓，我知晓！为这悄悄柔柔的温情，在滚滚红尘，我不怕红颜老褪，总在期待中度过慢慢长夜，可不后悔。
  27. 让我陪着你，上天送厚礼，没有华丽的言语，表达真挚的情谊，只有一颗心，永恒为你跳起，那是我真实的感受，无论白天黑夜时刻牵挂着你,
  28. 我爱你。 </p>
  29. <button id="btn" ele-range>我也爱你</button>
  30. </article>
  31. <script src="text.js" type="text/javascript" charset="utf-8"></script>
  32. <script type="text/javascript">
  33. var resetbtn = document.getElementById("btn");
  34. var neontext = new Neontext("text");
  35. var btn = new Neontext("btn");
  36. neontext.render.run();
  37. btn.render.run();
  38. resetbtn.addEventListener("click",function(){
  39. neontext.render.killer();
  40. btn.render.killer();
  41. })
  42. </script>
  44. <audio autoplay="autoplay"><source src="http://www.hunlipic.com/love/you/img/yinyue.mp3" type="audio/mpeg"/></audio>
  45. </body>
  46. </html>

Tags：

猜你喜欢

最近发表
标签列表