屈原问渡
本帖最后由 马黑黑 于 2024-2-22 08:23 编辑 <br /><br /><!-- CSS代码 --><style>
#papa {
position: relative;
margin: -60px 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>
南无月 发表于 2024-2-22 16:54
跟贴时，原来用的是老师的右边花的图片，想移上方去挡猫
那朵花分上下的，需要上下翻转，
加了transform: ...
图片若已经有keyframes动画且已经在动画里用了 transform，则，其他的transform应加入到 keyframes 语句中 本帖最后由 马黑黑 于 2024-2-22 08:22 编辑 <br /><br /><h2>帖子代码</h2>
<div class="mum"><pre>
<!-- 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>
</pre></div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/colorcode.js';
document.querySelector('body').appendChild(sF);
</script>
网站看到新贴，发现代码与之前不同。。论坛里来看看果然有超强解说。。。{:4_199:} 全新小白教程贴{:4_199:}黑帅辛苦啦！~~ 太美了，点赞。 五丛竹子三丛花朵，这么多摇曳的静态变动态呢。而且需要上传的竹子和花朵只有各自的一张图图。
这构思真棒{:4_199:} nth-of-type(-n+3) 这个定义很奇特，只是为了对头三个图图另外设定吧，可以让第一代子元素的设定变成了通用模式，5丛小竹子和3丛花朵全部可以遵守了。 height: ${Math.random() * 200 + 200}px; 让每一次刷新，竹子的高度都不同呢，有趣{:4_199:} 南无月 发表于 2024-2-22 09:30
网站看到新贴，发现代码与之前不同。。论坛里来看看果然有超强解说。。。
源码也有相同注释 南无月 发表于 2024-2-22 09:34
全新小白教程贴黑帅辛苦啦！~~
{:4_190:} 庶民 发表于 2024-2-22 09:46
太美了，点赞。
{:4_180:} 竹子播放器漂亮，这是来作业了呗，那里拉下太多了，象看天书的 红影 发表于 2024-2-22 10:11
五丛竹子三丛花朵，这么多摇曳的静态变动态呢。而且需要上传的竹子和花朵只有各自的一张图图。
这构思真棒 ...
这个效果又不是第一次用 红影 发表于 2024-2-22 10:19
nth-of-type(-n+3) 这个定义很奇特，只是为了对头三个图图另外设定吧，可以让第一代子元素的设定变成了通用 ...
nth-of-type(n) 本身表示此等类型的元素的第n个，那么，前面三个，可以用 -n+3 表示前面的三个。这三个这里指向花朵，它们先在HTML里写出来，JS追加的另外5个子元素用的是 append 方法，加在它们的后面。 绿叶清舟 发表于 2024-2-22 11:27
竹子播放器漂亮，这是来作业了呗，那里拉下太多了，象看天书的
这个简单的吧 马黑黑 发表于 2024-2-22 11:28
这个效果又不是第一次用
嗯嗯，湖心亭里就有，不过是不一样的运用{:4_187:} 马黑黑 发表于 2024-2-22 11:31
nth-of-type(n) 本身表示此等类型的元素的第n个，那么，前面三个，可以用 -n+3 表示前面的三个。这三个这 ...
这个好像头一次看到呢，学习了{:4_187:} 红影 发表于 2024-2-22 13:18
这个好像头一次看到呢，学习了
以前介绍过 n 的作用的 红影 发表于 2024-2-22 13:17
嗯嗯，湖心亭里就有，不过是不一样的运用
差不多差不多，一个意思 马黑黑 发表于 2024-2-22 11:32
这个简单的吧
一点也不简单了，做了一个想改个方向都不知道在哪里改了