论坛 › 音乐沙龙 › 流花的湖-邓伟标

绿叶清舟 发表于 2024-6-24 21:07

流花的湖-邓伟标

<style>
      #tz { margin: 30px 0 30px calc(50% - 721px);width: 1280px; height: 720px; background: url('https://p.upyun.com/demo/tmp/c5ZZHYbp.webp') no-repeat center/cover; box-shadow: 2px 2px 3px gray; z-index: 1; overflow: hidden; position: relative; }
      #tz::before { content: attr(data-lrc); position: absolute; left: 20px; top: 20px; width: 60px; height: 95%; writing-mode: vertical-rl; font: bold 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to bottom, #4b6667, #677761, #d2a230, #677761, #86a29a) 50%/60px 200px; -webkit-background-clip: text; filter: drop-shadow(-1px -3px 2px cyan); }
      #player { --size: 60px; position: absolute; right: 20px; top: 20px; width: var(--size); height: var(--size); display: grid; place-items: center; cursor: pointer; transition: filter 2s; filter: hue-rotate(0) drop-shadow(0 0 18px white); animation: rot 6s linear infinite var(--state); }
#player::after { position: absolute; content: ''; width: calc(var(--size) / 6); height: calc(var(--size) / 6); border-radius: 50%; background: rgba(185,181,128,.95); }
      #player:hover { filter: hue-rotate(180deg) drop-shadow(0 0 4px yellow); }
      c-c { position: absolute; width: calc(var(--size) / 2); height: calc(var(--size) / 8); border-radius: 100%; background: rgba(185,181,128,.7); transform: rotate(var(--deg)) translate(calc(var(--size) / 4)); }
      .pic { position: absolute; top: 0; left: 0; width: 80px; transform: rotate(90deg); offset-path: path('M0 650Q512 620, 1280 600'); offset-distance: 0; animation: fly 30s infinite var(--state); }
      .pic:nth-of-type(2) { animation-delay: -8s; filter: hue-rotate(60deg); }
      .pic:nth-of-type(3) { animation-delay: -15s; filter: hue-rotate(90deg); }
      @keyframes rot { to { transform: rotate(360deg); } }
      @keyframes fly { to { offset-distance: 100%; } }
</style>

<div id="tz" data-lrc="HUACHAO">
<video class="vid2" style="position: relative; width: 1280px; height: 780px; object-fit: cover; opacity: 0.8; clip-path: circle(80% at bottom) ; mix-blend-mode: screen;" src="https://img.tukuppt.com/video_show/15653652/01/22/70/620f134e2c971.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1470170432" autoplay loop></audio>
      <img class="pic" alt="" src="https://p.upyun.com/demo/tmp/CgcTEfyA.webp" />
      <img class="pic" alt="" src="https://p.upyun.com/demo/tmp/CgcTEfyA.webp" />
      <img class="pic" alt="" src="https://p.upyun.com/demo/tmp/CgcTEfyA.webp" />
      <div id="player" title="播放/暂停"></div>
</div>

<script>
var curkey = 0, lrcAr = [], all = 5;
Array.from({length: all}).forEach((c,k) => {
      c = document.createElement('c-c');
      c.style.cssText += `
                //background: #${Math.random().toString(16).substring(2,8)};
                --deg: ${360 / all * k}deg;
      `;
      player.appendChild(c);
});
var getAr = (text) => {
      var ar = text.trim().split('\n');
      ar.sort();
      var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
      ar.forEach(item => {
                let result = item.match(reg);
                let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                lrcAr.push(.trim()]);
      });
};
var mState = () => {
      tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
      player.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
      if(curkey > lrcAr.length - 1) return;
      if(aud.currentTime >= lrcAr) {
                tz.dataset.lrc = lrcAr;
                curkey ++;
      }
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();

var lrc = `
张毅/邓伟标
流花的湖
`;

getAr(lrc);
</script>

绿叶清舟 发表于 2024-6-24 21:14

这算啥事，想做贴了发现找不到图，才想起来刚做完后直接关了PS没有保存，幸好素材没有删除只能重做，原来的心景却没了，随便看着吧，做图没有保留源文件的习惯好象得改改了

梦油 发表于 2024-6-24 21:38

好清新的画面。{:4_199:}

红影 发表于 2024-6-24 22:38

好漂亮的场景。那些飘飞的小花也好看，视频的选择尤其好，让小花像是顺着湖水而流动似的。
清舟的帖子色彩总是那么奇妙呢{:4_199:}

红影 发表于 2024-6-24 22:40

音乐优美，这场景很让人心旷神怡呢{:4_187:}

起个网名好难 发表于 2024-6-25 07:33

美帖欣赏了

小辣椒 发表于 2024-6-25 14:29

清舟现在出帖速度快的，这首背景音乐也是好听{:4_178:}

小辣椒 发表于 2024-6-25 14:32

绿叶清舟 发表于 2024-6-24 21:14
这算啥事，想做贴了发现找不到图，才想起来刚做完后直接关了PS没有保存，幸好素材没有删除只能重做，原来的 ...

哈哈，我也是有过这种事，后悔的一个晚上没有睡好。。。

我做那个播放器皮肤花了一天的时间，结果没有了，欲哭无泪的{:4_201:}

绿叶清舟 发表于 2024-6-25 21:16

小辣椒 发表于 2024-6-25 14:32
哈哈，我也是有过这种事，后悔的一个晚上没有睡好。。。

我做那个播放器皮肤花了一天的时间，结果没有 ...

也有过啊，一天的心血白费那肯定难受了，以前图片存完以后会再存一下PSD文件的，可是存完后从来不去打开觉得太占地就只存图片了，结果随手一关就没了

绿叶清舟 发表于 2024-6-25 21:24

小辣椒 发表于 2024-6-25 14:29
清舟现在出帖速度快的，这首背景音乐也是好听

这几天正好在听邓伟标的

绿叶清舟 发表于 2024-6-25 21:24

起个网名好难 发表于 2024-6-25 07:33
美帖欣赏了

谢谢网名欣赏

绿叶清舟 发表于 2024-6-25 21:25

红影 发表于 2024-6-24 22:40
音乐优美，这场景很让人心旷神怡呢

这几天正好在听邓伟标的，看到这个正好能用这个效果

绿叶清舟 发表于 2024-6-25 21:25

梦油 发表于 2024-6-24 21:38
好清新的画面。

借了个月亮假装太阳了{:4_173:}

红影 发表于 2024-6-26 12:07

绿叶清舟 发表于 2024-6-25 21:25
这几天正好在听邓伟标的，看到这个正好能用这个效果

清舟的制图非常赞，这样的场景真的太美了{:4_199:}

梦油 发表于 2024-6-26 14:31

绿叶清舟 发表于 2024-6-25 21:25
借了个月亮假装太阳了

水面真美。

绿叶清舟 发表于 2024-6-30 14:53

梦油 发表于 2024-6-26 14:31
水面真美。

那是个视频的

绿叶清舟 发表于 2024-6-30 14:53

红影 发表于 2024-6-26 12:07
清舟的制图非常赞，这样的场景真的太美了

神往的地方{:4_189:}

梦油 发表于 2024-6-30 16:21

绿叶清舟 发表于 2024-6-30 14:53
那是个视频的

选得好。

红影 发表于 2024-6-30 21:25

绿叶清舟 发表于 2024-6-30 14:53
神往的地方

是啊，很吸引人{:4_187:}

绿叶清舟 发表于 2024-7-1 19:28

梦油 发表于 2024-6-30 16:21
选得好。

熊猫站里视频很多的

查看完整版本: 流花的湖-邓伟标