马黑黑 发表于 2026-8-26 13:22

Profesia del condor y el aguila

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/webp/yms.webp') no-repeat center/cover; color: lightblue; perspective: 1000px; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .tit { position: absolute; top: 5%; width: 100%; height: 80px; display: grid; place-items: center; font-size: 3vw; font-weight: bold; color: rgba(200,200,200,.5); cursor: pointer; transform-style: preserve-3d; }
    .tit::before, .tit::after { content: 'Profesia del condor y el aguila'; position: absolute; background: linear-gradient(90deg, tan, orange, tan) no-repeat 0 0 / 35% 100%; background-clip: text; -webkit-background-clip: text; filter: drop-shadow(-1px -1px 2px black); transform: rotateX(0); backface-visibility: hidden; transition: 1s; animation: bmove 8s linear infinite alternate; }
    .tit::after { content: '歌手 ：Alborada Del Inka'; transform: rotateX(-180deg); }
    .tit:hover::before { transform: rotateX(180deg); }
    .tit:hover::after { transform: rotateX(0); }
    @keyframes bmove { to { background-position: 100% 100%; } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2629112/00/08/02/5d14ea2e10804.mp4" autoplay loop muted></video>
    <div id="tit" class="tit"></div>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=3934868', '1']],
      btns: ,
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

    function tzRun() {
      var aud = new AudPlayer(options);
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

马黑黑 发表于 2026-8-26 13:24

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/webp/yms.webp') no-repeat center/cover; color: lightblue; perspective: 1000px; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .tit { position: absolute; top: 5%; width: 100%; height: 80px; display: grid; place-items: center; font-size: 3vw; font-weight: bold; color: rgba(200,200,200,.5); cursor: pointer; transform-style: preserve-3d; }
    .tit::before, .tit::after { content: 'Profesia del condor y el aguila'; position: absolute; background: linear-gradient(90deg, tan, orange, tan) no-repeat 0 0 / 35% 100%; background-clip: text; -webkit-background-clip: text; filter: drop-shadow(-1px -1px 2px black); transform: rotateX(0); backface-visibility: hidden; transition: 1s; animation: bmove 8s linear infinite alternate; }
    .tit::after { content: '歌手 ：Alborada Del Inka'; transform: rotateX(-180deg); }
    .tit:hover::before { transform: rotateX(180deg); }
    .tit:hover::after { transform: rotateX(0); }
    @keyframes bmove { to { background-position: 100% 100%; } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2629112/00/08/02/5d14ea2e10804.mp4" autoplay loop muted></video>
    <div id="tit" class="tit"></div>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=3934868', '1']],
      btns: ,
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

    function tzRun() {
      var aud = new AudPlayer(options);
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

马黑黑 发表于 2026-8-26 13:24

帖子文本效果实现方式请参阅：

一、高光游移 -> https://www.huachaowang.com/forum.php?mod=viewthread&tid=95910&extra=page%3D1

二、卡片翻转 -> https://www.huachaowang.com/forum.php?mod=viewthread&tid=95858&extra=page%3D1

杨帆 发表于 2026-8-26 14:45

新颖的歌词文本高光游移效果，谢谢马老师精彩示范{:4_190:}

魏淑芬 发表于 2026-8-26 14:58

俺是来听音乐的{:4_208:}

梦江南 发表于 2026-8-26 16:23

马黑黑 发表于 2026-8-26 13:24
帖子文本效果实现方式请参阅：

一、高光游移 -> https://www.huachaowang.com/forum.php?mod=viewthread ...

黑黑老师，现在老师演示的是标题高光来回移动，能不能做歌词啊？{:4_204:}

霜染枫丹 发表于 2026-8-26 18:44

这个也抱走，很好的效果，我都存着慢慢理解，感谢马老师分享，恭祝安好！{:4_204:}{:4_190:}

小辣椒 发表于 2026-8-26 20:53

哇塞，歌词运用图片反转效果出来，第一次看见{:4_178:}

小辣椒 发表于 2026-8-26 20:54

黑黑~~不能整首歌词都有这个效果吗？

小辣椒 发表于 2026-8-26 20:57

颜色还可以来回变化，这些小辣椒都不懂了，现在除了套用啥也是不会了，就套用简单玩吧。黑黑的黑科技层出不穷，小辣椒也是只能玩套用了

马黑黑 发表于 2026-8-26 21:44

小辣椒 发表于 2026-8-26 20:57
颜色还可以来回变化，这些小辣椒都不懂了，现在除了套用啥也是不会了，就套用简单玩吧。黑黑的黑科技层出不 ...

这是 CSS 基本玩法，不算黑科技哈

马黑黑 发表于 2026-8-26 21:45

小辣椒 发表于 2026-8-26 20:54
黑黑~~不能整首歌词都有这个效果吗？

LRC 歌词同步比这个要复杂的，部分原理相同

马黑黑 发表于 2026-8-26 21:46

小辣椒 发表于 2026-8-26 20:53
哇塞，歌词运用图片反转效果出来，第一次看见

这个和图片没关系，不过也可以使用图片背景代替渐变背景

马黑黑 发表于 2026-8-26 21:46

杨帆 发表于 2026-8-26 14:45
新颖的歌词文本高光游移效果，谢谢马老师精彩示范

{:4_190:}

马黑黑 发表于 2026-8-26 21:46

魏淑芬 发表于 2026-8-26 14:58
俺是来听音乐的

音乐挺好的

马黑黑 发表于 2026-8-26 21:47

霜染枫丹 发表于 2026-8-26 18:44
这个也抱走，很好的效果，我都存着慢慢理解，感谢马老师分享，恭祝安好！

{:4_190:}

马黑黑 发表于 2026-8-26 21:48

梦江南 发表于 2026-8-26 16:23
黑黑老师，现在老师演示的是标题高光来回移动，能不能做歌词啊？
LRC 歌词同步实际上我们也用到这里的部分功能，但这个要用到歌词就会更复杂。这是标题类特效。

红影 发表于 2026-8-26 22:55

好奇妙的效果，这个真漂亮。欣赏黑黑好帖{:4_187:}

马黑黑 发表于 2026-8-27 00:00

红影 发表于 2026-8-26 22:55
好奇妙的效果，这个真漂亮。欣赏黑黑好帖

一般般，过得去，不太差
页: [1]
查看完整版本: Profesia del condor y el aguila