檐下客

马黑黑 发表于 2023-11-26 07:47

本帖最后由马黑黑于 2023-11-26 08:01 编辑 <br /><br /><style>
#papa {
margin: -80px 0 0 calc(50% - 593px);
display: grid;
place-items: center;
width: 1024px;
height: 640px;
background: lightblue url('https://638183.freep.cn/638183/t23/3/yjxxke.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
--state: running;
}
.play_pic {
position: absolute;
width: 200px;
height: 200px;
right: 100px;
opacity: .75;
cursor: pointer;
animation: rot 6s infinite linear var(--state);
}
.play_pic:nth-of-type(1) {
width: 400px;
height: 400px;
filter: sepia(70%);
}

.play_pic:nth-of-type(2) {
width: 300px;
height: 300px;
filter: hue-rotate(270deg) contrast(175%);
}
@keyframes rot {
to { transform: rotate(1turn); }
}
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1298410511" autoplay loop></audio>
<img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
<img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
<img id="iplay" class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
</div>

<script>

(function() {

let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];

let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};

loadJs('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'bottom: 20px;',
});
});

})();

</script>

马黑黑 发表于 2023-11-26 07:48

本帖最后由马黑黑于 2023-11-26 08:07 编辑

帖子代码
<style>
#papa {
   margin: 0 0 0 calc(50% - 593px);
   display: grid;
   place-items: center;
   width: 1024px;
   height: 640px;
   background: lightblue url('https://638183.freep.cn/638183/t23/3/yjxxke.jpg') no-repeat center/cover;
   box-shadow: 3px 3px 20px #000;
   position: relative;
   z-index: 1;
   --state: running;
}
.play_pic {
   position: absolute;
   width: 200px;
   height: 200px;
   right: 100px;
   opacity: .75;
   cursor: pointer;
   animation: rot 6s infinite linear var(--state);
}
.play_pic:nth-of-type(1) {
   width: 400px;
   height: 400px;
   filter: sepia(70%);
}

.play_pic:nth-of-type(2) {
   width: 300px;
   height: 300px;
   filter: hue-rotate(270deg) contrast(175%);
}
@keyframes rot {
   to { transform: rotate(1turn); }
}
</style>

<div id="papa">
   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1298410511" autoplay loop></audio>
   <img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
   <img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
   <img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
</div>

<script>

let lrcAr = [
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,

];

let loadJs = (url,callback) => {
   let body = document.querySelector('body'), jsNode = document.createElement('script');
   jsNode.charset = 'utf-8';
   jsNode.setAttribute('src', url);
   body.appendChild(jsNode);
   jsNode.onload = () => callback();
};

loadJs('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
   HCPlayer({
            papa: '#papa',
            lrcAr: lrcAr,
            lrc_css: 'bottom: 20px;',
   });
});

</script>

马黑黑 发表于 2023-11-26 07:58

歌词同步插件从我们的音频播放控制器插件中抽离出来。资源地址：

https://638183.freep.cn/638183/web/api/hc_lrc.js

该插件提供的功能主要两个，一是歌词同步，配置与之前的插件中的 lrc_css 是一样的；二是简易控制音频的播放与暂停。

第二个功能要求：

帖子中要有至少一个 class="play_pic" 的标签，可以是多个，且这些标签的位置可以随意设置。这些标签，一般是图片，也可以是其它的你所需要的东东，只要 class="play_pic" 就行，然后每一个这样的标签都会接受点击而控制音乐的暂停与播放。

有时候，不想加任何标签，只放一个background背景图片，也是可以简单加工一下，使用 hc_lrc 插件：

<div id="papa" class="play_pic" ...>

</div>

马黑黑 发表于 2023-11-26 08:15

本帖不同颜色的花朵，其实只用了一幅图，如下：

https://638183.freep.cn/638183/t23/btn/12f.png
200 * 200 的尺寸。通过 CSS 的类（.play_pic {}) 设置图片总体属性，然后再藉由 :nth-of-type(x) 根据需要来具体设置各自的属性，x 对应于第x张图。

本帖，三张图片中有两张使用了 css 的 filter 属性设置图片的差异性效果。

醉美水芙蓉 发表于 2023-11-26 08:35

红影发表于 2023-11-26 08:53

这个好，也可以加入svg图片了{:4_187:}

红影发表于 2023-11-26 09:00

马黑黑发表于 2023-11-26 08:15
本帖不同颜色的花朵，其实只用了一幅图，如下：

:nth-of-type(x) 根据需要来具体设置各自的属性，x 对应于第x张图。
它的叠放顺序就是1、2最后是.play_pic么？看到400的自动在最下面了。

红影发表于 2023-11-26 09:02

马黑黑发表于 2023-11-26 07:58
歌词同步插件从我们的音频播放控制器插件中抽离出来。资源地址：

https://638183.freep.cn/638183/web/a ...

这个好，让歌词同步变简单，然后可以任意配置播放器了{:4_199:}

红影发表于 2023-11-26 09:04

《檐下客》，这首歌还挺洒脱，那个播放器的图图也有趣，好像被檐下雨给驱动而转动的{:4_172:}

红影发表于 2023-11-26 09:06

这个里面有很多新奇的玩法，原来做播放器帖子可以有各种任意组合。不过这需要对代码很熟{:4_199:}

红影发表于 2023-11-26 09:13

马黑黑发表于 2023-11-26 07:48
帖子代码

这个还复习了filter: 的那么多功能，就hue-rotate色相变化的用得多点，sepia是褐色效果，contrast是对比度，这里取了1.75是变大。在三个图的比较里，感受filter效果也真不错。
这个帖子里的干货真不少啊，看到这个帖子太开心了{:4_199:}

马黑黑 发表于 2023-11-26 09:56

红影发表于 2023-11-26 09:13
这个还复习了filter: 的那么多功能，就hue-rotate色相变化的用得多点，sepia是褐色效果，contrast是对比 ...

帖子元素是简单的

马黑黑 发表于 2023-11-26 09:57

红影发表于 2023-11-26 09:06
这个里面有很多新奇的玩法，原来做播放器帖子可以有各种任意组合。不过这需要对代码很熟

期末考试接近满分的一般都做不出来。俺经常挨补考，能做

马黑黑 发表于 2023-11-26 09:58

红影发表于 2023-11-26 09:04
《檐下客》，这首歌还挺洒脱，那个播放器的图图也有趣，好像被檐下雨给驱动而转动的

这是要你想旋转才像

马黑黑 发表于 2023-11-26 09:59

红影发表于 2023-11-26 09:02
这个好，让歌词同步变简单，然后可以任意配置播放器了

随意做做，可能封装的不够完好

马黑黑 发表于 2023-11-26 09:59

醉美水芙蓉发表于 2023-11-26 08:35
黑黑老师早上好！这个也太漂亮了吧！

上午好。感谢支持

马黑黑 发表于 2023-11-26 09:59

红影发表于 2023-11-26 08:53
这个好，也可以加入svg图片了

完全可以

马黑黑 发表于 2023-11-26 10:02

红影发表于 2023-11-26 09:00
:nth-of-type(x) 根据需要来具体设置各自的属性，x 对应于第x张图。
它的叠放顺序就是1、2最后是.play_ ...

伪类 :nth-of-type(x) 根据HTML代码逻辑的自上而下的次序，对同类名（比如本帖的 .play_pic）元素进行个性设定，元素可以不是连续放在一处的，只要class类名相同就好。

红影发表于 2023-11-26 10:15

马黑黑发表于 2023-11-26 09:56
帖子元素是简单的

元素简单，但涉及的内容挺多，都是好东西啊{:4_187:}

红影发表于 2023-11-26 10:16

马黑黑发表于 2023-11-26 09:57
期末考试接近满分的一般都做不出来。俺经常挨补考，能做

关键还在于构思，黑黑的思绪很跳脱，带来的都是惊艳的感觉{:4_199:}

页: [1] 2 3 4 5

花潮论坛's Archiver

檐下客