Profesia del condor y el aguila

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/webp/yms.webp') no-repeat center/cover; color: lightblue; perspective: 1000px; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     .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; }
   
7.     .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; }
   
8.     .tit::after { content: '歌手 ：Alborada Del Inka'; transform: rotateX(-180deg); }
   
9.     .tit:hover::before { transform: rotateX(180deg); }
   
10.     .tit:hover::after { transform: rotateX(0); }
    
11.     @keyframes bmove { to { background-position: 100% 100%; } }
    
12. </style>
    
13. 
    
14. <div id="pa" class="pa">
    
15.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2629112/00/08/02/5d14ea2e10804.mp4" autoplay loop muted></video>
    
16.     <div id="tit" class="tit"></div>
    
17. </div>
    
18. 
    
19. <script>
    
20.     var options = {
    
21.         pa: '.pa',
    
22.         urls: [['https://music.163.com/song/media/outer/url?id=3934868', '1']],
    
23.         btns: [tit],
    
24.     };
    
25. 
    
26.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
    
27. 
    
28.     function tzRun() {
    
29.         var aud = new AudPlayer(options);
    
30.     }
    
31. 
    
32.     function loadJs(url, callback) {
    
33.         var script = document.createElement('script');
    
34.         script.charset = 'utf-8';
    
35.         script.src = url;
    
36.         script.onload = function() {
    
37.             if (callback) callback();
    
38.         };
    
39.         document.head.appendChild(script);
    
40.     }
    
41. </script>

复制代码

马黑黑

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

一、高光游移 -> https://www.huachaowang.com/foru ... &extra=page%3D1

二、卡片翻转 -> https://www.huachaowang.com/foru ... &extra=page%3D1

杨帆

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