学习黑黑老师（三人行）代码，这是什么
本帖最后由 梦江南 于 2026-7-27 18:01 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://pan.suyanw.cn/view.php/6e67b80f9419fb8f68ae36891de119dd.jpg') no-repeat center/cover; color: lightblue; }
.player { width: 480px; bottom: 10px;top: 475px; right: 630px; }
.btnFs { top: 25px; right: 20px; }
#player2 { bottom: 8%; width: 12vw; height: 8vw; cursor: pointer; transform: rotateX(45deg);position: absolute; }
@keyframes movePlayer {
from {
/* 动画开始时的状态，即元素原来的位置 */
bottom: 8%;
/* 如果需要向左移动，可以添加 transform: translateX(0); */
}
to {
/* 动画结束时的状态，即你想要它去的位置 */
bottom: 50%; /* 向上移动到距离底部50%的位置 */
transform: translateX(-100px) rotateX(45deg); /* 向左平移100px，并保留原有的旋转效果 */
}
}
/* 2. 将动画应用到 #player2 元素上 */
#player2 {
bottom: 8%;
width: 12vw;
height: 8vw;
cursor: pointer;
/* 保留原有的 rotateX(45deg) 旋转，并将其整合到 animation 属性中 */
position: absolute;
/* 添加动画属性 */
/* 动画名称 持续时间速度曲线延迟时间执行次数是否反向结束状态 */
animation: movePlayer 2s ease-out 0s 1 normal forwards;
}
.ball {width: 50px; height: 50px;background: lightblue; border-radius:55%; offset-path: ellipse(50% 33.3%); offset-distance: 0%; animation: circle 6s linear infinite var(--state); }
.ball:nth-of-type(2) { background: tan; animation-delay: -2s; }
.ball:nth-of-type(3) { background: teal; animation-delay: -4s; }
@keyframes circle { to { offset-distance: 100%; } }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/14/5e1bbb3034ad7.mp4" autoplay loop muted></video>
<div id="player2">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=3389281646', '这是什么']],
btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', tzRun());
});
function tzRun() {
var aud = new AudPlayer(options);
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script> 动感十足，怎一个美字了得！ 带给人很奇妙的感觉，这个帖子好看。
欣赏江南好帖{:4_199:} 新颖别致，效果漂亮，谢谢江南精彩分享{:4_204:} 梦江南晚上好！
欣赏佳作，这是什么？哈哈~~小鸟在看地上转得三个东东是否能吃吧？祝制作愉快{:4_204:}{:4_190:}
梦油 发表于 2026-7-27 19:56
动感十足，怎一个美字了得！
问好梦油，谢谢欣赏支持。{:4_204:} 红影 发表于 2026-7-27 20:25
带给人很奇妙的感觉，这个帖子好看。
欣赏江南好帖
问好影子，谢谢啦欣赏支持。{:4_204:} 杨帆 发表于 2026-7-27 20:31
新颖别致，效果漂亮，谢谢江南精彩分享
问好杨帆，谢谢欣赏支持。{:4_204:} 霜染枫丹 发表于 2026-7-27 22:39
梦江南晚上好！
欣赏佳作，这是什么？哈哈~~小鸟在看地上转得三个东东是否能吃吧？祝制作愉快{:4 ...
问好版主，谢谢欣赏支持。{:4_204:} 梦江南 发表于 2026-7-28 14:03
问好梦油，谢谢欣赏支持。
你的作品很吸引人。 梦油 发表于 2026-7-28 17:14
你的作品很吸引人。
梦油过奖了。 梦江南 发表于 2026-7-28 17:37
梦油过奖了。
起码是吸引我了。
页:
[1]