0


永夜星河主题特效2(星河背景 + 闪烁文字+点击星星 + 文字弹出特效)

图片展示

星河背景 + 闪烁文字+点击星星 + 文字弹出特效

  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>永夜星河专属特效</title>
  7. <style>
  8. /* 页面整体样式 */
  9. body {
  10. margin: 0;
  11. height: 100vh;
  12. display: flex;
  13. justify-content: center;
  14. align-items: center;
  15. background: linear-gradient(to bottom, #0d1b2a, #1b263b, #415a77);
  16. overflow: hidden;
  17. color: white;
  18. font-family: 'Arial', sans-serif;
  19. position: relative;
  20. /* background: url('yyxhbk2.png') no-repeat center */
  21. }
  22. /* 星星文字标题 */
  23. h1 {
  24. font-size: 3rem;
  25. text-shadow: 0 0 10px #ffffff, 0 0 20px #e0e4ff;
  26. animation: glow 2s infinite alternate;
  27. }
  28. @keyframes glow {
  29. from {
  30. text-shadow: 0 0 5px #ffffff, 0 0 10px #e0e4ff;
  31. }
  32. to {
  33. text-shadow: 0 0 15px #ffffff, 0 0 30px #e0e4ff;
  34. }
  35. }
  36. /* 点击文字提示 */
  37. .message {
  38. position: absolute;
  39. bottom: 10%;
  40. font-size: 1.2rem;
  41. text-align: center;
  42. opacity: 0;
  43. transition: opacity 1s ease;
  44. }
  45. /* 星星特效 */
  46. .star {
  47. position: absolute;
  48. width: 5px;
  49. height: 5px;
  50. background-color: white;
  51. border-radius: 50%;
  52. box-shadow: 0 0 8px #fff;
  53. animation: fade-out 2s forwards ease;
  54. }
  55. @keyframes fade-out {
  56. 0% {
  57. opacity: 1;
  58. transform: translateY(0) scale(1);
  59. }
  60. 100% {
  61. opacity: 0;
  62. transform: translateY(-50px) scale(2);
  63. }
  64. }
  65. body {
  66. margin: 0;
  67. overflow: hidden;
  68. background: radial-gradient(circle, #1a2a6c, #b21f1f, #fdbb2d);
  69. height: 100vh;
  70. display: flex;
  71. justify-content: center;
  72. align-items: center;
  73. color: white;
  74. font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  75. }
  76. /* 星星点点 */
  77. canvas {
  78. position: absolute;
  79. top: 0;
  80. left: 0;
  81. }
  82. /* 闪烁文字 */
  83. .title {
  84. font-size: 3em;
  85. font-weight: bold;
  86. text-transform: uppercase;
  87. text-shadow: 0 0 20px #fff, 0 0 30px #ff9, 0 0 40px #ff9;
  88. animation: glow 2s infinite alternate;
  89. }
  90. @keyframes glow {
  91. from {
  92. text-shadow: 0 0 10px #fff, 0 0 20px #ff9, 0 0 30px #ff9;
  93. }
  94. to {
  95. text-shadow: 0 0 30px #ff9, 0 0 50px #ff9, 0 0 70px #ff9;
  96. }
  97. }
  98. /* 动态漂浮图片 */
  99. .character {
  100. position: absolute;
  101. bottom: 10%;
  102. width: 150px;
  103. animation: float 4s ease-in-out infinite;
  104. }
  105. @keyframes float {
  106. 0%,
  107. 100% {
  108. transform: translateY(0);
  109. }
  110. 50% {
  111. transform: translateY(-20px);
  112. }
  113. }
  114. </style>
  115. </head>
  116. <body>
  117. <h1>欢迎来到你的永夜星河!</h1>
  118. <div class="message">点击屏幕,看看星星有什么秘密~</div>
  119. <script>
  120. // 页面加载时,显示提示信息
  121. const message = document.querySelector('.message');
  122. setTimeout(() => {
  123. message.style.opacity = 1;
  124. }, 1000);
  125. // 点击页面触发星星和文字特效
  126. document.body.addEventListener('click', (e) => {
  127. // 创建星星
  128. const star = document.createElement('div');
  129. star.classList.add('star');
  130. star.style.left = `${e.clientX}px`;
  131. star.style.top = `${e.clientY}px`;
  132. document.body.appendChild(star);
  133. // 移除星星动画
  134. setTimeout(() => {
  135. star.remove();
  136. }, 2000);
  137. // 显示动态文字
  138. const text = document.createElement('div');
  139. text.style.position = 'absolute';
  140. text.style.left = `${e.clientX}px`;
  141. text.style.top = `${e.clientY - 30}px`;
  142. text.style.color = 'white';
  143. text.style.fontSize = '1.2rem';
  144. text.style.fontWeight = 'bold';
  145. text.textContent = getRandomText();
  146. document.body.appendChild(text);
  147. // 移除文字
  148. setTimeout(() => {
  149. text.remove();
  150. }, 2000);
  151. });
  152. // 随机文字生成
  153. function getRandomText() {
  154. const texts = [
  155. '你是我心中的星河女主角!',
  156. '星星为你闪烁!',
  157. '祝你每天开心!',
  158. '你的笑容点亮我的星空!',
  159. '你是人间宝藏~',
  160. '今天也要元气满满哦!',
  161. ];
  162. return texts[Math.floor(Math.random() * texts.length)];
  163. }
  164. </script>
  165. </body>
  166. </html>

特效介绍:

  1. 星星点击特效:- 点击页面时,会在鼠标位置生成一颗星星,慢慢变大并消失,模拟星星散落的效果。- 星星使用 div 和 CSS 动画实现,配合鼠标点击事件动态生成。
  2. 动态文字彩蛋:- 点击后随机显示一句温暖的“彩蛋文字”,比如“你是我心中的星河女主角!”、“星星为你闪烁!”等。- 文字位置根据鼠标点击动态生成,显示后自动消失。
  3. 视觉效果:- 页面背景使用渐变模拟夜空,标题文字带有“光晕”效果。- 特效简单又有趣,文字内容可以根据对方喜好自定义,增强专属感。

使用方式:

  1. 直接运行: 将代码保存为 index.html 文件,直接用浏览器打开即可。
  2. 自定义文字内容: 修改 getRandomText 函数中的文字内容,加入你想说的专属话语。
  3. 增强趣味性:- 可以加入背景音乐(如《永夜星河》的主题曲)。- 添加剧中角色图片作为背景装饰。

嗨,我是命运之光。如果你觉得我的分享有价值,不妨通过以下方式表达你的支持:👍 点赞来表达你的喜爱,📁 关注以获取我的最新消息,💬 评论与我交流你的见解。我会继续努力,为你带来更多精彩和实用的内容。

点击这里👉 ,获取最新动态,⚡️ 让信息传递更加迅速。

标签: css css3 html

本文转载自: https://blog.csdn.net/VLOKL/article/details/143813121
版权归原作者 命运之光 所有, 如有侵权,请联系我们删除。

“永夜星河主题特效2(星河背景 + 闪烁文字+点击星星 + 文字弹出特效)”的评论:

还没有评论