本帖最后由 马黑黑 于 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>
|