【凡哥教程第八讲作业之一】【花简静】木兰柴（众多子元素的联动控制）

花简静 · 发表于 2024-7-28 19:34

本帖最后由花简静于 2024-7-28 22:24 编辑

花简静 · 发表于 2024-7-28 19:34

<style>

/* 帖子容器id选择器 */

#mydiv {

position: relative;

margin: 30px 0 30px calc(50% - 931px);

width: 1700px;

height: 900px;

background: url('https://pic.imgdb.cn/item/66a62b9cd9c307b7e9c9a138.webp') no-repeat center/cover;

overflow: hidden;

}

/* 小播class选择器 */

.player {

position: absolute;

bottom: 40px;

width: 120px;

height: 120px;

opacity: .7;

cursor: pointer;

mix-blend-mode: screen;

animation: rot 8s linear infinite var(--state);

}

.player:nth-of-type(3) { width: 130px;height: 130px;right: 558px;bottom:60px; } /* 对标的 img 标签排在帖子中第3位 */

.player:nth-of-type(4) {border-radius: 50%;width: 95px;height: 95px; right: 296px;bottom:67px; } /* 对标的 img 标签排在帖子中第4位 */

.player:nth-of-type(5) {border-radius: 50%;width: 72px;height: 72px; right: 66px;bottom:127px; } /* 对标的 img 标签排在帖子中第5位 */

/* 飞鹰图片选择器 */

.bird {

position: absolute;

right: 280px;

top: 300px;

-webkit-mask: linear-gradient(0deg,transparent,red 20% );/* 这是第一个人物图片，裙边加了个羽化效果，如果不需要可以删掉 */

}

.bird:nth-of-type(2) {mix-blend-mode: screen;right: -100px;top: 120px; animation: fly 10s linear infinite var(--state);} /* 对标的 img 标签排在帖子中第2位：提前2秒执行动画 */

/* 视频class选择器 */

.vid {

position: absolute;

bottom: 0;

width: 200px;

height: 200px;

object-fit: cover;

border-radius: 50%;

pointer-events: none;

opacity: 1;

mix-blend-mode: screen;

}

.vid:nth-of-type(1) { width: 193px;height: 193px;left: 221px; bottom:169px;} /* 对标的 video 标签排在帖子中第1位 */

.vid:nth-of-type(2) { width: 293px;height: 291px;left: 215px; top:53px; filter: hue-rotate(170deg);} /* 对标的 video 标签排在帖子中第2位 */

.vid:nth-of-type(3) { width: 173px;height: 163px;left: 612px; bottom:100px; } /* 对标的 video 标签排在帖子中第2位 */

@keyframes rot { to { transform: rotate(360deg); } }

@keyframes fly { to { right: 1600px; } }

</style>

</div>

//声明并获取待控制的元素集合变量 : vids 视频、players 小播、birds 图片飞鹰

var vids = mydiv.querySelectorAll('.vid'),

players = mydiv.querySelectorAll('.player'),

birds = mydiv.querySelectorAll('.bird');

//联动控制函数

var mState = () => {

mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');

vids.forEach(vid => aud.paused ? vid.pause() : vid.play());

players.forEach(player => player.title = aud.paused ? '播放' : '暂停');

};

//audio空间三个监听事件

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();

//小播点击事件

players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());

</script>

花简静 · 发表于 2024-7-28 19:35

本帖最后由花简静于 2024-7-28 20:06 编辑

第八讲是多个子元素联动。。教程中结构清楚，层次分明，老师写的说明又很细致，在控制方面看得更加清晰。

说说我这贴子画面结构：
左边三个是属于视频类.vid 。（用的是熊猫家的视频）
右边三个是属于小播.player，（用的是之前收集的GIF动图）
飞鸟和人物属于飞鹰图片类.bird（也用的是收集的GIF动图）

再说代码：
第一CSS部分：
一一对应要做好，老师排的数字和后面的说明一定要看。这里是调整了图片和对应的大小，位置。。。
人物裙摆处有硬边，就加了个线性渐变，有点羽化的效果。代码34行是这一句：-webkit-mask: linear-gradient(0deg,transparent,red 20% );
飞鸟给了从右往跑的动态，代码36行。人物取消了这个动态。
删除一只飞鸟，增加一个视频和一个小播，所以数字相应有改变。

第二html部分：还是一一对应。
第三js部分（二话不说，照抄）