论坛 › 动画音画 › 【黑师代码】十二乐坊——流转（学习黑师《湖心亭》图片摇曳效果）

南无月 发表于 2024-2-18 09:18

【黑师代码】十二乐坊——流转（学习黑师《湖心亭》图片摇曳效果）

<style>
.papa { margin: 30px 0 30px calc(50% - 831px); width: 1500px; height: 800px;top:90px; background: url('https://pic.imgdb.cn/item/65d156479f345e8d035f28d3.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#btnplay { position: absolute; left: calc(50% - 50px); top: -50px; mix-blend-mode: normal;transition: filter 1s; cursor: pointer; animation: rot 10s linear infinite var(--state); }
#btnplay:hover { filter: hue-rotate(280deg); }
.ipic { position: absolute; top: 0; transform: skew(-6deg); transform-origin: top center; animation: skew 3s var(--delay) infinite alternate var(--state); }
.ipic:nth-of-type(1) { left: 880px; top: -130px; --delay: -2.5s; }
.ipic:nth-of-type(2) { left: 1100px;top: -30px; --delay: 0s; }
.ipic:nth-of-type(3) { left: 1300px; top: -160px; --delay: -1.5s; }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes skew { to { transform: skew(6deg); } }

#lrc { position: absolute; left: 50%; transform: translate(-50%); bottom:20px;font: bold 1.8em sans-serif; color: lightblue; text-shadow: 1px 1px 1px rgba(0,0,0,.45); user-select: none; --ani: lrcGo1; --duration: 1s; opacity: .45;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; background: repeating-linear-gradient(90deg, lightblue 3px, green 6px); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); border-bottom: 2px dashed lightblue; animation: var(--ani) var(--duration) linear forwards var(--state); }
#mplayer { position: absolute; left: 50%; transform: translate(-50%); bottom:60px;text-align: center; color: lightblue; }
#mplayer::before { position: absolute; content: attr(data-tt); left: 0; bottom: 26px; width: 100%; text-align-last: justify; }
#mprog { width: 280px; accent-color: darkgreen; outline: none; cursor: pointer; }
#mprog:focus { accent-color: gold; }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
#vid {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: .65;
    right:-200px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
}
</style>

<div class="papa">
        <audio src="https://music.163.com/song/media/outer/url?id=369444" autoplay loop></audio>
        <img class="ipic" src="https://pic.imgdb.cn/item/65cb85159f345e8d03dcb745.png" alt="" />
        <img class="ipic" src="https://pic.imgdb.cn/item/65cb85159f345e8d03dcb745.png" alt="" />
        <img class="ipic" src="https://pic.imgdb.cn/item/65cb861d9f345e8d03e14839.png" alt="" />
       
        <div id="mplayer" data-tt="0:00 0:00">
                <img id="btnplay" src="https://pic.imgdb.cn/item/65cc3a709f345e8d037b2f2c.png" title="播放/暂停" alt="" /><br>
                <input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度"    />
        </div>
        <div id="lrc" data-lrc="HuaChao LRC">HuaChao LRC</div>
        <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/32/39/62dbb485f32fd.mp4" autoplay loop muted></video>
       
       
</div>

<script>


var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/rangelrc2024.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
var geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
];

</script>
<br><br><br><br><br>

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

大气制作。点32个赞！

过去一直爱听女子十二乐坊的作品，这个曲子却是没有印象，想必是第一次听，喜欢。

感谢南无月带来的精彩！

南无月 发表于 2024-2-18 11:29

马黑黑 发表于 2024-2-18 11:07
大气制作。点32个赞！

过去一直爱听女子十二乐坊的作品，这个曲子却是没有印象，想必是第一次听，喜欢。 ...

{:4_173:}十二乐坊感谢老师~~你喜欢就再好不过了。。。

马黑黑 发表于 2024-2-18 12:33

南无月 发表于 2024-2-18 11:29
十二乐坊感谢老师~~你喜欢就再好不过了。。。

都不认识她们，经常换人的

朵拉 发表于 2024-2-18 15:25

黑师的得意门生，精彩作品 欣赏学习哈{:4_204:}{:4_204:}

红影 发表于 2024-2-18 17:49

这个制作好美，飘拂的垂叶，配合着播放器按钮的绿叶，那么协调。
歌词同步的字体颜色设置也很用心，还带下划线的呢。
虽然是纯音乐，但以歌词同步的方式介绍音乐，也是很不错的做法，让人对歌曲有更深的了解了{:4_199:}

红影 发表于 2024-2-18 17:49

好久不见月儿了，看到你很开心{:4_179:}

红影 发表于 2024-2-18 17:53

视频的渲染也很到位，和摇曳的垂叶那么和谐。
图片的制作也极赞，尤其字体设计，很见功底。月儿的制图很赞的{:4_199:}

南无月 发表于 2024-2-18 20:45

马黑黑 发表于 2024-2-18 12:33
都不认识她们，经常换人的

写代码和整音乐的不认识正常的。。{:4_173:}

南无月 发表于 2024-2-18 20:45

朵拉 发表于 2024-2-18 15:25
黑师的得意门生，精彩作品 欣赏学习哈

问好朵拉，感谢支持和鼓励哦。。{:4_204:}

醉美水芙蓉 发表于 2024-2-18 20:45

南无月 发表于 2024-2-18 20:46

红影 发表于 2024-2-18 17:49
这个制作好美，飘拂的垂叶，配合着播放器按钮的绿叶，那么协调。
歌词同步的字体颜色设置也很用心，还带下 ...

影子你懂得的，就是直接套用~~{:4_187:}

南无月 发表于 2024-2-18 20:47

红影 发表于 2024-2-18 17:49
好久不见月儿了，看到你很开心

好哒~~一起开心，抱个暖和哈。。{:4_179:}

南无月 发表于 2024-2-18 20:49

红影 发表于 2024-2-18 17:53
视频的渲染也很到位，和摇曳的垂叶那么和谐。
图片的制作也极赞，尤其字体设计，很见功底。月儿的制图很赞 ...

感谢影子继续鼓励。。。如果有点进步的话，都是你一路夸出来的{:4_199:}

南无月 发表于 2024-2-18 20:50

醉美水芙蓉 发表于 2024-2-18 20:45
月儿你终于出现了！欣赏月儿好作品！

水妞哎，看到你可真开心呀。{:4_185:}

小辣椒 发表于 2024-2-18 21:37

欣赏月儿的精彩制作，无论图图和黑黑的代码效果都非常的完美{:4_199:}

南无月 发表于 2024-2-18 21:45

小辣椒 发表于 2024-2-18 21:37
欣赏月儿的精彩制作，无论图图和黑黑的代码效果都非常的完美

小辣椒来啦，你的评价真让人开心{:4_187:}

小辣椒 发表于 2024-2-18 21:49

南无月 发表于 2024-2-18 21:45
小辣椒来啦，你的评价真让人开心

小辣椒真话的，欣赏月儿好制作

红影 发表于 2024-2-18 22:16

南无月 发表于 2024-2-18 20:46
影子你懂得的，就是直接套用~~

哪里啊，图图制作那么美，垂叶的设置等等，都是月儿自己的构思呢{:4_199:}

红影 发表于 2024-2-18 22:17

南无月 发表于 2024-2-18 20:47
好哒~~一起开心，抱个暖和哈。。

马上天气就暖和了，不过抱着心里很暖{:4_185:}

查看完整版本: 【黑师代码】十二乐坊——流转（学习黑师《湖心亭》图片摇曳效果）