红影 发表于 2024-7-10 23:10

《奇妙能力歌》（学习黑黑《X档案》代码效果）

<style>
#mydiv {
        --width: 1024px;
        margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
        width: 1024px;
        height: 640px;
        background:
                linear-gradient(45deg, transparent 48%, rgba(0,128,0,.05) 24%, rgba(0,128,0,.05) 25%, transparent 52%, transparent 0) center/100%,
                linear-gradient(-45deg, transparent 48%, rgba(0,128,0,.05) 48%, rgba(0,128,0,.05) 25%, transparent 52%, transparent 0) center/100%,
                repeating-radial-gradient(circle, rgba(100, 100, 0, .2) 0, rgba(255,255,255,.2) 10%, transparent 15%) center/6% 10%,
                repeating-conic-gradient(#c79e57 20deg, #715214 40deg, #c79e57 60deg, #e47011 80deg, #c79e57 100deg, #e4f042 120deg, #c79e57 140deg), #666;
        border: 1px solid gray;
        z-index: 1;
        overflow: hidden;
        position: relative;
}
#mydiv::after {content: attr(data-lrc); position: absolute; top: 30px; width: 100%; height: 60px; text-align: center; font: normal 42px/60px \96B6\4E66; color: transparent;text-shadow: 2px 2px 2px #8B4513;background: radial-gradient(cyan, white, orange) center/120px 60px; -webkit-background-clip: text;}
#vid {
        position: absolute;
        top: -130px; width: 100%; border-radius: 100%;
        height: calc(100% + 260px); transform: rotate(90deg);
        object-fit: conver;opacity: 0.55;
        mix-blend-mode: screen;
        pointer-events: none;
}
#player {
        position: absolute;
        left: calc(50% - 100px);
        top: calc(50% - 100px);       
        width: 200px;
        height: 200px;
        background-image: radial-gradient(#c79e57 0%, #c79e57 25%, transparent 25%, transparent 100%),conic-gradient(#fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f, #fff, #f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f,#fff);
        border-radius: 50%;
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to {transform: rotate(360deg); } }
</style>

<div id="mydiv" class="mydiv" data-lrc="HUACHAO">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=30431366" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/68/5eccc6d75f583_10s_big.mp4" muted autoplay loop></video>
        <div id="player"></div>
</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: 20px; left: 50%; transform: translate(-50%); --color: #F4A460; --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 = `
《奇妙能力歌》\n 作词作曲 : 陈粒\n演唱：陈粒\n学习黑黑《x档案》效果\n感谢黑黑的代码\n我看过沙漠下暴雨\n看过大海亲吻鲨鱼\n看过黄昏追逐黎明\n没看过你\n我知道美丽会老去\n生命之外还有生命\n我知道风里有诗句\n不知道你\n我听过荒芜变成热闹\n听过尘埃掩埋城堡\n听过天空拒绝飞鸟\n没听过你\n我明白眼前都是气泡\n安静的才是苦口良药\n明白什么才让我骄傲\n不明白你\n我拒绝更好更圆的月亮\n拒绝未知的疯狂\n拒绝声色的张扬\n不拒绝你\n我变成荒凉的景象\n变成无所谓的模样\n变成透明的高墙\n没能变成你\n\n我听过空境的回音\n雨水浇绿孤山岭\n听过被诅咒的秘密\n没听过你\n我抓住散落的欲望\n缱绻的馥郁让我紧张\n我抓住时间的假象\n没抓住你\n我包容六月清泉结冰\n包容不老的生命\n包容世界的迟疑\n没包容你\n我忘了置身濒绝孤岛\n忘了眼泪不过失效药\n忘了百年无声口号\n没能忘记你\n我想要更好更圆的月亮\n想要未知的疯狂\n想要声色的张扬\n我想要你
`;
        getAr(lrc);
</script>

红影 发表于 2024-7-10 23:11

把各种颜色乱调了一通，主要想学习各种渐变效果。
感谢黑黑的代码@马黑黑 {:4_187:}

小辣椒 发表于 2024-7-10 23:12

小辣椒都不晓得教程效果，都没有仔细欣赏的，以后再学习了，今天迟了，准备下了，

小辣椒 发表于 2024-7-10 23:12

亲爱的，你太辛苦的，每天回这么多帖还做作业。。。。{:4_179:}

红影 发表于 2024-7-10 23:13

视频的调整挺奇怪，怎样设置高度，logo还在，索性转个90度，利用长宽的不同，终于弄到外面去了{:4_173:}

红影 发表于 2024-7-10 23:42

小辣椒 发表于 2024-7-10 23:12
小辣椒都不晓得教程效果，都没有仔细欣赏的，以后再学习了，今天迟了，准备下了，

嗯嗯，我也准备下了，来回调颜色还挺费时间的，弄了这么迟{:4_173:}

红影 发表于 2024-7-10 23:42

小辣椒 发表于 2024-7-10 23:12
亲爱的，你太辛苦的，每天回这么多帖还做作业。。。。

学习还是要学的，有好几个作业都拉下了呢{:4_173:}

梦油 发表于 2024-7-11 09:33

画面简洁大方，色彩搭配合理。赞！

马黑黑 发表于 2024-7-11 11:31

图案设计很赞，对渐变背景的领会更深一步了。帖子整体把握得当，用色优雅精美。

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

梦油 发表于 2024-7-11 09:33
画面简洁大方，色彩搭配合理。赞！

跟着黑黑学习用代码做的背景呢{:4_173:}

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

马黑黑 发表于 2024-7-11 11:31
图案设计很赞，对渐变背景的领会更深一步了。帖子整体把握得当，用色优雅精美。

谢谢黑黑鼓励。忘了说了，那个按钮的配色是抄来的{:4_173:}

梦江南 发表于 2024-7-11 16:13

漂亮！真厉害！赞了！{:4_187:}

梦江南 发表于 2024-7-11 16:16

辛苦了！影子！

梦油 发表于 2024-7-11 16:56

红影 发表于 2024-7-11 14:28
跟着黑黑学习用代码做的背景呢

你学得很快啊，聪明！

马黑黑 发表于 2024-7-11 18:48

红影 发表于 2024-7-11 14:29
谢谢黑黑鼓励。忘了说了，那个按钮的配色是抄来的

{:4_190:}

绿叶清舟 发表于 2024-7-11 21:31

影厉害啊，漂亮的制作，歌也好听

红影 发表于 2024-7-11 22:50

梦油 发表于 2024-7-11 16:56
你学得很快啊，聪明！

都是玩啊，套用简单的{:4_187:}

红影 发表于 2024-7-11 22:51

马黑黑 发表于 2024-7-11 18:48


谢谢黑黑的代码{:4_187:}

红影 发表于 2024-7-11 22:51

绿叶清舟 发表于 2024-7-11 21:31
影厉害啊，漂亮的制作，歌也好听

这是首老歌，以前很喜欢的。{:4_173:}

马黑黑 发表于 2024-7-11 23:39

红影 发表于 2024-7-11 22:51
谢谢黑黑的代码

阔气阔气
页: [1] 2 3
查看完整版本: 《奇妙能力歌》（学习黑黑《X档案》代码效果）