《凡尘》（学习黑黑《Teyata》代码效果）

红影发表于 2024-7-29 23:36

红影发表于 2024-7-29 23:38

跟着学做个，碰到问题了{:4_173:}
1、视频无法暂停，2、加载右侧的第二个花瓣飘落的视频不显示。@马黑黑

红影发表于 2024-7-29 23:39

不折腾了，明天一早有会。先下了。
感谢黑黑代码{:4_187:}

小辣椒 发表于 2024-7-29 23:44

首席欣赏，亲爱的的辛苦的，明天还起早{:4_179:}

马黑黑 发表于 2024-7-29 23:52

红影发表于 2024-7-29 23:38
跟着学做个，碰到问题了
1、视频无法暂停，2、加载右侧的第二个花瓣飘落的视频不显示。@马黑黑

<h2>更新的代码</h2>
<div class="hE"><pre>
<style>
.hy {
margin: 80px 0 30px calc(50% - 593px);
width: 1024px;
height: 640px;
box-sizing: border-box;
border: 3px solid;
border-image: linear-gradient(to top right, PaleTurquoise, LightCyan, PaleTurquoise, LightCyan) 3 3;
background: url('https://pic.imgdb.cn/item/66a7a09fd9c307b7e93cb2dc.jpg') no-repeat center/cover;
z-index: 1; overflow: hidden;
pointer-events: none;
position: relative;
}
.hy::before, .hy::after {
position: absolute;
content: '';
transition: all .45s;
}
.hy::before {
inset: 0;
background: rgba(255, 255, 255, 0.35);
backdrop-filter: hue-rotate(var(--hue));
}
.hy::after {
right: 480px;
bottom: 40px;
width: 110px;
height: 110px;
background: url('https://pic.imgdb.cn/item/66a7a21cd9c307b7e93dfb65.png') no-repeat center/cover;
transform: rotate(var(--hue));
pointer-events: auto;
cursor: pointer;
}
.vid { position: absolute; object-fit: cover; }
.vid:nth-of-type(1) {
top: 85px;
right: 350px;
width: 360px;
height: 360px;
border-radius: 50%;
border: 6px solid #F4A460;
}
.vid:nth-of-type(2) { top: 0px; right: -100px; width: 450px; height: 350px; mix-blend-mode: screen; opacity: .95; z-index: 10;}
.hy:hover::before { backdrop-filter: unset; }
</style>

<div class="hy" id="hy1">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1363152402" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2405811/00/73/42/6095e864e212a_10s_big.mp4" autoplay loop muted>
<video class="vid" src="https://img.tukuppt.com/video_show/6181262/01/28/52/6291f470c613a_10s_big.mp4" autoplay loop muted>
</div>

<script>
var vids = hy1.querySelectorAll('.vid'); //视频变量
var mState = () => {
hy1.title = ['暂停','播放'][+aud.paused];
vids.forEach(vid => aud.paused ? vid. pause() : vid.play());
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => hy1.style.setProperty('--hue', Math.floor(Math.random() * 360) + 'deg');
hy1.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-7-29 23:53

aud.ontimeupdate 监听事件不能放在 mState() 函数内，它和其他监听事件一样，独立存在。

起个网名好难 发表于 2024-7-30 06:10

清爽、别致，赞！

起个网名好难 发表于 2024-7-30 06:16

红影发表于 2024-7-29 23:38
跟着学做个，碰到问题了
1、视频无法暂停，2、加载右侧的第二个花瓣飘落的视频不显示。@马黑黑

vids没定义，加上就行了

<script>
var vids = hy1.querySelectorAll('.vid');
var mState = () => {
……………………

起个网名好难 发表于 2024-7-30 06:25

红影发表于 2024-7-29 23:38
跟着学做个，碰到问题了
1、视频无法暂停，2、加载右侧的第二个花瓣飘落的视频不显示。@马黑黑
video 是因为都少了结束标签 </video>

海笑发表于 2024-7-30 07:38

欣赏老师佳作！

梦油发表于 2024-7-30 09:24

看了你的作品，我感觉不热啦。心静自然凉。

梦江南 发表于 2024-7-30 10:31

好制作，欣赏点赞！{:4_199:}

朵拉发表于 2024-7-30 15:45

漂亮呦，欣赏学习哈{:4_204:}

红影发表于 2024-7-30 17:43

小辣椒发表于 2024-7-29 23:44
首席欣赏，亲爱的的辛苦的，明天还起早

谢谢亲爱的，做这个碰到问题了{:4_173:}

红影发表于 2024-7-30 17:45

马黑黑发表于 2024-7-29 23:52
更新的代码

<style>

谢谢黑黑，已经按这个调整好了{:4_187:}

红影发表于 2024-7-30 17:46

马黑黑发表于 2024-7-29 23:53
aud.ontimeupdate 监听事件不能放在 mState() 函数内，它和其他监听事件一样，独立存在。

嗯嗯，知道了，谢谢黑黑。还是头一次碰到这种监听事件，下回知道了{:4_187:}

红影发表于 2024-7-30 17:47

起个网名好难发表于 2024-7-30 06:10
清爽、别致，赞！

谢谢难难鼓励，昨天做得比较匆忙，好多错误{:4_173:}

红影发表于 2024-7-30 17:48

起个网名好难发表于 2024-7-30 06:16
vids没定义，加上就行了

嗯，没定义就去使用，太不应该了。谢谢难难{:4_187:}

红影发表于 2024-7-30 17:49

起个网名好难发表于 2024-7-30 06:25
video 是因为都少了结束标签

这个真不应该，掩面，无地自容了{:4_173:}

马黑黑 发表于 2024-7-30 17:52

红影发表于 2024-7-30 17:46
嗯嗯，知道了，谢谢黑黑。还是头一次碰到这种监听事件，下回知道了

lrc歌词同步用到这个监听的

页: [1] 2 3 4 5

花潮论坛's Archiver

《凡尘》（学习黑黑《Teyata》代码效果）