【凡哥教程第八讲作业之二】【花简静】白噪音 - 银临（众多子元素的联动控制）

花简静 · 发表于 2024-7-28 22:10

花简静 · 发表于 2024-7-28 22:11

<style>

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

#mydiv {

position: relative;

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

width: 1700px;

height: 900px;

background: url('https://642303.freep.cn/642303/tu/20240728di800202.webp') no-repeat center/cover;

overflow: hidden;

}

/* 小播class选择器 */

.player {

position: absolute;

bottom: 40px;

width: 120px;

height: 120px;

opacity: .99;

cursor: pointer;

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

}

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

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

/* 飞鹰图片选择器 */

.bird {

position: absolute;

right: -100px;

bottom: 10px;

width: 120px;

height: 120px;

opacity: .3;

animation: fly 16s linear infinite var(--state);

}

.bird:nth-of-type(2) { bottom: 110px;width: 160px;height: 160px;animation-delay: -10s; } /* 对标的 img 标签排在帖子中第2位：提前2秒执行动画 */

.bird:nth-of-type(3) { bottom: 310px;width: 140px;height: 140px;animation-delay: -14s; } /* 对标的 img 标签排在帖子中第3位：提前4秒执行动画 */

/* 视频class选择器 */

.vid {

position: absolute;

width: 100%;

height:110%;

object-fit: cover;

pointer-events: none;

opacity: 1;

}

.vid:nth-of-type(1) { top:-80px;mix-blend-mode: screen;border-radius: 50%;width: 80%;height:60%; right:-350px;opacity: 0.99; top:430px;} /* 对标的 video 标签排在帖子中第1位 */

.vid:nth-of-type(2) { width: 16%;height:16%; opacity: 0.96; mix-blend-mode: screen;top:510px;left:150px;-webkit-mask: radial-gradient(circle, silver, lightgreen, cyan, transparent,transparent);} /* 对标的 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 22:13

LOGO旁边和耳环两朵花是控制按纽

三个泡泡是图片

玫瑰花视频和蝴蝶是两个视频
基本按老师原贴结构来的。

花简静 · 发表于 2024-7-28 22:14

@雨声 @柒玥亲们来瞧瞧这个贴子，跟着会不会简单一些。

雨声 · 发表于 2024-7-28 22:20

花简静发表于 2024-7-28 22:14
@雨声 @柒玥亲们来瞧瞧这个贴子，跟着会不会简单一些。

收到，爱你静宝，看完球赛我去摆弄图

花简静 · 发表于 2024-7-28 22:23

雨声发表于 2024-7-28 22:20
收到，爱你静宝，看完球赛我去摆弄图

好哒，几金了哈。。。

清梦 · 发表于 2024-7-29 10:35

静静太好了，抄了你的作业

清梦 · 发表于 2024-7-29 10:35

这会我要去接孩子下课了，静宝新周快乐！

花简静 · 发表于 2024-7-29 16:19

清梦发表于 2024-7-29 10:35
这会我要去接孩子下课了，静宝新周快乐！

好哒，先去忙哈

花简静 · 发表于 2024-7-29 16:19

清梦发表于 2024-7-29 10:35
静静太好了，抄了你的作业

应该的，一起玩哈。。

[活动] 【凡哥教程第八讲作业之二】【花简静】白噪音 - 银临（众多子元素的联动控制）

评分

评分

评分

评分

浏览过的版块

版主勋章

山高为峰

山外有山

巳巳如意

两周年庆

守望千山

少年歌行

一叶知秋

樱果相依

江湖之上

桃花朵朵

海洋之心

蝴蝶精灵

山间红叶

花漫千山

音画同行

中秋月圆

欢度国庆

雪花精灵

我书我心