楼主: 宁月

[特效] 白夜宁月】你知道我最害怕一个人天黑 贺花简静芳辰

[复制链接]
发表于 2025-10-12 13:07 | 显示全部楼层
宁月的图很难打开.不知难上传看不到图。
看了你代码有三个问题
1有一个多余的</div>标签,导致 HTML 结构不完整,
2视频 URL 格式有问题(最后一个视频缺少扩展名),
3视频元素没有设置正确的位置和大小,
点评
回复

使用道具

 楼主| 发表于 2025-10-12 13:24 | 显示全部楼层
云端漫步 发表于 2025-10-12 13:07
宁月的图很难打开.不知难上传看不到图。
看了你代码有三个问题
1有一个多余的标签,导致 HTML 结构不完整, ...


1、已删除。
2、视频未用,所以就把扩展名不完全化。
3、那个视频基本在位置上,就忽略了

非常感谢漫步老师
点评
回复

使用道具

发表于 2025-10-12 13:38 | 显示全部楼层

白夜宁月】你知道我最害怕一个人天黑 贺花简静芳辰

本帖最后由 云端漫步 于 2025-10-12 14:03 编辑
宁月 发表于 2025-10-12 13:24
1、已删除。
2、视频未用,所以就把扩展名不完全化。
3、那个视频基本在位置上,就忽略了


现在看到图了但代码里有(应该是.mp4),可能导致视频无法加载。<video id="vid2" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp" autoplay loop muted></video>
给你修了代码。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>视觉体验</title>
  6. <style>
  7. #mydiv {
  8.     margin: 0;
  9.     display: grid;
  10.     place-items: center;
  11.     width: 100vw;
  12.     height: 100vh;
  13.     background-color: #5190ef;
  14.     user-select: none;
  15.     overflow: hidden;
  16.     position: relative;
  17.     z-index: 1;  
  18. }

  19. .slide {
  20.   position: absolute;
  21.   top: 0;
  22.   left: 0;
  23.   width: 100%;
  24.   height: 100%;
  25.   opacity: 0;
  26.   z-index: 10;
  27. }

  28. .slide img {
  29.   position: absolute;
  30.   top: 50%;
  31.   left: 50%;
  32.   width: 100%;
  33.   height: 100%;
  34.   object-fit: cover;
  35.   transform: translate(-50%, -50%);
  36. }

  37. #overlay {
  38.   position: absolute;
  39.   top: 0;
  40.   left: 0;
  41.   width: 100%;
  42.   height: 100%;
  43.   object-fit: cover;
  44.   mix-blend-mode: overlay;
  45.   opacity: 0.0;
  46.   z-index: 50;
  47.   pointer-events: none;
  48. }

  49. /* 添加模糊到清晰效果样式 */
  50. .blur-to-clear-effect {
  51.   animation: blurToClear 1.5s ease-out forwards;
  52. }

  53. @keyframes blurToClear {
  54.   from {
  55.     filter: blur(10px);
  56.     opacity: 0;
  57.   }
  58.   to {
  59.     filter: blur(0);
  60.     opacity: 1;
  61.   }
  62. }

  63. /* 添加清晰到模糊效果 */
  64. .clear-to-blur-effect {
  65.   animation: clearToBlur 1.5s ease-in forwards;
  66. }

  67. @keyframes clearToBlur {
  68.   from {
  69.     filter: blur(0);
  70.     opacity: 1;
  71.   }
  72.   to {
  73.     filter: blur(10px);
  74.     opacity: 0;
  75.   }
  76. }

  77. #vid1, #vid2 {
  78.   position: absolute;
  79.   width: 95%;
  80.   height: 95%;
  81.   top: 0;
  82.   left: 0;
  83.   object-fit: cover;
  84.   pointer-events: none;
  85.   mix-blend-mode: screen;
  86.   opacity: 0.29;
  87. }
  88. #vid1 { z-index: 2; }
  89. #vid2 {
  90.   z-index: 3;
  91.   -webkit-mask: linear-gradient(to bottom, red 50%, transparent 55%, transparent);
  92. }
  93. </style>
  94. <body>
  95. <div id="mydiv">
  96.   <div class="slide">
  97.     <img src="https://i.ibb.co/sptF9P10/nzdwygrpth1.jpg" alt="图片1">
  98.   </div>
  99.   <div class="slide">
  100.     <img src="https://i.ibb.co/qYkZm9JS/nzdwygrpth3.jpg" alt="图片2">
  101.   </div>
  102.   <div class="slide">
  103.     <img src="https://i.ibb.co/TDRt8qLt/nzdwygrpth2.jpg" alt="图片3">
  104.   </div>
  105.   <div class="slide">
  106.     <img src="https://i.ibb.co/sptF9P10/nzdwygrpth1.jpg" alt="图片4">
  107.   </div>
  108.   <div class="slide">
  109.     <img src="https://i.ibb.co/TDRt8qLt/nzdwygrpth2.jpg" alt="图片5">
  110.   </div>
  111.   <div class="slide">
  112.     <img src="https://i.ibb.co/qYkZm9JS/nzdwygrpth3.jpg" alt="图片6">
  113.   </div>
  114.   
  115.   <video id="overlay" autoplay loop muted playsinline>
  116.     <source src="https://img.tukuppt.com/video_show/2422006/00/01/70/5b4b1e2590ccc.mp4" type="video/mp4">
  117.   </video>
  118.   
  119.   <video id="vid1" src="https://img.tukuppt.com/video_show/2629112/00/01/74/5b498b31c08a2.mp4" autoplay loop muted></video>
  120.   <video id="vid2" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" autoplay loop muted></video>
  121. </div>

  122. <script>
  123. let currentIndex = 0;
  124. const slides = document.querySelectorAll('.slide');
  125. const totalSlides = slides.length;
  126. const displayTime = 4000; // 每张图片显示时间(毫秒)
  127. const transitionTime = 1500; // 过渡动画时间(毫秒)

  128. // 初始化显示第一张图片
  129. function init() {
  130.   showSlide(currentIndex);
  131. }

  132. // 显示指定索引的图片
  133. function showSlide(index) {
  134.   // 隐藏所有图片
  135.   slides.forEach(slide => {
  136.     slide.style.opacity = '0';
  137.     slide.classList.remove('blur-to-clear-effect', 'clear-to-blur-effect');
  138.   });
  139.   
  140.   // 显示当前图片
  141.   const currentSlide = slides[index];
  142.   currentSlide.style.zIndex = '20'; // 确保当前图片在最上层
  143.   currentSlide.classList.add('blur-to-clear-effect');
  144.   
  145.   // 设置定时器,在显示时间后切换到下一张
  146.   setTimeout(() => {
  147.     // 当前图片开始模糊消失
  148.     currentSlide.classList.add('clear-to-blur-effect');
  149.    
  150.     // 等待动画结束后切换到下一张
  151.     setTimeout(() => {
  152.       currentSlide.style.zIndex = '10'; // 恢复z-index
  153.       currentIndex = (currentIndex + 1) % totalSlides;
  154.       showSlide(currentIndex);
  155.     }, transitionTime);
  156.   }, displayTime);
  157. }

  158. window.onload = init;
  159. </script>
  160. </body>
  161. </html>
复制代码
点评
回复

使用道具

 楼主| 发表于 2025-10-12 13:40 | 显示全部楼层
本帖最后由 宁月 于 2025-10-12 13:44 编辑
云端漫步 发表于 2025-10-12 13:38
现在看到图了但代码里有(应该是.mp4),可能导致视频无法加载。
给你修了代码。 ...


对,因为两个视频共用的样式设置,我不用第2个视频,所以就把它的mp4的4去掉了,这样会影响另一个视频加载吗?
点评
回复

使用道具

 楼主| 发表于 2025-10-12 13:52 | 显示全部楼层
云端漫步 发表于 2025-10-12 13:38
现在看到图了但代码里有(应该是.mp4),可能导致视频无法加载。
给你修了代码。 ...

好的,谢谢漫步老师,我复制试试
点评
回复

使用道具

发表于 2025-10-12 16:01 | 显示全部楼层
宁月这组图很棒
极简风,人物轮廓素描很赞
排字大气有特色
歌曲也很好听。。。
点评
回复

使用道具

发表于 2025-10-12 16:01 | 显示全部楼层
祝静静生日快乐。。。
点评
回复

使用道具

发表于 2025-10-12 17:22 | 显示全部楼层
一共三张图吧,意境不错,排字也好看,
静静收礼开心。
点评
回复

使用道具

发表于 2025-10-13 12:00 | 显示全部楼层
欣赏佳作,问好宁月,新周快乐~
点评
回复

使用道具

发表于 2025-10-13 12:00 | 显示全部楼层
借美图,祝静静收礼开心,新周快乐~
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-12-16 08:03

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表