这个不知咋处理【咋裁剪溢出部分】已解决

亚伦影音工作室

[i=s] 本帖最后由 亚伦影音工作室 于 2024-11-12 20:08 编辑 [/i]

马黑黑

主帖元素css加一句：

overflow：hidden;

马黑黑

看了代码，已经有 overflow 属性了。问题出在JS里：

document.body.appendChild(newRaindrop);

应改为：

papa.appendChild(newRaindrop);

你原来的代码，是将雨滴添加到了 body 标签，所以overflow: hidden 管不了它

亚伦影音工作室

马黑黑 发表于 2024-11-11 21:04
看可以下代码，已经有 overflow 属性了。问题出在JS里：

document.body.appendChild(newRaindrop);

豁然开朗了，是的原来在body里。谢谢老师了！

亚伦影音工作室

马黑黑 发表于 2024-11-11 21:04
看了代码，已经有 overflow 属性了。问题出在JS里：

document.body.appendChild(newRaindrop);

[00:00.72]艺凌-2025一定要幸福
[00:04.44]作词：刘于谦 包一飞
[00:07.89]作曲：隔壁老胡
[00:11.08]编曲：大约在冬季
[00:19.86]回首走过来时路
[00:24.12]不知吃了多少苦
[00:28.63]背后没有参天的树
[00:33.14]痛也只能自己背负
[00:37.66]今年有太多酸楚
[00:41.91]也尝尽太多孤独
[00:46.42]等我走出人生低谷
[00:50.94]去看前方最美日出
[00:55.46]2025一定都要幸福
[00:59.69]多一些快乐少一点辛苦
[01:04.47]一路顺风顺水 好运都来光顾
[01:08.729996]欢喜也有人陪你渡
[01:12.97]2025一定都要幸福
[01:17.49]多一些时间少一点忙碌
[01:21.729996]你流过的眼泪 也都开出花束
[01:26.25]为你铺好余生的路
[01:48.91]今年有太多酸楚
[01:53.15]也尝尽太多孤独
[01:57.67]等我走出人生低谷
[02:01.92]去看前方最美日出
[02:06.44]2025一定都要幸福
[02:11.75]多一些快乐少一点辛苦
[02:15.2]一路顺风顺水 好运都来光顾
[02:19.99]欢喜也有人陪你渡
[02:24.24]2025一定都要幸福
[02:28.77]多一些时间少一点忙碌
[02:33.28]你流过的眼泪 也都开出花束
[02:37.54001]为你铺好余生的路
[02:42.09]2025一定都要幸福
[02:46.6]多一些快乐少一点辛苦
[02:51.11]一路顺风顺水 好运都来光顾
[02:55.37]欢喜也有人陪你渡
[02:59.97]2025一定都要幸福

亚伦影音工作室

醉美水芙蓉 发表于 2024-11-11 21:49
亚伦老师音乐能控制，雨滴控制不了！

才疏学浅，用很多办法都不行，正在请教老师！

红影

雨滴无法控制。制作很漂亮，隐现的女子像被闪电带出来似的

马黑黑

亚伦影音工作室 发表于 2024-11-11 21:44 老师我失败了，音乐控制不了！

梳理一下你的代码：

<style>
#papa{
	position: relative;
	width: 1286px;
	height: 720px;
	margin-left:-300px;
	margin-top:140px;
	border: 0px solid rgba(36, 201, 219,.95);
	border-radius: 0px;
	background:#000 url(https://pic.imgdb.cn/item/67162d12d29ded1a8c2f45cf.jpg)no-repeat center/cover;
	overflow: hidden;
	--state: running;
}

#mdiv {
	top:12%;
	left:85%;
	cursor: pointer;
	width:120px;
	height: 120px;
	animation:rot 10s linear infinite var(--state);
	position: absolute;
	filter:drop-shadow(0 0 1px #000);
	z-index: 40;
}

#tp{
	position: relative;
	width: 1286px;
	height: 720px;
	overflow: hidden;
	background:#1A192D;
	margin-left:0px;
	margin-top:0px;
	animation: light 10s ease-in infinite;
}

#rain {
	width: 3px;
	height: 6px;
	background: #8db0b4;
	position: absolute;
	top: 5px;
	left: 0px;
	border-radius: 3px;
	animation: rain 8s linear infinite var(--state);
	filter: blur(5px);
}

@keyframes rot {
	to { transform: rotate(2turn);}
}

@keyframes light {
	0% { opacity: 1; } 
	2% { opacity: 0; }
	3% { opacity: 0.6; }
	4% { opacity: 0.2; }
	6% { opacity: 0.9; } 
	100% { opacity: 1; }
}

@keyframes rain {
	to { top: 200vh; }
}
</style>

<div id="papa">
	<div id='tp'><div id='rain'></div>
	</div>
	<div>
		<img id="mdiv" src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png" alt="" />
		<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/2a/fd/7f/36208a1240aa7e16bede45b9a765cb96/audio.mp3" autoplay loop ></audio>
	</div>
</div>

<script>
mdiv.onclick = () => aud.paused ? aud.play(): aud.pause();
mState = () => {
	papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};

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

let raindrop = document.querySelector('#rain');
for (let i = 0; i< 500; i++) {
	let newRaindrop = raindrop.cloneNode(true);
	newRaindrop.style.left += Math.floor(Math.random() * 100) + 'vw';
	newRaindrop.style.top = '-' + (Math.floor(Math.random() * 300) + 'vh');
	newRaindrop.style.animationDuration = getRandom(2, 6) + 's';
	papa.appendChild(newRaindrop);
}
function getRandom(min, max) {
	const floatRandom = Math.random();
	const random = Math.round((max - min) * floatRandom);
	const randomWithinRange = random + min;
	return randomWithinRange;
}
</script>

因为要控制多个 CSS动画，因此，可以将CSS动画交给 --state 变量统一管理，实现函数是 mState()，mState() 可以扩展，比如控制视频，你就加一个控制视频的语句。