红影 发表于 2023-9-7 22:35

《平行宇宙》（学习套用黑黑暗夜舞者效果）


<style>
#mydiv {
      margin: 80px 0 0 calc(50% - 681px);
      display: grid;
      place-items: center;
      width: 1200px;
      height: 675px;
      border: 1px solid gray;
      background: linear-gradient(to right bottom, rgba(66,var(--bb),66,.5) 0, rgba(100,100,calc(255 - var(--bb)),.35) 50%), url('https://pic.imgdb.cn/item/64f9ccb2661c6c8e5464a6e9.jpg') no-repeat center/cover;
      overflow: hidden;
      position: relative;
      --state: running;
}
yin-fu {
      position: absolute;
      top: 160px; right: 500px;
      font: bold 30px sans-serif;
      opacity: 1;
      animation: fly 10s var(--delay) infinite var(--state);
}
@keyframes fly { to { transform: rotate(var(--deg)) translateY(-400px); opacity: 0; } }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .35; }
</style>

<div id="mydiv"><video id="vid" src="https://video-js.51miz.com/preview/video/00/00/11/57/V-115714-5DF0E75B.mp4" autoplay="autoplay" loop="loop" muted="muted" ></video></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=410714317.mp3" loop autoplay></audio>

<script>

let script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
mydiv.appendChild(script);

let num = 0, step = 10;
let degAr = ,
      yinfu = ['\u2605','\u2721','\u2606','\u272f','\u2736','\u2732','\u2734','\u272f','\u272e','\u273b','\u272d'];
let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
let flash = () => {
      num += step;
      if(num > 255 || num < 0) step = -step;
      mydiv.style.setProperty('--bb', num);
};

Array.from({length: 20}).forEach((item,key) => {
      item = document.createElement('yin-fu');
      let idx = Math.floor(Math.random() * yinfu.length);
      item.innerText = yinfu;
      item.style.cssText += `
                color: #${Math.random().toString(16).substr(-6)};
                --deg: ${degAr}deg;/*${60 - Math.random() * 120}deg;*/
                --delay: ${Math.random() * -10}s;
      `;
      mydiv.appendChild(item);
});

setInterval(()=> {
      if(aud.paused) return false;
      flash();
},10);

script.onload = () => {
      HCPlayer({
                papa: '#mydiv',
                lrcAr: geci,
                lrc_css: 'top: 40px; left: 60px; --bg: linear-gradient(rgba(30,80,250,.4),rgba(30,80,250,.7));',
                fs_css: 'bottom: 280px; right:314px; --bg: transparent;',
                player_css: `
                        bottom: 240px; right:260px;
                        border-width: 0;
                        color: #fff;
                        --size: 180px;
                        --bRad: 50%;
                        --track: gray;
                        --prog: orange;
                        --btnBg: linear-gradient(yellow, red);
                `,
                lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
      });
};
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

红影 发表于 2023-9-7 22:36

学习黑黑最新效果，自己学做一下。感谢黑黑的代码{:4_187:}

红影 发表于 2023-9-7 22:37

这几天有点忙也不仔细弄了，感觉这首歌跟黑黑帖子效果节奏差不多，就用了这歌{:4_173:}

醉美水芙蓉 发表于 2023-9-8 06:30

冬天的雨 发表于 2023-9-8 09:55

美女背景是MV漂亮{:4_199:}

冬天的雨 发表于 2023-9-8 09:56

背景增加了这个效果，画面感增强了，好制作{:4_178:}

冬天的雨 发表于 2023-9-8 09:57

就是这歌没有听过{:4_208:}

冬天的雨 发表于 2023-9-8 09:57

欣赏美女的优秀作业{:4_170:}

冬天的雨 发表于 2023-9-8 10:04

这个效果真的很好，冬雨就是学不会{:4_203:}

冬天的雨 发表于 2023-9-8 10:05

空了套用一个试试

冬天的雨 发表于 2023-9-8 10:05

音乐链接没有地方找

冬天的雨 发表于 2023-9-8 10:06

现在没有上传空间了，都要小辣椒帮忙，老要她帮忙不好意思了@小辣椒

亦是金 发表于 2023-9-8 12:35

美帖！漂亮的背景，梦幻的动画，欣赏学习了！{:4_187:}

小文 发表于 2023-9-8 16:18

欣赏佳作并问好恩师！{:4_191:}

小辣椒 发表于 2023-9-8 20:46

冬天的雨 发表于 2023-9-8 10:06
现在没有上传空间了，都要小辣椒帮忙，老要她帮忙不好意思了@小辣椒

怕难为情了{:4_174:}

红影 发表于 2023-9-8 21:57

醉美水芙蓉 发表于 2023-9-8 06:30
红影做得真漂亮！

多谢水芙蓉美女鼓励{:4_187:}

红影 发表于 2023-9-8 21:58

冬天的雨 发表于 2023-9-8 09:55
美女背景是MV漂亮

就加了个视频，调了一下颜色变化的颜色，别的也没弄什么啊{:4_173:}

红影 发表于 2023-9-8 22:00

冬天的雨 发表于 2023-9-8 09:57
就是这歌没有听过

这个歌曲我也没听过，正好随手乱翻找到了这首歌，觉得节奏挺适合这个脚链效果{:4_173:}

红影 发表于 2023-9-8 22:00

冬天的雨 发表于 2023-9-8 10:04
这个效果真的很好，冬雨就是学不会

冬小雨那么聪明，对你来说绝对不是问题啊{:4_187:}

红影 发表于 2023-9-8 22:01

冬天的雨 发表于 2023-9-8 10:05
音乐链接没有地方找

这个就网易云里的音乐啊，找起来很方便的，不需要上传呢。
页: [1] 2 3
查看完整版本: 《平行宇宙》（学习套用黑黑暗夜舞者效果）