屈原问渡

马黑黑 · 发表于 2024-2-22 08:20

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-2-22 08:23 编辑

马黑黑 · 发表于 2024-2-22 21:51

南无月发表于 2024-2-22 16:54
跟贴时，原来用的是老师的右边花的图片，想移上方去挡猫
那朵花分上下的，需要上下翻转，
加了transform: ...

图片若已经有keyframes动画且已经在动画里用了 transform，则，其他的transform应加入到 keyframes 语句中

马黑黑 · 发表于 2024-2-22 08:21

本帖最后由马黑黑于 2024-2-22 08:22 编辑

帖子代码

<!-- CSS代码 -->
<style>
#papa {
	position: relative;
	margin: 0 0 0 calc(50% - 593px);
	width: 1024px;
	height: 640px;
	background: url('https://638183.freep.cn/638183/t24/1/16u_133530340958741250.jpeg') no-repeat center/cover;
	box-shadow: 3px 3px 20px #000;
	overflow: hidden; /* 防止内部元素外溢 */
	z-index: 1;
}
/* papa第一代子元素 img */
#papa > img {
	position: absolute;
	bottom: -12px;
	width: 300px;
	transform-origin: 50% 100%;
	cursor: pointer;
	animation: swear 2s infinite alternate var(--state);
}
/* 头三个第一代img元素 */
#papa > img:nth-of-type(-n+3) { transform-origin: 50% 90%; opacity: .8; }
#papa > img:nth-of-type(1) { width: 100px; bottom: -15px; right: 0; }
#papa > img:nth-of-type(2) { width: 180px; bottom: -30px; right: 50px; }
#papa > img:nth-of-type(3) { width: 160px; bottom: -30px; right: 120px; }
/* 关键帧动画 */
@keyframes swear {
	from { transform: skew(-2deg); }
	to { transform: skew(2deg); }
}
</style>

<!-- HTML代码 -->
<div id="papa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5267376" autoplay loop></audio>
	<img src="https://638183.freep.cn/638183/small/flower.gif" alt="" />
	<img src="https://638183.freep.cn/638183/small/flower.gif" alt="" />
	<img src="https://638183.freep.cn/638183/small/flower.gif" alt="" />
</div>

<!-- JS代码 -->
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' :'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
// 生成5丛小竹子
Array.from({length: all = 5}).forEach((image,key) =>{
	image = document.createElement('img'); //创建img标签
	image.src = 'https://638183.freep.cn/638183/small/vuzi.png';
	//追加img样式 +=
	image.style.cssText += `
		left: ${key * 1024 / all - 30}px;
		height: ${Math.random() * 200 + 200}px;
		animation-delay: -${Math.random() * 2}s;
	`;
	//img个体单击事件
	image.onclick = () => aud.paused ? aud.play() : aud.pause();
	papa.append(image); //父元素追加img元素
});
</script>