论坛 › 音乐沙龙 › I Can

马黑黑 发表于 2025-8-11 18:02

I Can

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w5/ican.webp') no-repeat center/cover; --ma-size: 15%; }
        #ma { left: 30px; top: 30px; display: grid; place-items: center; }
        .son { position: absolute; width: 20%; height: 100%; }
        .son::before, .son::after { position: absolute; content: ''; width: 100%; height: 100%; background: repeating-conic-gradient(cyan,transparent, cyan 20%); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); transform: scale(1); }
        .son::after { transform: scale(-1); }
        .son:nth-of-type(2) { transform: rotate(90deg); }
        #lrc { position: absolute; bottom: 20px; color: cyan; font-size: 30px; font-weight: bold; text-shadow: 1px 1px 2px #333; opacity: .9; }
        #btnFs { right: 30px; top: 30px; color: #333; }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=21224493" autoplay loop></audio>
        <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/13/15/31/27/video6822f54f3f95f.mp4" autoplay loop muted></video>
        <div id="ma" class="invert">
                <div class="son"></div>
                <div class="son"></div>
        </div>
        <div id="lrc">HUACHAO LRC</div>
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        import lrc from 'https://638183.freep.cn/638183/web/lrc/lrc_only.js';

        var geci = `
                Minnutes - I Can
                I can do anything
                I can do anything today
                I can do anything
                I can do anything today
                I can go anywhere
                I can go anywhere today
                I can go anywhere
                I can go anywhere today
                I can be anyone
                I can be anyone today
                I can be anyone
                I can be anyone today
                It's great to be with you
                It's great to be with you today
                It's great to be with you
                It's great to be with you today
                lala...huh...
                I can do anything
                I can do anything today
                I can do anything
                I can do anything today
                I can go anywhere
                I can go anywhere today
                I can go anywhere
                I can go anywhere today
                I can be anyone
                I can be anyone today
                I can be anyone
                I can be anyone today
                It's great to be with you
                It's great to be with you today
                It's great to be with you
                It's great to be with you today
                lala...huh...
`;

        FS(pa, ma);
        lrc(pa, geci);
</script>

马黑黑 发表于 2025-8-11 18:03

<div class="codebox">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 0px; --bg: url('https://638183.freep.cn/638183/t24/w5/ican.webp') no-repeat center/cover; --ma-size: 15%; }
        #ma { left: 30px; top: 30px; display: grid; place-items: center; }
        .son { position: absolute; width: 20%; height: 100%; }
        .son::before, .son::after { position: absolute; content: ''; width: 100%; height: 100%; background: repeating-conic-gradient(cyan,transparent, cyan 20%); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); transform: scale(1); }
        .son::after { transform: scale(-1); }
        .son:nth-of-type(2) { transform: rotate(90deg); }
        <txt-green>/* 设置 lrc 歌词标签样式 */</txt-green>
        #lrc { position: absolute; bottom: 20px; color: cyan; font-size: 30px; font-weight: bold; text-shadow: 1px 1px 2px #333; opacity: .9; }
        #btnFs { right: 30px; top: 30px; color: #333; }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=21224493" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/13/15/31/27/video6822f54f3f95f.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;div id="ma" class="invert"&gt;
                &lt;div class="son"&gt;&lt;/div&gt;
                &lt;div class="son"&gt;&lt;/div&gt;
        &lt;/div&gt;
        <txt-green>&lt;!-- lrc歌词标签必须有 --&gt;</txt-green>
        &lt;div id="lrc"&gt;HUACHAO LRC&lt;/div&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        import lrc from 'https://638183.freep.cn/638183/web/lrc/lrc_only.js';

        <txt-green>// 创建歌词</txt-green>
        var geci = `
                Minnutes - I Can
                I can do anything
                I can do anything today
                I can do anything
                I can do anything today
                I can go anywhere
                I can go anywhere today
                I can go anywhere
                I can go anywhere today
                I can be anyone
                I can be anyone today
                I can be anyone
                I can be anyone today
                It's great to be with you
                It's great to be with you today
                It's great to be with you
                It's great to be with you today
                lala...huh...
                I can do anything
                I can do anything today
                I can do anything
                I can do anything today
                I can go anywhere
                I can go anywhere today
                I can go anywhere
                I can go anywhere today
                I can be anyone
                I can be anyone today
                I can be anyone
                I can be anyone today
                It's great to be with you
                It's great to be with you today
                It's great to be with you
                It's great to be with you today
                lala...huh...
`;

        FS(pa, ma);
        lrc(pa, geci); <txt-green>// 带上帖子元素标识和歌词变量</txt-green>
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

花飞飞 发表于 2025-8-11 18:52

忙了一天，现在有空上来就看到歌词版的来了啊。。
看代码少少的，一贯的简洁，功能强大。。{:4_173:}

花飞飞 发表于 2025-8-11 18:54

画面青春靓丽，小播透明清澈，加上视频感觉唯美。。。
今天也开头了个青色系的作品，本还想改下颜色，现在看来还是不要改了{:4_173:}

花飞飞 发表于 2025-8-11 19:01

小播设计巧妙，看似透明实际是渐变色整出来的效果，
这个小播裁的好神奇啊。。尖头有空，中间有花纹。。
反方向叠起来后成两头尖的锥形。。再90度成十字形。。
加了一个歌词封装的JS。。。之前的还是现在重做的呀。这个包应该是新的吧。{:4_173:}

马黑黑 发表于 2025-8-11 19:23

花飞飞 发表于 2025-8-11 18:52
忙了一天，现在有空上来就看到歌词版的来了啊。。
看代码少少的，一贯的简洁，功能强大。。

歌词可不少

马黑黑 发表于 2025-8-11 19:23

花飞飞 发表于 2025-8-11 19:01
小播设计巧妙，看似透明实际是渐变色整出来的效果，
这个小播裁的好神奇啊。。尖头有空，中间有花纹。。
...

渐变的妙用

马黑黑 发表于 2025-8-11 19:24

花飞飞 发表于 2025-8-11 18:54
画面青春靓丽，小播透明清澈，加上视频感觉唯美。。。
今天也开头了个青色系的作品，本还想改下颜色，现在 ...

青色挺好的

花飞飞 发表于 2025-8-11 19:50

马黑黑 发表于 2025-8-11 19:23
歌词可不少

歌词不算。。{:4_173:}不可控的外来者

花飞飞 发表于 2025-8-11 19:50

马黑黑 发表于 2025-8-11 19:23
渐变的妙用

明暗对比就有立体感，光影是图片的灵魂这话还真没说错

花飞飞 发表于 2025-8-11 19:52

马黑黑 发表于 2025-8-11 19:24
青色挺好的

青绿色加粉色。。。哎。。搭得感觉不满意，头疼

马黑黑 发表于 2025-8-11 20:43

花飞飞 发表于 2025-8-11 19:52
青绿色加粉色。。。哎。。搭得感觉不满意，头疼

再试试

马黑黑 发表于 2025-8-11 20:43

花飞飞 发表于 2025-8-11 19:50
明暗对比就有立体感，光影是图片的灵魂这话还真没说错

对的

马黑黑 发表于 2025-8-11 20:43

花飞飞 发表于 2025-8-11 19:50
歌词不算。。不可控的外来者

{:4_189:}

花飞飞 发表于 2025-8-12 08:10

马黑黑 发表于 2025-8-11 20:43
再试试

昨天太迟，现在看看阴影太明显，色调不统一，小播变化还没改过来。
问题多多。。{:4_173:}感觉还得花一天时间修改

花飞飞 发表于 2025-8-12 08:10

马黑黑 发表于 2025-8-11 20:43
对的

看到对得也开心，被认同了

花飞飞 发表于 2025-8-12 08:11

马黑黑 发表于 2025-8-11 20:43


这可是删无可删的。。。看到歌词版的也升级了。。帅

红影 发表于 2025-8-12 10:02

这个css封装带歌词了，这个歌词的JS封装应该是新的吧，还是原始歌词的形式呢{:4_187:}

红影 发表于 2025-8-12 10:03

小播的设计漂亮，如此美妙的光影构造，如糖果般迷人{:4_199:}

马黑黑 发表于 2025-8-12 18:27

红影 发表于 2025-8-12 10:03
小播的设计漂亮，如此美妙的光影构造，如糖果般迷人

甜{:4_170:}

查看完整版本: I Can