【黑师代码】让所有美好奔你而来（TO:愫怡）

花简静 · 发表于 2025-12-29 16:57

本帖最后由花简静于 2025-12-29 20:16 编辑

花简静 · 发表于 2025-12-29 16:59

@愫怡收到你的礼物是真的开心，动态音画做得太好了，创意和技术都令人惊叹。。
感谢你带来的温暖和相伴，有你真好。。
2026元旦快到啦，愿你所行之路皆繁花，所遇之人皆温暖，所做之事皆顺遂，岁岁年年，平安喜乐

千山快乐相伴，疯图开心。。

花简静 · 发表于 2025-12-29 16:59

本帖最后由花简静于 2025-12-29 20:18 编辑

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.min.css?v1';
.pa { --offsetX: 0px; margin:150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1800px); height: auto; aspect-ratio: 18/9.6;--bg: url('https://642303.freep.cn/642303/tu/20251229sy013.webp') no-repeat center/cover; }
.player { position: absolute; bottom: 38%;right:7%; cursor: pointer;width: 120px; height: 120px; mask: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover; -webkit-mask: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover; }
.vid {
transform: rotateY(0deg);
-webkit-mask: linear-gradient(to left,transparent,transparent,transparent,red,red,red);
width: 100%; /* 宽度填满框架 */
height: 100%; /* 高度填满框架 */
object-fit: cover; /* 保持视频比例，裁剪多余部分，不拉伸变形 */
position: absolute; /* 定位贴合框架，避免布局偏移 */
top: 0;
left: 0;
}
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2731325884'});
tz.add('video', '', 'vid', {
src: 'https://i.uik.cc/view.php/666c4ee0fce3422040c25913ab83642c.mp4',
DisablePictureInPicture: 'true'
}).playmp3();
tz.add('video', '', 'qk-vid', { src: 'https://bpic.588ku.com/video_listen/588ku_video/22/11/05/16/14/43/video63661b737c854.mp4',
style: 'mix-blend-mode:screen;opacity: .69;top:-10%;height:110%;' });
tz.add('img', '', 'player rotate-ani', { src: 'https://642303.freep.cn/642303/tu/c88747f820d857d2.png' }).playmp3();
tz.fs().style('bottom: 20px');
</script>

复制代码

花简静 · 发表于 2025-12-29 17:00

这个是背景图。。

花简静 · 发表于 2025-12-29 17:01

动图盖字了，就遮了右边，只留了左边。。

花简静 · 发表于 2025-12-29 17:08

这个动画传到了树洞网盘，播放不怎么流畅的感觉

云端漫步 · 发表于 2025-12-29 19:04

静静这幅动态与静图结合，
文字音视三结合入画的情境，
版式大气流畅，背景质感不乏柔美，整体色调和谐，
意境唯美，光影不错，图释文意充分完美。

云端漫步 · 发表于 2025-12-29 19:05

愫怡收礼开心快乐！

云端漫步 · 发表于 2025-12-29 19:09

本帖最后由云端漫步于 2025-12-29 19:19 编辑

静静背景图是半身，视频咋只半个脸呐，下面代码改了试下看。

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.min.css?v1';
.pa { --offsetX: 0px; margin:150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1800px); height: auto; aspect-ratio: 18/9.6;--bg: url('https://642303.freep.cn/642303/tu/20251229sy013.webp') no-repeat center/cover; }
.player { position: absolute; bottom: 38%;right:7%; cursor: pointer;width: 120px; height: 120px; mask: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover; -webkit-mask: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover; }
.vid {
transform: rotateY(0deg);
-webkit-mask: linear-gradient(to left,transparent,transparent,transparent,red,red,red);
width: 100%; /* 宽度填满框架 */
height: 100%; /* 高度填满框架 */
object-fit: cover; /* 保持视频比例，裁剪多余部分，不拉伸变形 */
position: absolute; /* 定位贴合框架，避免布局偏移 */
top: 0;
left: 0;
}
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2731325884'});
tz.add('video', '', 'vid', {
src: 'https://i.uik.cc/view.php/666c4ee0fce3422040c25913ab83642c.mp4',
DisablePictureInPicture: 'true'
}).playmp3();
tz.add('video', '', 'qk-vid', { src: 'https://bpic.588ku.com/video_listen/588ku_video/22/11/05/16/14/43/video63661b737c854.mp4',
style: 'mix-blend-mode:screen;opacity: .69;top:-10%;height:110%;' });
tz.add('img', '', 'player rotate-ani', { src: 'https://642303.freep.cn/642303/tu/c88747f820d857d2.png' }).playmp3();
tz.fs().style('bottom: 20px');
</script>