云朵·云朵

马黑黑 发表于 2024-6-20 12:06

本帖最后由马黑黑于 2024-6-20 12:59 编辑 <br /><br /><style>
#tz { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 574px; background: url('https://638183.freep.cn/638183/t24/3/yydo.jpg') no-repeat center/cover; box-shadow: 2px 2px 3px gray; z-index: 1; overflow: hidden; position: relative; }
#tz::before { content: attr(data-lrc); position: absolute; left: 20px; top: 20px; width: 60px; height: 95%; writing-mode: vertical-rl; font: bold 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to bottom, cyan, lightgreen, green, lightgreen, cyan) 50%/60px 200px; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px black); }
#player { --size: 160px; position: absolute; right: 20px; top: 20px; width: var(--size); height: var(--size); display: grid; place-items: center; cursor: pointer; transition: filter 2s; filter: hue-rotate(0) drop-shadow(0 0 18px white); animation: rot 6s linear infinite var(--state); }
#player::after { position: absolute; content: ''; width: calc(var(--size) / 6); height: calc(var(--size) / 6); border-radius: 50%; background: rgba(0,128,44,.95); }
#player:hover { filter: hue-rotate(180deg) drop-shadow(0 0 4px yellow); }
c-c { position: absolute; width: calc(var(--size) / 2); height: calc(var(--size) / 8); border-radius: 100%; background: rgba(0,153,51,.7); transform: rotate(var(--deg)) translate(calc(var(--size) / 4)); }
.pic { position: absolute; top: 0; left: 0; width: 40px; transform: rotate(90deg); offset-path: path('M0 500Q512 620, 1024 400'); offset-distance: 0; animation: fly 30s infinite var(--state); }
.pic:nth-of-type(2) { animation-delay: -8s; filter: hue-rotate(60deg); }
.pic:nth-of-type(3) { animation-delay: -15s; filter: hue-rotate(90deg); }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { offset-distance: 100%; } }
</style>

<div id="tz" data-lrc="HUACHAO">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=325583" autoplay loop></audio>
<img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
<img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
<img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
<div id="player" title="播放/暂停"></div>
</div>

<script>
var curkey = 0, lrcAr = [], all = 5;
Array.from({length: all}).forEach((c,k) => {
c = document.createElement('c-c');
c.style.cssText += `
//background: #${Math.random().toString(16).substring(2,8)};
--deg: ${360 / all * k}deg;
`;
player.appendChild(c);
});
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
});
};
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
tz.dataset.lrc = lrcAr;
curkey ++;
}
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();

var lrc = `
云朵 - 云朵
云朵 - 云朵
我一定回来越过那一片海
阿妈呼唤萦绕耳畔
那年我离开像一朵云彩
单单的飘向天外
风拉着我的衣带
像阿妈慈母情怀
等着我回来吻你双鬓洁白
向你倾吐爱以及爱
年少读不懂亲人的关怀
傻傻的执着未来
痴迷在天外的色彩
不见你心泪似海
你笑着问我要什么
我要你紧紧搂着我
我就像天上漂泊的云朵
飞向天际辽阔
我搂着阿妈的爱
从此后再不要分开
我登上圣洁琉璃的天台
还是你的小孩
你笑着问我要什么
我要你紧紧搂着我
我就像天上漂泊的云朵
飞向天际辽阔
我搂着阿妈的爱
从此后再不要分开
我登上圣洁琉璃的天台
还是你的小孩
还是你的小孩
`;

getAr(lrc);
</script>

马黑黑 发表于 2024-6-20 12:07

本帖最后由马黑黑于 2024-6-20 13:00 编辑

帖子代码<style>
#tz { margin: 20px auto; width: 1024px; height: 574px; background: url('https://638183.freep.cn/638183/t24/3/yydo.jpg') no-repeat center/cover; box-shadow: 2px 2px 3px gray; z-index: 1; overflow: hidden; position: relative; }
#tz::before { content: attr(data-lrc); position: absolute; left: 20px; top: 20px; width: 60px; height: 95%; writing-mode: vertical-rl; font: bold 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to bottom, cyan, lightgreen, green, lightgreen, cyan) 50%/60px 200px; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px black); }
#player { --size: 160px; position: absolute; right: 20px; top: 20px; width: var(--size); height: var(--size); display: grid; place-items: center; cursor: pointer; transition: filter 2s; filter: hue-rotate(0) drop-shadow(0 0 18px white); animation: rot 6s linear infinite var(--state); }
#player::after { position: absolute; content: ''; width: calc(var(--size) / 6); height: calc(var(--size) / 6); border-radius: 50%; background: rgba(0,128,44,.95); }
#player:hover { filter: hue-rotate(180deg) drop-shadow(0 0 4px yellow); }
c-c { position: absolute; width: calc(var(--size) / 2); height: calc(var(--size) / 8); border-radius: 100%; background: rgba(0,153,51,.7); transform: rotate(var(--deg)) translate(calc(var(--size) / 4)); }
.pic { position: absolute; top: 0; left: 0; width: 40px; transform: rotate(90deg); offset-path: path('M0 500Q512 620, 1024 400'); offset-distance: 0; animation: fly 30s infinite var(--state); }
.pic:nth-of-type(2) { animation-delay: -8s; filter: hue-rotate(60deg); }
.pic:nth-of-type(3) { animation-delay: -15s; filter: hue-rotate(90deg); }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { offset-distance: 100%; } }
</style>

<div id="tz" data-lrc="HUACHAO">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=325583" autoplay loop></audio>
<img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
<img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
<img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
<div id="player" title="播放/暂停"></div>
</div>

<script>
var curkey = 0, lrcAr = [], all = 5;
Array.from({length: all}).forEach((c,k) => {
c = document.createElement('c-c');
c.style.cssText += `
//background: #${Math.random().toString(16).substring(2,8)};
--deg: ${360 / all * k}deg;
`;
player.appendChild(c);
});
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
});
};
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
tz.dataset.lrc = lrcAr;
curkey ++;
}
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();

var lrc = `
云朵 - 云朵
云朵 - 云朵
我一定回来越过那一片海
阿妈呼唤萦绕耳畔
那年我离开像一朵云彩
单单的飘向天外
风拉着我的衣带
像阿妈慈母情怀
等着我回来吻你双鬓洁白
向你倾吐爱以及爱
年少读不懂亲人的关怀
傻傻的执着未来
痴迷在天外的色彩
不见你心泪似海
你笑着问我要什么
我要你紧紧搂着我
我就像天上漂泊的云朵
飞向天际辽阔
我搂着阿妈的爱
从此后再不要分开
我登上圣洁琉璃的天台
还是你的小孩
你笑着问我要什么
我要你紧紧搂着我
我就像天上漂泊的云朵
飞向天际辽阔
我搂着阿妈的爱
从此后再不要分开
我登上圣洁琉璃的天台
还是你的小孩
还是你的小孩
`;

getAr(lrc);
</script>

马黑黑 发表于 2024-6-20 12:12

知识点：文本竖排

writing-mode 属性相关知识请自行网补。这里主要说说lrc歌词显示盒子竖排之后的配套设置：一是盒子的宽高设置问题，要和横排的对换过来；二是背景渐变，横排的 to right 要改为 to bottom 或 to top，也是调换个方向。

亚伦影音工作室 发表于 2024-6-20 12:48

歌词没有切换！

南无月 发表于 2024-6-20 12:52

场景开阔大气，配上云朵高亢辽阔的音色，意境太美了。。
writing-mode: vertical-rl;这句实现了歌词竖排。。

南无月 发表于 2024-6-20 12:53

马黑黑发表于 2024-6-20 12:12
知识点：文本竖排

writing-mode 属性相关知识请自行网补。这里主要说说lrc歌词显示盒子竖排之后的配套设 ...

这个渐变在网站里时没有留意到~~现在仔细看看。。{:4_170:}

马黑黑 发表于 2024-6-20 12:53

南无月发表于 2024-6-20 12:53
这个渐变在网站里时没有留意到~~现在仔细看看。。

就是对换一下而已

南无月 发表于 2024-6-20 12:54

小播纯代码制作
中间小圆块在最上方用了border-radius: 50%;，五个瓣叶用了border-radius: 100%;边缘都是圆弧形了。
小播给了滤镜，触碰变色。。
蝴蝶设置了飞翔路径，这三个小可爱十分漂亮{:4_199:}

南无月 发表于 2024-6-20 12:56

马黑黑发表于 2024-6-20 12:53
就是对换一下而已

你提醒的很仔细，宽高对换，渐变方向要跟着变。。
下回跟个竖排的歌词

南无月 发表于 2024-6-20 12:58

天天都有好歌听，耳朵是享爱。。。{:4_170:}

马黑黑 发表于 2024-6-20 13:00

亚伦影音工作室发表于 2024-6-20 12:48
歌词没有切换！

感谢提醒

马黑黑 发表于 2024-6-20 13:14

南无月发表于 2024-6-20 12:58
天天都有好歌听，耳朵是享爱。。。

{:4_174:}

马黑黑 发表于 2024-6-20 13:14

南无月发表于 2024-6-20 12:56
你提醒的很仔细，宽高对换，渐变方向要跟着变。。
下回跟个竖排的歌词

都是配套的

马黑黑 发表于 2024-6-20 13:15

南无月发表于 2024-6-20 12:52
场景开阔大气，配上云朵高亢辽阔的音色，意境太美了。。
writing-mode: vertical-rl;这句实现了歌词竖排。 ...

一眼瞧得出来，厉害

亚伦影音工作室 发表于 2024-6-20 13:17

马黑黑发表于 2024-6-20 13:00
感谢提醒

奇怪了，换了另一首歌，不知道有的歌词挤在一起了！

红影发表于 2024-6-20 15:23

竖排的歌词也好看，可以配合一些场景的需求了{:4_187:}

红影发表于 2024-6-20 15:24

又是纯代码的播放器按钮，真棒。
那三只小蝴蝶也好奇特，好像是变速的，飞到边缘的地方好像速度变慢了，在等候后面的小蝴蝶似的{:4_173:}

南无月 发表于 2024-6-20 17:02

马黑黑发表于 2024-6-20 12:53
就是对换一下而已

好哒~~对换了位置，东西还是那些东西。。

南无月 发表于 2024-6-20 17:02

马黑黑发表于 2024-6-20 13:14

巴适得板。。这会我可以悠闲自在了。。{:4_174:}

南无月 发表于 2024-6-20 17:03

马黑黑发表于 2024-6-20 13:14
都是配套的
东西配套好用，颜色配套看着比较养眼{:4_170:}

页: [1] 2 3 4 5 6 7 8

花潮论坛's Archiver

云朵·云朵