胭脂惑【贴赠：马黑黑】（学习黑师《大西厢》转盘播放效果）
<style>#mydiv { margin: 0 0 0 calc(50% - 830px); width: 1500px; height: 800px; background: url('https://s1.ax1x.com/2023/08/05/pPA9Ok4.jpg') no-repeat center/cover; display: grid; box-shadow: 0 0 6px gray; z-index: 1; place-items: center; position: relative; --state: running; overflow: hidden;}
#mydiv::before, #mydiv::after { position: absolute; content: ''; left: calc(20% - 100px); top: calc(50% - 80px); width: 60px; height: 80px; background: repeating-radial-gradient(#F0F8FF, #32CD32 3px, #FFFACD 4px, #FFD700 6px) center / 8% 8%; border-radius:0% 100% 50%; opacity: .56;animation: fly 90s infinite var(--state); --deg1: 0; --deg2: 720deg; }
#mydiv::after { left: calc(50% + 300px); --deg1: 0; --deg2: -720deg; }
@keyframes fly { from { transform: rotate(var(--deg1)) translate(200px) scale(.8); } to { transform: rotate(var(--deg2)) translate(200px) scale(1.2); } }
.mypic {
position: absolute;
right:1%;
top: 1%;
mix-blend-mode: screen;
}
#vid {
position: absolute;
width: 120%;
height: 110%,
bottom:-100px;
left:-50px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .66;
}
</style>
<div id="mydiv"><img class="mypic" src="https://pic.imgdb.cn/item/6419b281a682492fccc921dd.gif" alt="" /><video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/22/70/620f1032eee1f.mp4" autoplay="" loop="" muted=""></video></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1909825251" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/3dbox6_fs_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
window.onload = () => {
HCPlayer({
papa: '#mydiv', /* 宿主元素 */
lrcAr: geci, /* 歌词 */
lrc_css: `
bottom: 80px;
color: lightblue; /* 歌词底色 */
--bg: linear-gradient(rgba(10,200,100,.25),rgba(10,200,100,.7));/* 歌词同步颜色 */
`,
player_css: `
bottom: 180px;
left:950px;
--ww: 120px; /* 按钮面板宽度 */
--hh: 80px; /* 按钮面板高度 */
`,
btn_css: `
--btnColor: #eee;/* 全屏按钮文本颜色 */
--btnBg: #333;/* 全屏按钮背景色 */
`,
ttAr: ['花飞飞','音画','黑黑','代码','酒香','芬芳'], /* 按钮面板文本 */
});
}
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
@马黑黑 练图以来做的第一个成功的大图，1500*800的。。。送给敬爱的黑黑老师。。。 说明：
做贴的时候只是试着建了个大的画布，不知道成不成，也不清楚最后什么样。。。
所以贴子内容有点不符合老师的气质~~
第一个成功的大图跟老师分享，
感谢一直以来的相助~~
{:4_170:} 以后做图练熟了再送老师更好的哈。。。{:4_173:} 好漂亮
花飞飞 发表于 2023-8-5 18:45
@马黑黑 练图以来做的第一个成功的大图，1500*800的。。。送给敬爱的黑黑老师。。。
作图，要跟 @东篱闲人 学，各种风格，东篱都是高手，换头换衣服不是问题 小文 发表于 2023-8-5 19:04
好漂亮
感谢临贴支持{:4_187:} 马黑黑 发表于 2023-8-5 19:07
作图，要跟 @东篱闲人 学，各种风格，东篱都是高手，换头换衣服不是问题
老师推荐的是高手，厉害！{:4_187:}
我挑的师傅是千羽{:4_170:} 花飞飞 发表于 2023-8-5 19:47
老师推荐的是高手，厉害！
我挑的师傅是千羽
千羽也不错，细腻 飞飞这个图图漂亮的，飞飞学习东西就是快{:4_199:} 我都不知道这个教程看过没有，反正没有记忆了{:4_198:} 角上黑黑的头像是为视频的logo吗
你会做图图以后就直接把黑黑头像融进图图背景更加自然的 欣赏飞飞的精彩制作{:4_199:} 只是我打开图图有点卡 马黑黑 发表于 2023-8-5 20:20
千羽也不错，细腻
{:4_173:}千羽美图都是经典 小辣椒 发表于 2023-8-5 21:10
飞飞这个图图漂亮的，飞飞学习东西就是快
谢谢小辣椒鼓励哦，开始练习大图中{:4_187:}…… 小辣椒 发表于 2023-8-5 21:11
我都不知道这个教程看过没有，反正没有记忆了
有的吧，《大西厢》昨天刚发的。。{:4_187:} 小辣椒 发表于 2023-8-5 21:14
角上黑黑的头像是为视频的logo吗
你会做图图以后就直接把黑黑头像融进图图背景更加自然的
这个是很早之前做的一个动图，今天拿来用上了。。
这融入图中是个好主意，以后熟练就可以用。。{:4_181:} 小辣椒 发表于 2023-8-5 21:17
欣赏飞飞的精彩制作
谢谢小辣椒鼓励哦。{:4_187:} 小辣椒 发表于 2023-8-5 21:18
只是我打开图图有点卡
稍微压缩了一下，找不到好的压缩方法。。
不占空间打开快还品质不错的，小辣椒有没有什么好的方法介绍呢？{:4_187:}