论坛 › 动画音画 › 【黑师代码】将心照亮（学习黑师《2024222屈原问渡》图片摇曳效果）

南无月 发表于 2024-2-22 16:59

【黑师代码】将心照亮（学习黑师《2024222屈原问渡》图片摇曳效果）

<style>
#papa {
        position: relative;
        margin: 130px 0 20px calc(50% - 931px);
        width: 1700px;
        height: 900px;
        background: url('https://pic.imgdb.cn/item/65d6e5409f345e8d0337c399.webp') 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%;
        transform: rotateX(180deg);
        z-index: 6;
        animation: swear 2s infinite alternate var(--state);
}
/* 头三个第一代img元素 */
#papa > img:nth-of-type(-n+3) { transform-origin: left top; opacity: .8; }
#papa > img:nth-of-type(1) { width: 300px; top: -15px; right: 0; }
#papa > img:nth-of-type(2) { width: 200px; top: -12px; right: 160px; }
#papa > img:nth-of-type(3) { width: 120px; top: -30px; right: 150px; }
/* 关键帧动画 */
@keyframes swear {
        from { transform: skew(-2deg); }
        to { transform: skew(2deg); }
}
video {
        position: absolute;
        width: 100%;
        height: 110%;
        top:-80px;
        object-fit: cover;
        opacity: .79;
        z-index: 2;
        mix-blend-mode: screen;
}
.pic {
        position: absolute;
        width: 1500px;
        left: 0;
        bottom: 0PX;
    z-index: 3;
        content: url('');
}
</style>

<!-- HTML代码 -->
<div id="papa">
<div class="pic"></div>
        <video src="https://img.tukuppt.com/video_show/15653652/00/31/65/5fb091975e282.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=5267376" autoplay loop></audio>
        <img src="https://pic.imgdb.cn/item/65d6e71e9f345e8d033d57be.png" alt="" />
        <img src="https://pic.imgdb.cn/item/65d6e9a09f345e8d0344896c.png" alt="" />
        <img src="h" 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 = 3}).forEach((image,key) =>{
        image = document.createElement('img'); //创建img标签
        image.src = 'https://pic.imgdb.cn/item/65d6ea7d9f345e8d03470612.png';
        //追加img样式 +=
        image.style.cssText += `
                left: ${key * 800 / all - 30}px;
                height: ${Math.random() * 230 + 130}px;
                animation-delay: -${Math.random() * 2}s;
        `;
        //img个体单击事件
        image.onclick = () => aud.paused ? aud.play() : aud.pause();
        papa.append(image); //父元素追加img元素
});
</script>
<script>
const sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        const myplayer = new mPlayer();
        myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=30053964');
        myplayer.setBtnCss(`
                background: url('https://pic.imgdb.cn/item/65d6e5a99f345e8d0338fc6e.png') no-repeat center/cover;
                width: 100px;
                height: 100px;
                bottom: 286px;
                right:650px;
                z-index: 99;
        `);
        myplayer.setLrcCss('top: 30px; left: 50%; transform: translate(-50%);z-index: 5;font-size: 28px;--bg: linear-gradient(rgba(250,250,250,.25),rgba(255,215,0,.65)); color: #fff;');
        myplayer.lrcAr= [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
};
</script>
<Br><Br><Br><Br><Br><Br><Br><Br><Br>

南无月 发表于 2024-2-22 17:02

@马黑黑 完成今天作业，老师来瞧瞧。。{:4_173:}

红影 发表于 2024-2-22 19:46

漂亮，下面有小花摇曳，右上还有叶子摇曳，这么灵动的制作。欣赏月儿好帖{:4_199:}

红影 发表于 2024-2-22 19:47

这图图制作也好美，字体设计很有特色，按钮也选得漂亮{:4_199:}

小辣椒 发表于 2024-2-22 21:12

月月速度的，这么快就出来了，小辣椒昨天晚上做前面的弄到很迟，白天没有时间玩的

小辣椒 发表于 2024-2-22 21:13

欣赏月月的精美设计，好制作{:4_199:}

马黑黑 发表于 2024-2-22 21:37

作品是越来越漂酿了

南无月 发表于 2024-2-23 17:13

红影 发表于 2024-2-22 19:46
漂亮，下面有小花摇曳，右上还有叶子摇曳，这么灵动的制作。欣赏月儿好帖

影子过奖了，这个就是很一般的跟贴{:4_187:}

南无月 发表于 2024-2-23 17:14

红影 发表于 2024-2-22 19:47
这图图制作也好美，字体设计很有特色，按钮也选得漂亮

有影子一直鼓励，真是开心呀。。{:4_185:}

南无月 发表于 2024-2-23 17:15

小辣椒 发表于 2024-2-22 21:12
月月速度的，这么快就出来了，小辣椒昨天晚上做前面的弄到很迟，白天没有时间玩的

这个效果湖心亭里出现过，所以快一点
做贴是玩的，就慢慢整就好。。
白天正常都没空{:4_190:}

南无月 发表于 2024-2-23 17:16

马黑黑 发表于 2024-2-22 21:37
作品是越来越漂酿了

听老师这话真是开心，有动力了{:4_173:}

马黑黑 发表于 2024-2-23 17:59

南无月 发表于 2024-2-23 17:16
听老师这话真是开心，有动力了

PS制作领域，不变成东篱誓不罢休{:4_170:}

@东篱闲人

南无月 发表于 2024-2-23 18:05

马黑黑 发表于 2024-2-23 17:59
PS制作领域，不变成东篱誓不罢休

@东篱闲人
罢休总有时候，现在应该还没到时候。。你说的境界太高。。。{:4_173:}

马黑黑 发表于 2024-2-23 18:07

南无月 发表于 2024-2-23 18:05
罢休总有时候，现在应该还没到时候。。你说的境界太高。。。

@东篱闲人 确实代表了很高的境界

南无月 发表于 2024-2-23 18:12

马黑黑 发表于 2024-2-23 18:07
@东篱闲人 确实代表了很高的境界

你拿来做标准的，你说了算{:4_173:}

红影 发表于 2024-2-23 19:52

南无月 发表于 2024-2-23 17:13
影子过奖了，这个就是很一般的跟贴

月儿的制图我一直都很羡慕，却只羡慕着，反正我也学不会，就纯羡慕吧{:4_189:}

红影 发表于 2024-2-23 19:54

南无月 发表于 2024-2-23 17:14
有影子一直鼓励，真是开心呀。。

看到月儿开心，我也跟着就开心了呢，认识相互感染的吧{:4_189:}

马黑黑 发表于 2024-2-23 20:09

南无月 发表于 2024-2-23 18:12
你拿来做标准的，你说了算

那必须的

南无月 发表于 2024-2-23 20:23

红影 发表于 2024-2-23 19:52
月儿的制图我一直都很羡慕，却只羡慕着，反正我也学不会，就纯羡慕吧

影子你太会表达了~~我羡慕影子的代码就是这样的~~。。{:4_199:}

南无月 发表于 2024-2-23 20:25

红影 发表于 2024-2-23 19:54
看到月儿开心，我也跟着就开心了呢，认识相互感染的吧

相互感染说得太好了。。{:4_187:}就是这样

查看完整版本: 【黑师代码】将心照亮（学习黑师《2024222屈原问渡》图片摇曳效果）