江山如此多娇（学习黑黑老师的青山如昨代码）
本帖最后由 梦江南 于 2024-11-25 08:25 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/audlrc.css';
#mama { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 800px; background: black url('http://tuku.link/imgs/2024/11/dbb755fb756eb047.jpg') no-repeat center/ cover; }'
#player { width: 60px; height: 60px; bottom: 35px; animation: flash 4s linear infinite var(--state), rot 8s linear infinite var(--state); }
#player:hover { filter: hue-rotate(180deg); transition: .7s; }
#prog { bottom: 30px; width: 300px; --bg1: Orange; --bg3:Orange; --color: Orange; }
#prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
#lrc { top: 65%; color:Orange; --bg: linear-gradient(rgba(255,165,0),rgba(0,128,0,.75)); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: darken; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#fsbtn { position: absolute; top: 20px; color: Orange; padding: 2px 6px; border: 2px Orange lightgreen; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
@keyframes flash { to { filter: hue-rotate(360deg); } }
</style>
<div id="mama" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1914685754.mp3"></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/01/53/11/video636400070365e.mp4" autoplay loop muted></video>
<span id="fsbtn"></span>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<img id="player" class="player" src="http://tuku.link/imgs/2024/11/b4123a824aa933cb.png" alt="" />
<div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>
<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audlrc.js';
var lrcAr = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrcAr };
var audio = new Aud(mDatas);
audio.play();
fscreen.fs('mama', 'fsbtn');
</script> https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 这背景用得真美，小播不太相配呢，江南自己换个小播是不是更好点{:4_187:} 画面很美，歌曲悦耳，谢谢梦江南友友精彩分享{:4_204:} 夕阳黄昏 发表于 2024-11-24 09:53
问好老师，谢谢沙 发支持。 红影 发表于 2024-11-24 11:18
这背景用得真美，小播不太相配呢，江南自己换个小播是不是更好点
回影子，小播放器换了个，仍然是老师的。 杨帆 发表于 2024-11-24 13:04
画面很美，歌曲悦耳，谢谢梦江南友友精彩分享
问好杨帆，谢谢支持。 欣赏江南老师好制作，画面美小播漂亮{:4_199:} 冬天的雨 发表于 2024-11-24 15:24
欣赏江南老师好制作，画面美小播漂亮
问好冬雨老师，谢谢支持。{:4_204:} 梦江南 发表于 2024-11-24 14:09
回影子，小播放器换了个，仍然是老师的。
嗯嗯，这个用在这里好像更漂亮{:4_187:} 红影 发表于 2024-11-24 16:17
嗯嗯，这个用在这里好像更漂亮
我只能做到这样了。不好意思哦。{:4_204:} 梦江南 发表于 2024-11-24 16:58
我只能做到这样了。不好意思哦。
这有什么不好意思的。江南可以去看看这个https://www.pngsucai.com/down/7934508.html
里面很多小图都很漂亮。 唯美的景致。中间兀突的一个蓝色播放器，总觉得与景色不太和谐哈。 欣赏佳作，问候梦江南。 这个制作梦江南也是用了心的，黑黑这个播放器有变色效果，你用这个深颜色背景要么把播放器颜色修改一下，要么就直接用浅颜色的背景图，这样播放器效果会更加好 欣赏梦江南的精彩制作{:4_199:} 红影 发表于 2024-11-24 19:32
这有什么不好意思的。江南可以去看看这个https://www.pngsucai.com/down/7934508.html
里面很多小图都很 ...
早上问好影子，这素材库太棒了，我换了一个，不知效果怎么样？还请指教哈！{:4_187:} 樵歌 发表于 2024-11-24 19:36
唯美的景致。中间兀突的一个蓝色播放器，总觉得与景色不太和谐哈。
早上问好，谢谢樵歌老师支持，已换了个播放器，不知效果如何？还请指教！{:4_187:} 梦油 发表于 2024-11-24 21:37
欣赏佳作，问候梦江南。
早上问好梦油老师，谢谢支持。{:4_204:} 小辣椒 发表于 2024-11-24 22:19
这个制作梦江南也是用了心的，黑黑这个播放器有变色效果，你用这个深颜色背景要么把播放器颜色修改一下，要 ...
早上问好小辣椒，谢谢支持，谢谢宝贵提议，江南已换了播放器。不知效果如何？还请指教！{:4_187:}
页:
[1]
2