TO——红影 （越剧——秋海棠）
本帖最后由 有声有色 于 2025-1-19 13:06 编辑 <br /><br /><style>#tiezi { margin: 30px 0 30px calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 650px; overflow: hidden; position: relative; box-shadow:3px 3px 6px gray; }
.pa { position: absolute;top: 0px; left: 0px;width: 100%; height: 100%; }
.son { position: absolute; width: 600px; height: 600px;left: 214px; top: 34px;}
.son::before, .son::after { position: absolute; content: ''; width: 100%; height: 100%; border-radius: 50%; border: 0px outset cyan; transition: .7s; box-sizing: border-box; }
.son::before { left: 0; top: 0; border-color: tan transparent transparent GoldEnrod; }
.son::after { right: 0; bottom: 0; border-color: transparent Wheat tan transparent; }
.son:hover::before, .son:hover::after{ border-color: transparent transparent transparent transparent; border-radius: 0%;}
.pic { position: absolute;top: 0px; left: 0px;width: 100%; height: 100%; }
.pic1 { position: absolute;top: 60px; left: 220px;width: 600px; height: 600px; transition: 1.7s; opacity: 0.7; }
.pic2 { position: absolute;bottom: 80px; left: 20px;width: 260px; height: 140px; opacity: 0.9;transform: rotate(-10deg); }
.pa:hover .pic {opacity: 0; }
.pa:hover .pic1 {opacity: 0; }
.pa:hover .vid {opacity: 1; }
#player { position: absolute; bottom: 90px; right:90px; }
#lrc { position: absolute; left:300px; top: 110px; }
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover;opacity: 0; pointer-events: none; }
</style>
<div id="tiezi">
<audio id="aud" src="https://link.hhtjim.com/163/29807544.mp3" autoplay loop></audio>
<div class="pa">
<video class="vid" src="https://img.tukuppt.com/video_show/2405811/00/73/42/6095e864e212a.mp4
" loop muted></video>
<img class="pic" src="" alt="" />
<img class="pic1" src="https://pic.imgdb.cn/item/667b7f31d9c307b7e9cf3438.png" alt="" />
<img class="pa" src="https://pic.imgdb.cn/item/667b7c02d9c307b7e9caac5c.png" alt="" /><div class="son"></div></div>
<img class="pic2" src="https://pic.imgdb.cn/item/64f95703661c6c8e543b90dc.gif" alt="" />
<canvas id="player" width="240" height="80" ></canvas>
<canvas id="lrc" width="800" height="50" ></canvas>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_518.js';
document.body.appendChild(sF);
var colors = {track: 'snow', prog: 'Chocolate', lrc120: 'GreenYellow', lrc82: 'Chocolate'};
var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script></td> 越剧——秋海棠，是赵志刚唱的吗？ 这制作真好，小框里有视频，鼠标触碰小播就变成图片了。
喜欢越剧，感谢有声有色老师馈赠好帖{:4_199:} 非常喜欢，影子珍藏{:4_187:} 梦江南 发表于 2024-6-26 15:22
越剧——秋海棠，是赵志刚唱的吗？
是的 红影 发表于 2024-6-26 15:55
这制作真好，小框里有视频，鼠标触碰小播就变成图片了。
喜欢越剧，感谢有声有色老师馈赠好帖
就是唱词我想移动一下，去年你教过我，今天我怎么调都不行，看来老了前学，后就忘了。 有声有色 发表于 2024-6-26 16:08
就是唱词我想移动一下，去年你教过我，今天我怎么调都不行，看来老了前学，后就忘了。
#lrc { position: absolute; top: 10px; }
这个应该就可以调整位置的吧，加上左右#lrc { position: absolute; left: 400px; top: 10px; }就可以调了，右边是right，底下是bottom ,随便用哪个边做参照都行的。 非常有江南韵味！特别那播放器一触动，就成一幅江南的水墨丹青画了。太厉害了！ 樵歌 发表于 2024-6-26 18:51
非常有江南韵味！特别那播放器一触动，就成一幅江南的水墨丹青画了。太厉害了！
谢谢鼓励 我是用了红影的代码。 本帖最后由 有声有色 于 2024-6-27 08:46 编辑
红影 发表于 2024-6-26 17:19
#lrc { position: absolute; top: 10px; }
这个应该就可以调整位置的吧，加上左右#lrc { position: ab ...
谢谢 我等会去试试，不懂的话再来请教
调试好了再次谢谢
有声有色 发表于 2024-6-27 08:35
谢谢鼓励 我是用了红影的代码。
那也有你的创意在里面呀 有声有色 发表于 2024-6-27 08:36
谢谢 我等会去试试，不懂的话再来请教
调试好了再次谢谢
不客气啊，看你调好了呢，嗯嗯，这个位置好{:4_187:} 欣赏有声有色精彩的制作{:4_199:} 亲爱的，收礼开心@红影 樵歌 发表于 2024-6-27 16:31
那也有你的创意在里面呀
谢谢鼓励 小辣椒 发表于 2024-6-27 21:42
欣赏有声有色精彩的制作
谢谢支持鼓励
页:
[1]