梦江南 发表于 2024-7-14 15:31

江山如此多娇

本帖最后由 梦江南 于 2024-7-15 10:25 编辑 <br /><br /><style>
        #mydiv { margin: 130px 0 30px calc(50% - 781px); width: 1400px; height: 700px; background: url('https://pic.imgdb.cn/item/669375ebd9c307b7e96ecf2f.gif') no-repeat center/cover; box-shadow: 2px 2px 6px #333; overflow: hidden; display: grid; place-items: center; position: relative; }
        #mydiv::after {content: attr(data-lrc); position: absolute; bottom: 30px; width: 100%; height: 60px; text-align: center; font: normal 45px/60px \9ED1\4F53; color: transparent;text-shadow: 1px 1px 1px #138b79;background: radial-gradient(pink, white, Salmon) center/120px 60px; -webkit-background-clip: text;}

        #mydiv::before { position: absolute; content: ''; inset: 0; background-image: repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 11px, transparent 12px), repeating-linear-gradient(22.5deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 10px, transparent 11px), linear-gradient(180deg, hsl(31,100%,50%), hsl(51,100%,50%), hsl(71,100%,50%), hsl(178,100%,50%), hsl(234,100%,82%)); mix-blend-mode: color-dodge; animation: chg 6s linear infinite var(--state); }
        #player { position: absolute; left: 10%; top: 80%; width: 120px; filter: hue-rotate(320deg); z-index: 10; transition: width .5s; opacity: .5; cursor: pointer; animation: rot 8s linear infinite var(--state); }

    #player:hover { filter: hue-rotate(240deg); }
    #vid { position: absolute; left: -200px; top: -100px; opacity: .3; width: 80%; height: 50%;transform: rotate(20deg); object-fit: cover; mix-blend-mode: multiply; pointer-events: none; }
#pic { position: absolute; width: 293px; height: 312px;bottom: 50%; left: 20%; transform-origin:center bottom;transform: rotate(180deg); animation: hy 1.2s infinite alternate ;}


    @keyframes hy { from { opacity: 0.6; transform: rotate(-1deg); }to { opacity: .25; transform: rotate(2deg); }}
    @keyframes rot { to { transform: rotate(360deg); } }
    @keyframes chg { to { inset: -60px; } }
</style>

<div id="mydiv" class="mydiv" data-lrc="HUACHAO">

        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1894137302.mp3" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec494a494d82.mp4" autoplay loop muted></video>
         <img id="player" alt="" src="https://pic.imgdb.cn/item/669487fdd9c307b7e9c2e131.png" titel="播放/暂停" />
          <img id="pic" alt="" src="https://pic.imgdb.cn/item/66937079d9c307b7e967ac11.gif " />
</div>

<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
        papa: '#mydiv',
        css: 'bottom: 100px; left: 50%; transform: translate(-50%); --color: rgba(32,178,170.5); --fsBg: transparent;',
});
var curkey = 0, lrcAr = [];
        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 = () => {
        mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
        aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onseeked = () => curkey = 0;
        aud.ontimeupdate = () => {
                if(curkey > lrcAr.length - 1) return;
                if(aud.currentTime >= lrcAr) {
                        mydiv.dataset.lrc = lrcAr;
                        curkey ++;
                }
        };       
        var lrc = `江山如此多娇



北国风光，千里冰封，万里雪飘
望长城内外，惟余莽莽
大河上下，顿失滔滔
山舞银蛇，原驰蜡象
欲与天公试比高
须晴日，看红装素裹，分外妖娆
江山如此多娇，引无数英雄竞折腰
惜秦皇汉武，略输文采
唐宗宋祖，稍逊风骚
一代天骄，成吉思汗
只识弯弓射大雕
俱往矣，数风流人物，还看今朝
`;
        getAr(lrc);
</script>

红影 发表于 2024-7-14 15:48

这个好像有代码问题呢，页面都变形了。{:4_204:}

红影 发表于 2024-7-14 15:55

要改还挺难，看不到编辑按钮了，我先试着帮你改一下。。。

红影 发表于 2024-7-14 15:59

现在可以了。梦江南和你原来的代码比较一下，就知道什么地方出问题了{:4_173:}

起个网名好难 发表于 2024-7-14 16:15

欣赏美帖

梦油 发表于 2024-7-14 16:24

好壮观啊！

梦江南 发表于 2024-7-14 17:12

红影 发表于 2024-7-14 15:48
这个好像有代码问题呢，页面都变形了。

不知道怎么变成烂 帖了。

梦江南 发表于 2024-7-14 17:13

红影 发表于 2024-7-14 15:55
要改还挺难，看不到编辑按钮了，我先试着帮你改一下。。。

就是啊，看不到编辑按钮了，要求救了。

梦江南 发表于 2024-7-14 17:15

红影 发表于 2024-7-14 15:59
现在可以了。梦江南和你原来的代码比较一下，就知道什么地方出问题了

嗯，我去对比一下，哪里出错了。
谢谢影子辛苦了！{:4_187:}

梦江南 发表于 2024-7-14 17:16

起个网名好难 发表于 2024-7-14 16:15
欣赏美帖

难难老师晚来一步了，否则要您解决了。

梦江南 发表于 2024-7-14 17:17

梦油 发表于 2024-7-14 16:24
好壮观啊！

谢谢梦油老师分享支持。问好！

梦江南 发表于 2024-7-14 17:29

红影 发表于 2024-7-14 15:59
现在可以了。梦江南和你原来的代码比较一下，就知道什么地方出问题了

哈哈哈，门忘记关了，怪不得页面变形了。{:4_173:}

毋问我从哪里来 发表于 2024-7-14 18:44

引众多坛友竞折腰！

红影 发表于 2024-7-14 19:06

梦江南 发表于 2024-7-14 17:12
不知道怎么变成烂 帖了。

没什么啊，制作还是挺好的，少了个标签导致的{:4_187:}

红影 发表于 2024-7-14 19:08

梦江南 发表于 2024-7-14 17:13
就是啊，看不到编辑按钮了，要求救了。

现在好了，可以编辑了。
建议播放器按钮就不要用鹰了，鹰在那转圈还是有点怪的{:4_173:}

红影 发表于 2024-7-14 19:10

梦江南 发表于 2024-7-14 17:15
嗯，我去对比一下，哪里出错了。
谢谢影子辛苦了！

主要几个问题，居中设置不对，视频用了.mp而不是.mp4，还有就是门没关{:4_173:}

红影 发表于 2024-7-14 19:11

梦江南 发表于 2024-7-14 17:29
哈哈哈，门忘记关了，怪不得页面变形了。

嗯，这个是最主要的变形原因呢。

梦江南 发表于 2024-7-15 10:20

毋问我从哪里来 发表于 2024-7-14 18:44
引众多坛友竞折腰！

问好老师，谢谢支持。

梦江南 发表于 2024-7-15 10:28

红影 发表于 2024-7-14 19:06
没什么啊，制作还是挺好的，少了个标签导致的

这个错误是不应该犯的，是太粗心了。

梦江南 发表于 2024-7-15 10:29

红影 发表于 2024-7-14 19:10
主要几个问题，居中设置不对，视频用了.mp而不是.mp4，还有就是门没关

这下记住了。辛苦影子了！{:4_187:}
页: [1] 2 3
查看完整版本: 江山如此多娇