梦江南 发表于 2025-10-12 10:44

【月满花潮庆华诞】《蝶恋花· 槛菊愁烟兰泣露》


<style>
      @import 'https://638183.freep.cn/638183/web/css/tz02.css';
      #pa { --offsetX: 81px; --bg: tan url('https://cccimg.com/view.php/916e20f08b2fd680e7adebdfd79485fd.jpg') no-repeat center/cover; }
      #progress { position: absolute; top: 12%;left:180px; width: 6vw; height: 6vw; transition: .4s; }
      #progress:hover { transform: scale(2); }
      #g1 { cursor: pointer; fill: url(#grd); stroke: url('#grd'); stroke-width: 10; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
      #g2 { cursor: pointer; fill: none; stroke: #ea9133; stroke-width: 10; stroke-linecap: round; }
      #prog { stroke: url(#grd); }
      #btnFs { bottom: 20px; color: white; border-color: currentColor !important; }
      @keyframes rot { to { transform: rotate(-360deg); } }
#lrc { --bg: linear-gradient(180deg,hsla(240,50%,20%,.20),hsla(240,50%,20%,.35)); position: absolute; left: 37%; bottom: 50px;font:normal 2.0em Microsoft YaHei; sans-serif; color:DarkCyan white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
#vid { position: absolute; width: 300px; height: 300px; object-fit: cover; aspect-ratio: 1; border-radius: 50%; filter: drop-shadow(3px 4px 20px #000); mix-blend-mode: soft-light; cursor: pointer; }
</style>

<div id="pa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1896502273" autoplay loop></audio>
      <video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/31/38/62d771d99618d.mp4" autoplay loop muted></video>
      <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <g id="g1"><title>ALT+X</title></g>
                <g id="g2"><title>调节进度</title></g>
      </svg>
</div>

<script type="module">
      import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
      import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.1';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
        var geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      lrc(pa, geci);
      var dr = Dr.dr(progress);
      dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['red',0],['darkred',0.5],['plum',1]]);
      dr.polygon('15 0,-50 110,50 140,15 0').addTo(g1).rotates(7);
      dr.path('M190 0 A160 140 -30 0 1 -190 0 A160 140 -30 0 1 190 0').id('track').addTo(g2);
      dr.path('M190 0 A160 140 -30 0 1 -190 0 A160 140 -30 0 1 190 0').id('prog').addTo(g2);
      
      FS(pa, g1);
</script>

梦江南 发表于 2025-10-12 10:45

学习黑黑老师的（献给风和大地）代码。

杨帆 发表于 2025-10-12 11:29

漂亮！谢谢江南精彩分享{:4_204:}

偶然~ 发表于 2025-10-12 11:42

音画唯美、意境棒！

偶然~ 发表于 2025-10-12 11:43

画面感特别好，做到了音画合一

偶然~ 发表于 2025-10-12 11:43

画面与音乐完美结合

偶然~ 发表于 2025-10-12 11:44

背景歌曲唱的太棒了~我听的都醉了~

偶然~ 发表于 2025-10-12 11:44

感谢梦江南带来的精彩，辛苦了！祝你健康幸福

梦江南 发表于 2025-10-12 11:55

杨帆 发表于 2025-10-12 11:29
漂亮！谢谢江南精彩分享

问好杨帆，谢谢欣赏。{:4_204:}

梦江南 发表于 2025-10-12 11:56

偶然~ 发表于 2025-10-12 11:42
音画唯美、意境棒！

问好偶然，谢谢欣赏。{:4_204:}

梦江南 发表于 2025-10-12 11:58

偶然~ 发表于 2025-10-12 11:43
画面感特别好，做到了音画合一

谢谢行家精彩点评。{:5_161:}

梦江南 发表于 2025-10-12 12:01

偶然~ 发表于 2025-10-12 11:43
画面与音乐完美结合

很难得找到了这首晏殊《蝶恋花· 槛菊愁烟兰泣露》婉约经典代表作。所以做了这一帖。

梦江南 发表于 2025-10-12 12:04

偶然~ 发表于 2025-10-12 11:44
背景歌曲唱的太棒了~我听的都醉了~

应该你也会唱的。下次要听你唱了。

梦江南 发表于 2025-10-12 12:05

偶然~ 发表于 2025-10-12 11:44
感谢梦江南带来的精彩，辛苦了！祝你健康幸福

谢谢你的支持和祝福，谢谢！{:4_190:}

红影 发表于 2025-10-12 23:37

漂亮，欣赏江南好帖{:4_199:}

梦江南 发表于 2025-10-13 08:01

红影 发表于 2025-10-12 23:37
漂亮，欣赏江南好帖

问好影子，太晚了，明天好回来了哦。谢谢欣赏。{:4_187:}
页: [1]
查看完整版本: 【月满花潮庆华诞】《蝶恋花· 槛菊愁烟兰泣露》