论坛 › 欢乐水吧 › 刺绣

有声有色 发表于 2026-6-29 09:54

刺绣

本帖最后由 有声有色 于 2026-9-24 09:20 编辑 <br /><br /><tr><td class="t_f" id="postmessage_2692088">
本帖最后由 亚伦影音工作室 于 2026-9-24 08:07 编辑 <br /><br /><style>
#mydiv {
    margin: 20px -320px;
      display: grid;
      place-items: center;
      width: 1286px;
      height: 725px;
      background: #000;
      user-select: none;
      overflow: hidden;
      position: relative;perspective: 2000px;
      z-index: 1;--state: running;
}
#coip{
    position: absolute;
    width: 100%;
    height: 100%;
top: 0;
left: 0;
    display: block;
    z-index: 6;
    filter: invert(0%);

animation: hue-rotate 6s linear infinite var(--state);
}
@keyframes hue-rotate {
0%{
   filter: hue-rotate(0deg);
}

100%{
   filter: hue-rotate(360deg);
}
}

#cobp{display: none;
    position: absolute;
    width: 100%;
    height: 100%;
top: 0;
left: 0;
filter: invert(0%);
    z-index: 6;
   
animation: hue-rotate 6s linear infinite var(--state);
}

.slide {z-index: 4;
position: absolute;
top: 0％;
left: 20%;
width: 75%;
height: 78%;
opacity: 1;
}

.slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}


#overlay {
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: calc(100% + 80px);
object-fit: cover;
mix-blend-mode: overlay;
opacity: 0.0;
z-index: 50;
pointer-events: none;
}

/* 添加模糊糊到清晰效果样式 */
.blur-to-clear-effect {
animation: blurToClear 1s ease-out forwards var(--state);
}

@keyframes blurToClear {
from {transform: rotate3d(0, 0, 0,0deg);
    filter: blur(0px);
    opacity: 0;
}
to {transform: rotate3d(0, 0, 0,0deg);
    filter: blur(0);
    opacity: 1;
}
}
#ms,#fullscreen{border-radius: 4px;position:relative;
color:#00aa00;background:#ddd;box-shadow:0px 0px 0px 1px #00aa00;
padding: 4px 8px;z-index: 120;width: 40%;
        height: 20%;
font-size: 14px;
border: none;
cursor: pointer;z-index: 92;
}
</style>

<div id="mydiv">
<div style="position: absolute;top:4%;left: 72%;">
<span id="ms" title="卷轴模式">动态卷轴</span>
<span id="fullscreen">全屏观赏</span>
</div>
<img id="coip" src="https://pic1.imgdb.cn/i/034SxRYrlCjZdNpIVCrgwm.png" alt="静态卷轴">
<imgid="cobp" src="https://www.panurl.cn/view.php/385288295d9a523c24ea13fd8d986c96.gif" alt="动态卷轴">
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d60a6880bfc894ed218358efb2fbfa8b.jpg" alt="图片1">
</div>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d9f662084e034801e312e19b0944120e.jpg" alt="图片2">
</div>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e8546b5aaffb07791ed178d61e7cff7a.jpg" alt="图片3">
</div>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7f2a8237ef017e2687f8f8ff2795b33d.jpg" alt="图片4">
</div>
    <div class="slide">
      <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d8479e15a051125823083f4d4d362b98.jpg" alt="图片5">
      </div>
      <div class="slide">
      <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/49b4f5138da37043e9b2651842d4dc6d.jpg" alt="图片6">
      </div>


</div>


<script>
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
let timer;

// 只保留模糊到清晰效果
const effects = [
{func: applyBlurToClearEffect}   
];

function init() {
const firstSlide = slides;
effects.func(firstSlide); // 始终使用第一个效果（模糊到清晰）
startTimer();
}

// 清除所有效果
function clearEffects() {
// 移除所有可能的效果类
slides.forEach(slide => {
    slide.style.opacity = '0';
    slide.classList.remove('blur-to-clear-effect');
});
}

function showNext() {if(!aud.paused){
clearEffects();
currentIndex = (currentIndex + 1) % totalSlides;
const currentEffect = effects; // 始终使用第一个效果（模糊到清晰）

const targetSlide = slides;
currentEffect.func(targetSlide);
resetTimer();
}
}

// 模糊到清晰效果
function applyBlurToClearEffect(slide) {
slide.style.opacity = '1';
slide.classList.add('blur-to-clear-effect');
}

function startTimer() {
timer = setInterval(showNext, 2500);
}

function resetTimer() {
clearInterval(timer);
startTimer();
}

window.onload = init;

let fssp = true;
      ms.onclick = () => {
                fssp ? (ms.innerText = '静止卷轴', coip.style.display = 'none',cobp.style.display = 'block') : (ms.innerText = '动态卷轴', coip.style.display = 'block',cobp.style.display = 'none');
                fssp = !fssp;
      };
let fss = true;
      fullscreen.onclick = () => {
                fss ? (fullscreen.innerText = '退出全屏', mydiv.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fss = !fss;
      };
</script>

梦江南 发表于 2026-6-29 10:30

神绣啊，这条龙的右脚还套有一根红线。{:4_199:}

梦江南 发表于 2026-6-29 10:30

欣赏有声老师好帖。{:4_187:}

红影 发表于 2026-6-29 15:01

太过惟妙惟肖，以至于绣好的龙腾空而起。
真好看的视频制作，欣赏有声有色老师好帖{:4_187:}

梦油 发表于 2026-6-29 16:52

绣娘把龙给刺活了，有趣，有趣，这个创意很好哎。

有声有色 发表于 2026-6-30 09:57

梦江南 发表于 2026-6-29 10:30
神绣啊，这条龙的右脚还套有一根红线。

仿制模板得

有声有色 发表于 2026-6-30 09:58

红影 发表于 2026-6-29 15:01
太过惟妙惟肖，以至于绣好的龙腾空而起。
真好看的视频制作，欣赏有声有色老师好帖

仿制模板得

有声有色 发表于 2026-6-30 09:58

梦油 发表于 2026-6-29 16:52
绣娘把龙给刺活了，有趣，有趣，这个创意很好哎。

仿制模板得

梦江南 发表于 2026-6-30 10:04

有声有色 发表于 2026-6-30 09:57
仿制模板得

模板要积分的

有声有色 发表于 2026-6-30 10:09

梦江南 发表于 2026-6-30 10:04
模板要积分的

是的

梦油 发表于 2026-6-30 14:07

有声有色 发表于 2026-6-30 09:58
仿制模板得

你这个认真聪明！{:5_116:}

红影 发表于 2026-7-1 09:11

有声有色 发表于 2026-6-30 09:58
仿制模板得

嗯嗯，这个模版也很神奇呢。

有声有色 发表于 2026-7-1 09:59

梦油 发表于 2026-6-30 14:07
你这个认真聪明！

一直得到老友得鼓励与支持 谢谢了

有声有色 发表于 2026-7-1 09:59

红影 发表于 2026-7-1 09:11
嗯嗯，这个模版也很神奇呢。

是的

梦油 发表于 2026-7-1 16:56

有声有色 发表于 2026-7-1 09:59
一直得到老友得鼓励与支持 谢谢了

别客气。

红影 发表于 2026-7-3 19:52

有声有色 发表于 2026-7-1 09:59
是的

把这张图做签名了，也很不错啊。

有声有色 发表于 2026-7-5 09:54

红影 发表于 2026-7-3 19:52
把这张图做签名了，也很不错啊。

谢谢

查看完整版本: 刺绣