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

红影

红影

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

红影

不折腾了，明天一早有会。先下了。
感谢黑黑代码

小辣椒

首席欣赏，亲爱的的辛苦的，明天还起早

马黑黑

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

更新的代码

<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>

马黑黑

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

起个网名好难

清爽、别致， 赞！

起个网名好难

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

vids没定义， 加上就行了

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

复制代码

起个网名好难

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

video 是因为都少了 结束标签 </video>

海笑

欣赏老师佳作！

梦油

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

梦江南

好制作，欣赏点赞！

朵拉

漂亮呦，欣赏学习哈

红影

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

谢谢亲爱的，做这个碰到问题了

红影

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

&lt;style&gt;

谢谢黑黑，已经按这个调整好了

红影

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

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

红影

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

谢谢难难鼓励，昨天做得比较匆忙，好多错误

红影

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

嗯，没定义就去使用，太不应该了。谢谢难难

红影

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

这个真不应该，掩面，无地自容了

马黑黑

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

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