中国风

马黑黑 发表于 2022-6-21 07:15

马黑黑 发表于 2022-6-21 07:17

代码（自己机子上测试时.mama 选择器的 left: -214px 改为 margin: auto）：
<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/14490244/00/16/53/5ea3335d1ac08.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="https://music.163.com/song/media/outer/url?id=1386711437.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>

加林森 发表于 2022-6-21 07:23

太有意思了。

马黑黑 发表于 2022-6-21 07:25

队长好早啊

马黑黑 发表于 2022-6-21 07:25

加林森发表于 2022-6-21 07:23
太有意思了。

主要是视频的效果好

加林森 发表于 2022-6-21 07:33

马黑黑发表于 2022-6-21 07:25
队长好早啊

这几天太热啦，睡不好就起来了。

加林森 发表于 2022-6-21 07:34

马黑黑发表于 2022-6-21 07:25
主要是视频的效果好

嗯嗯。挺好的。

马黑黑 发表于 2022-6-21 07:35

加林森发表于 2022-6-21 07:34
嗯嗯。挺好的。

确实不错的

马黑黑 发表于 2022-6-21 07:35

加林森发表于 2022-6-21 07:33
这几天太热啦，睡不好就起来了。

挺好，早起的鸟儿有虫吃

加林森 发表于 2022-6-21 07:45

马黑黑发表于 2022-6-21 07:35
确实不错的

{:4_181:}

加林森 发表于 2022-6-21 07:46

马黑黑发表于 2022-6-21 07:35
挺好，早起的鸟儿有虫吃

{:4_203:}

马黑黑 发表于 2022-6-21 07:56

加林森发表于 2022-6-21 07:46

额，忘记了，你不吃虫子

马黑黑 发表于 2022-6-21 07:57

加林森发表于 2022-6-21 07:45

队长，这个就是不要歌词的改装方法（当然，也加入了其他元素），你可以研究下

上海朝阳 发表于 2022-6-21 07:59

这水墨动态感太美了，群雁飞，帆船过，红日高照，小荷摇曳晃清波。尤其这荷花像皮影戏的动态感。

加林森 发表于 2022-6-21 08:01

马黑黑发表于 2022-6-21 07:56
额，忘记了，你不吃虫子

当然了啊。

加林森 发表于 2022-6-21 08:02

马黑黑发表于 2022-6-21 07:57
队长，这个就是不要歌词的改装方法（当然，也加入了其他元素），你可以研究下

谢谢老黑。我正在研究呢。{:4_190:}

马黑黑 发表于 2022-6-21 08:02

上海朝阳发表于 2022-6-21 07:59
这水墨动态感太美了，群雁飞，帆船过，红日高照，小荷摇曳晃清波。尤其这荷花像皮影戏的动态感。

这些元素都是原视频营造出来的

马黑黑 发表于 2022-6-21 08:02

加林森发表于 2022-6-21 08:01
当然了啊。

其实虫子营养挺好的

加林森 发表于 2022-6-21 08:06

马黑黑发表于 2022-6-21 08:02
其实虫子营养挺好的

我在想吃不吃你呢？{:4_170:}

马黑黑 发表于 2022-6-21 08:06

加林森发表于 2022-6-21 08:02
谢谢老黑。我正在研究呢。

关键是看看JS部分：

<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;
}

红色部分是和播放器有关的，当然前面的变量声明有部分也是，但核心在这里

页: [1] 2 3 4 5

花潮论坛's Archiver

中国风