美的世界 TO 了了子
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Love Is My World
</title>
</head>
<body>
<style>
#papa{margin: 30px 0;left: calc(50% - 81px);transform: translateX(-50%);background: #3F5EFB url("https://pic1.imgdb.cn/item/6878d3c258cb8da5c8bec847.png") no-repeat center/100% 100%;width:clamp(600px,90vw,1400px);min-height:80vh;aspect-ratio:16/9; border-radius:20px;box-shadow:0px 0px 0px 2px #000000, 0px 0px 15px 15px #006000; overflow: hidden; position: relative; display: grid; place-items: center; user-drag: none; user-select: none; --state:running;z-index:1;}
#papa::before { position: absolute; content: url('https://s3.bmp.ovh/imgs/2026/01/04/e216c4f72b38b58d.png'); scale: .05; opacity: 0;transition: 1.8s;}
#papa:hover::before { opacity: 1; scale: .5;display:var(--display); }
#fullscreen { position: absolute; top: 30px;left: 30px; font: normal 1.5em 楷体; color: #fff; text-shadow: 0 0 3px #000; opacity: 1; cursor: pointer; user-select: none; z-index: 8; }
#fullscreen:hover { font-style: italic; }
</style>
<div id="papa">
<video id="sp" style="position: absolute;width:100%;height:100%;left:0;top:0;opacity:.5; object-fit: cover;z-index:-1; " src="https://video-qn.51miz.com/preview/video/00/00/64/97/V-649701-EB71C04C.mp4"></video>
<span id="fullscreen">全屏欣赏</span>
<audio id="myAudio" src="https://www.joy127.com/url/118013.mp3" autoplay loop></audio>
<div id="controlButton" style=" position: absolute; right:2%;bottom:2%;cursor: pointer;">
<img id="rotateImage" src="https://642303.freep.cn/642303/tu/c88747f820d857d2.png" alt="" title = '播放/暂停' style="z-index:8;width:120px; height:120px;"></div>
</div>
<script type="text/javascript">
const video = document.getElementById('sp');
const audio = document.getElementById('myAudio');
const rotateImage = document.getElementById('rotateImage');
const controlButton = document.getElementById('controlButton');
audio.currentTime = '0';
audio.autoplay = 'true';
video.muted = 'true';
video.currentTime = '1.5';
video.autoplay = 'true';
let isPlaying = true;
let rotationAngle = 0;
function togglePlay() {
if (isPlaying) {
video.pause();
audio.pause(); papa.style.setProperty('--display', 'none');
} else {
video.play();
audio.play(); papa.style.setProperty('--display', '');
}
isPlaying = !isPlaying;
}
controlButton.addEventListener('click', togglePlay);
function rotateImageFunction() {
if (isPlaying) {
rotationAngle += .5;
if (rotationAngle >= 360) {
rotationAngle = 0;
}
rotateImage.style.transform = `rotate(${rotationAngle}deg)`;
}
requestAnimationFrame(rotateImageFunction);
}
rotateImageFunction();
var vList = ['https://video-qn.51miz.com/preview/video/00/00/64/97/V-649701-EB71C04C.mp4', 'https://video-qn.51miz.com/preview/video/00/00/13/79/V-137992-59E8E7DE.mp4', 'https://video-qn.51miz.com/preview/video/00/00/16/61/V-166191-5D524C02.mp4','https://video-qn.51miz.com/vcg/video/preview/51miz42N1281527463.mp4','https://video-qn.51miz.com/preview/video/00/00/65/86/V-658610-3FC7FB1B.mp4'];
var vLen = vList.length;
var curr = 0;
function play() {
if (curr === vLen - 1) { // 如果是最后一个视频
video.addEventListener('loadedmetadata', () => {
video.currentTime = 1.5;
});
}
video.src = vList;
video.load();
video.play();
}
video.addEventListener('ended', function () {
curr = (curr + 1) % vLen; // 移动到下一个视频，循环播放
play();
});
play();
audio.addEventListener('play', function () {
video.play();
isPlaying = true;
});
audio.addEventListener('pause', function () {
video.pause();
isPlaying = false;
});
audio.addEventListener('ended', () => {
audio.currentTime = '0';
audio.play();
video.src = vList;
video.load();
video.play();
video.addEventListener('ended', function () {
curr = (curr + 1) % vLen;
play();
});
});
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
document.getElementsByTagName('audio').pause();
} else {
document.getElementsByTagName('audio').play();
}
});
let fs = true;
let fsTimer;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreen.style.opacity = '0';
}, 3000);
});
</script>
</body>
</html>
本帖最后由 杨帆 于 2026-1-4 19:11 编辑
今天是个好日子，凌霜傲雪款款来，花潮有您更精彩{:4_205:}{:4_171:}
热烈欢迎了了子加入花潮大家庭，祝愿老师在这里玩的开心{:4_199:}{:4_180:}
问好扬帆，谢谢吉言，同样的祝福送给你，幸福满满，美好满满！{:4_204:}{:4_191:} 欣赏！并送上祝福！ 欢迎了了子老师入驻花潮，您来了，花潮会更精彩！{:4_204:}{:4_190:} 欢迎了了子老师入驻花潮，祝老师在花潮玩得开心！{:4_187:}{:4_204:} 樵歌 发表于 2026-1-4 20:03
欢迎了了子老师入驻花潮，您来了，花潮会更精彩！
问好樵哥哥（小辣椒他们好像都是这么喊），谢谢欢迎，不用叫老师，直呼名字就行，小辣椒杨帆多次介绍花潮团队，非常团结有力的团队，向你们致敬！ 了了子 发表于 2026-1-4 20:28
问好樵哥哥（小辣椒他们好像都是这么喊），谢谢欢迎，不用叫老师，直呼名字就行，小辣椒杨帆多次介绍花潮 ...
欢迎了了子老师来到花潮论坛玩，论坛有你更精彩{:4_187:} 了了子朋友的到来一定会是花潮论坛更精彩。欢迎，欢迎！ 久闻大名，热烈欢迎了了子老师的到来{:4_187:} 杨帆有心了，欢迎帖子这么快就出来了。很赞{:4_199:} 红影 发表于 2026-1-4 22:15
杨帆有心了，欢迎帖子这么快就出来了。很赞
呵呵，最近我这儿一直有雪。谢谢影子鼓励{:4_204:} 本帖最后由 杨帆 于 2026-1-4 23:26 编辑
小文 发表于 2026-1-4 19:59
欣赏！并送上祝福！
问好小文，谢谢同祝了了子老师入驻花潮{:4_191:} 本帖最后由 杨帆 于 2026-1-4 23:26 编辑
樵歌 发表于 2026-1-4 20:03
欢迎了了子老师入驻花潮，您来了，花潮会更精彩！
问好樵歌，谢谢同祝了了子老师入驻花潮{:4_191:} 本帖最后由 杨帆 于 2026-1-4 23:25 编辑
梦江南 发表于 2026-1-4 20:28
欢迎了了子老师入驻花潮，祝老师在花潮玩得开心！
问好江南，谢谢同祝了了子老师入驻花潮{:4_204:} 小辣椒 发表于 2026-1-4 20:50
欢迎了了子老师来到花潮论坛玩，论坛有你更精彩
问好小辣椒，谢谢同祝了了子老师入驻花潮{:4_204:} 梦油 发表于 2026-1-4 20:57
了了子朋友的到来一定会是花潮论坛更精彩。欢迎，欢迎！
问好梦兄，谢谢同祝了了子老师入驻花潮{:4_190:} 红影 发表于 2026-1-4 22:15
久闻大名，热烈欢迎了了子老师的到来
问好影子，谢谢同祝了了子老师入驻花潮{:4_204:} 来欣赏杨帆的精品佳作！
制作大气！
页:
[1]
2