套用马老师代码【烟雨江南】

梦江南 发表于 2024-6-19 14:18

本帖最后由梦江南于 2024-6-19 18:35 编辑 <br /><br /><style>
   #tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/6670ff3bd9c307b7e9a1a632.gif') no-repeat center/cover; border-radius: 20px 0; box-shadow: 3px 3px 12px black; z-index: 1; position: relative; }
   #tz::before { content: attr(data-lrc); position: absolute; bottom: 10px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(-1px -3px 2px cyan); }
   #player { left: calc(50% - 50px); bottom: 80px; width: 100px; height: 100px; filter: drop-shadow(0 0 40px cyan); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); }
   #vid { position: absolute; bottom: 50px; left:50px;width: 240px; height: 240px; clip-path: circle(50%); object-fit: cover; mix-blend-mode: screen; opacity: .35; pointer-events: none; }
   #player:hover { width: 120px; height: 120px; filter: hue-rotate(180deg) drop-shadow(0 0 40px cyan); }
   c-c { position: absolute; width: 80%; height: 80%; border: thick inset plum; border-radius: 100% 20%; opacity: .75; }
   @keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz" data-lrc="江南">
   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1378916796" autoplay loop></audio>
   <video id="vid" src="http://img.tukuppt.com/video_show/3664703/00/02/01/5b4ef0138e28e.mp4" autoplay loop muted disablePictureInPicture></video>
   <div id="player"></div>
</div>

<script>
var curkey = 0, lrcAr = [], total = 10;
Array.from({length: total}).forEach((c,k) => {
   c = document.createElement('c-c');
   c.style.cssText += `
            transform: rotate(${360 / total * k}deg);
            border-color: #${Math.random().toString(16).substring(2,8)};
   `;
   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 = `
作词 : 徐曼
作曲 : 徐曼
编曲：Hi-Fi小牛
录音：王晓海
混音：王晓海
和声：李赢
晚风拂过莲叶轻摆媚何处
晚风拂过莲叶轻摆媚何处
如你当年云裳轻
梨花散落岁月两载催山暮
层层涟漪浸湿了当初
小镇石桥白砖素瓦映酒家
一叶扁舟缱绻傍晚霞
旖旎湖面荷花初绽漫雨雾
你稍移莲步曳醒了松竹
残阳倚轩窗
青岚也已点红妆
几年世沧桑
岁月淡了你梳妆
烟雨笼江南
暮色轻轻叹
想你婆娑起舞袅娜在彼岸
烟雨罩江南
古笛声声唤
是谁的七弦琴音在涓涓弄柳岸
小镇石桥白砖素瓦映酒家
小镇石桥白砖素瓦映酒家
一叶扁舟缱绻傍晚霞
旖旎湖面荷花初绽漫雨雾
你稍移莲步曳醒了松竹
残阳倚轩窗
青岚也已点红妆
几年世沧桑
岁月淡了你梳妆
梦西子湖畔
却是高楼望断
独坐楼兰只听得簌簌晓风残
相思几重峦
银盏各参半
回眸看寻伊人笑靥
却灯火已阑珊
而我一折纸扇
笔墨轻蘸
只为搏那一抹
风轻云淡`;
getAr(lrc);
</script>

梦江南 发表于 2024-6-19 14:20

马老师，用LRC歌词也行啦。

梦油发表于 2024-6-19 14:58

欣赏佳作，问候梦江南。

梦江南 发表于 2024-6-19 15:00

梦油发表于 2024-6-19 14:58
欣赏佳作，问候梦江南。

谢谢梦油老师首席支持！下午问好！{:4_204:}

东篱闲人 发表于 2024-6-19 15:26

这江南雨，好细密，好绵柔。。。{:4_204:}

梦江南 发表于 2024-6-19 16:00

东篱闲人发表于 2024-6-19 15:26
这江南雨，好细密，好绵柔。。。

谢谢东篱老师支持，让您见笑了！{:4_204:}

红影发表于 2024-6-19 16:16

这个制作效果真棒，给梦江南点赞{:4_199:}

红影发表于 2024-6-19 16:18

右上角的视频倒是正好诠释了文字的韵味呢，很赞{:4_199:}

梦油发表于 2024-6-19 16:47

梦江南发表于 2024-6-19 15:00
谢谢梦油老师首席支持！下午问好！

梦江南朋友别客气。

起个网名好难 发表于 2024-6-19 17:28

https://5b0988e595225.cdn.sohucs.com/images/20170929/062e8b7bb79942b3ad2b0868bd570947.gif

梦江南 发表于 2024-6-19 18:03

红影发表于 2024-6-19 16:16
这个制作效果真棒，给梦江南点赞

谢谢影子支持鼓励。马老师的歌词一时做不了，就试试这普通的歌词，也能成，好开心！{:4_204:}

梦江南 发表于 2024-6-19 18:06

红影发表于 2024-6-19 16:18
右上角的视频倒是正好诠释了文字的韵味呢，很赞

回影子，左上角的视频最好把它放在左下角，这个不会放，只好放到左上角去了。

梦江南 发表于 2024-6-19 18:07

梦油发表于 2024-6-19 16:47
梦江南朋友别客气。

梦油老师晚上好！

梦江南 发表于 2024-6-19 18:08

起个网名好难发表于 2024-6-19 17:28

谢谢老师支持，这张图图好漂亮。晚上好！{:4_204:}

起个网名好难 发表于 2024-6-19 18:21

梦江南发表于 2024-6-19 18:08
谢谢老师支持，这张图图好漂亮。晚上好！

比您的帖子差远了{:5_106:}
把视频放在左下角可以用以下代码替换下
#vid { position: absolute; bottom: 50px; left:50px;width: 240px; height: 240px; clip-path: circle(50%); object-fit: cover; mix-blend-mode: screen; opacity: .35; pointer-events: none; }

梦江南 发表于 2024-6-19 18:27

起个网名好难发表于 2024-6-19 18:21
比您的帖子差远了
把视频放在左下角可以用以下代码替换下

让老师见笑了！老师的这张美女漂亮！{:4_201:}

梦江南 发表于 2024-6-19 18:27

起个网名好难发表于 2024-6-19 18:21
比您的帖子差远了
把视频放在左下角可以用以下代码替换下

我试试。

梦江南 发表于 2024-6-19 18:36

起个网名好难发表于 2024-6-19 18:21
比您的帖子差远了
把视频放在左下角可以用以下代码替换下

回老师，换好了，看看这样可好？

起个网名好难 发表于 2024-6-19 18:59

梦江南发表于 2024-6-19 18:36
回老师，换好了，看看这样可好？

蛮好的。

梦江南 发表于 2024-6-20 05:00

谢谢老师，早上好！

页: [1] 2 3

花潮论坛's Archiver

套用马老师代码【烟雨江南】