《昆曲：牡丹亭皂罗袍》- 梦油、东篱闲人
<style type="text/css">
.mama { left: -214px; width: 1024px; height: 560px; background: #eee; overflow: hidden; box-shadow: 0 4px 30px #000; position: relative; }
.player { position: absolute; bottom: 10px; right: 10px; padding: 12px; cursor: pointer; }
.vid { position: absolute; top: -55px; width: 1024px; height: 615px; object-fit: cover; }
.circleTxt { position: relative; left: calc(50% - 150px); top: 120px; display: flex;justify-content: center; width: 300px; height: 300px;animation: fade 1.5s linear infinite alternate; }
.circleTxt span { position: absolute;font: bold 1.8em / 150px sans-serif;text-align: center;text-shadow: 1px 1px 2px #111;border-radius: 50%;color:#0B3B39;display: block;}
#lrcMsg { font: bold 1.5em / 2em sans-serif; display: block; color: #eee; text-shadow: 1px 1px 2px #000; }
#meter { width: 160px; cursor: pointer; }
@keyframes fade { to { opacity: .5; } }
</style>
<div class="mama">
<video class="vid" src="https://img.tukuppt.com/video_show/2405179/00/02/36/5b584236d8731.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="circleTxt"></div>
<div class="player">
<span id="lrcMsg">昆曲：牡丹亭皂罗袍 - 梦油、东篱闲人</span>
<meter id="meter" min="0" max="100" low="33" high="66" optimum = "70" value="0"></meter>
</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/06/17/26f0d7d12ea703f80584e21ec1c07120.mp3" autoplay="autoplay" loop="loop"></audio>
<script language="javascript">
let lrcMsg = document.querySelector('#lrcMsg'),
player = document.querySelector('.player');
aud = document.querySelector('#aud'),
ct = document.querySelector('.circleTxt'),
meter = document.querySelector('#meter');
circleText('原来姹紫嫣红开遍似这般都付于断井颓垣良辰美景奈何天赏心乐事谁家院',ct);
aud.addEventListener('timeupdate',() => playMsg());
aud.addEventListener('ended',() => lrcKey = 0);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
let playMsg = () => meter.value = 100 * aud.currentTime / aud.duration;
function circleText(txt,ele) {
let width = ele.clientWidth, total = txt.length; angle = 360 / total, str = "";
for(j=0; j<total; j++) {
let transform =`rotate(${angle * j}deg) translateY(-${width / 2}px) rotate(${360 - angle*j}deg)`;
let color = `#${Math.random().toString(16).substr(-6)}`;
str += `<span style="color: ${color}; transform: ${transform};">${txt.charAt(j)}</span>\n`;
}
ele.innerHTML = str;
}
</script>
【皂罗袍】
原来姹紫嫣红开遍，
似这般都付与断井颓垣。
良辰美景奈何天，
便赏心乐事谁家院？
朝飞暮卷，云霞翠轩。
雨丝风片，烟波画船。
锦屏人忒看的这韶光贱！
遍青山啼红了杜鹃，
那荼蘼外烟丝醉软，
那牡丹虽好，
他春归怎占的先？
闲凝眄兀生生燕语明如剪，
听呖呖莺声溜的圆。
@梦油 @东篱闲人 队长构思真不错，把昆区选取部分词句做成转圈文字，也很漂亮呢{:4_187:} 谢谢，谢谢！谢谢你这份十分美好的礼物，谢谢你的良苦用心和精美的制作，作品山清水秀、玉树临风太美了。字幕设计也具新意。谢谢你啦！ 加加改唱戏啦？{:5_117:} 用了心思的一贴。。。{:5_116:} 花有点大，落花成灾了。。。{:5_117:} 都说昆曲是,戏曲百花中的“空谷幽兰”,美的似一场梦。不过俺还真欣赏不了这个。。。{:5_117:} 红影 发表于 2022-6-21 10:49
队长构思真不错，把昆区选取部分词句做成转圈文字，也很漂亮呢
红影上午好！是的，把歌词取点为转圈文字了。 梦油 发表于 2022-6-21 10:50
谢谢，谢谢！谢谢你这份十分美好的礼物，谢谢你的良苦用心和精美的制作，作品山清水秀、玉树临风太美了。字 ...
老梦不客气的。收礼开森！ 东篱闲人 发表于 2022-6-21 10:51
加加改唱戏啦？
跟你学的。{:4_189:} 东篱闲人 发表于 2022-6-21 10:51
用了心思的一贴。。。
必须的嘛。送两位仁兄可不能乱七八糟的送吧。 加林森 发表于 2022-6-21 10:57
跟你学的。
俺唱过戏吗？{:5_115:} 东篱闲人 发表于 2022-6-21 10:52
花有点大，落花成灾了。。。
没有办法啦，是视频的。{:4_189:} 加林森 发表于 2022-6-21 10:59
没有办法啦，是视频的。
技术含量很高！{:5_116:} 东篱闲人 发表于 2022-6-21 10:59
俺唱过戏吗？
你发过唱戏的帖哦。 东篱闲人 发表于 2022-6-21 11:00
技术含量很高！
是的。我就是组合起来玩的。{:4_189:} 东篱闲人 发表于 2022-6-21 10:53
都说昆曲是,戏曲百花中的“空谷幽兰”,美的似一场梦。不过俺还真欣赏不了这个。。。
送给你的我就不管了。{:4_189:} 加林森 发表于 2022-6-21 11:06
是的。我就是组合起来玩的。
你很牛！{:5_116:}
页:
[1]
2