《盘山公路》- 学习马老师帖代码
本帖最后由 杨帆 于 2025-8-19 09:23 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>盘山公路</title>
</head>
<body>
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { margin: 30px auto; left: calc(50% - 81px); transform: translateX(-50%);
width: clamp(600px, 80vw, 1280px); height: auto; aspect-ratio: 16/9; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; user-select: none; position: relative; --bg: url('https://pic1.imgdb.cn/item/68a27fb558cb8da5c82bb622.jpg') no-repeat center/cover; --bg1: url('https://pic1.imgdb.cn/item/68a27fda58cb8da5c82bb641.jpg') no-repeat center/cover; --ma-size: 10%; --per: -0.5%;perspective: 1200px; }
#pa::before { position: absolute; content: ''; inset: 0; background: var(--bg1); mask: radial-gradient(red var(--per), transparent calc(var(--per) + 0.5%) 0); --webkit-mask: radial-gradient(red var(--per), transparent calc(var(--per) + 0.5%) 0); }
#ma {position: absolute; right: 20px; top: 20px; background: conic-gradient(yellow 25%, Lime 0 50%) center/8% 8%; mask: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; -webkit-mask: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover;transform-style: preserve-3d; transform: rotateX(45deg) rotateY(-15deg) rotateZ(0); animation: rot3d 6s linear infinite var(--state);}
#ma::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; border-radius: 50%; background: Orange; transform: translate(-50%, -50%); z-index: 5; box-shadow: 0 0 8px Gold; }
#ma:hover { filter: hue-rotate(120deg); transform: scale(1.01); transition: transform 1s;--state: paused; }
#btnFs { left: 20px; bottom: 20px; }
@keyframes rot3d { to { transform: rotateX(45deg) rotateY(-15deg) rotateZ(360deg); } }
</style>
<div id="pa">
<audio id="aud" src="https://upfile.mp3.wf/view.php/90536d0ed79b4aa3a7d6c9a483ec40ca.mp3" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/17/59/video63662a47cce4f.mp4" autoplay loop muted></video>
<div id="ma" class="brightness"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
var per = 0, step = 0.5, picIdx = 0, raf;
var pics = [
'https://pic1.imgdb.cn/item/68a27fb558cb8da5c82bb622.jpg',
'https://pic1.imgdb.cn/item/68a27fda58cb8da5c82bb641.jpg',
'https://pic1.imgdb.cn/item/68a27ff858cb8da5c82bb661.jpg',
'https://pic1.imgdb.cn/item/68a2800f58cb8da5c82bb66f.jpg',
'https://pic1.imgdb.cn/item/68a2802458cb8da5c82bb680.jpg',
'https://pic1.imgdb.cn/item/68a2803d58cb8da5c82bb69d.jpg',
'https://pic1.imgdb.cn/item/68a2805358cb8da5c82bb6a9.jpg',
'https://pic1.imgdb.cn/item/685fa8d858cb8da5c87a6ccd.jpg',
'https://pic1.imgdb.cn/item/68a2808758cb8da5c82bb6cd.jpg',
'https://pic1.imgdb.cn/item/68a2809b58cb8da5c82bb6de.jpg'
];
let intervalId;
let isPaused = false;
let imagesLoaded = 0;
function preloadImages() {
pics.forEach(src => {
const img = new Image();
img.src = src;
img.onload = () => {
imagesLoaded++;
if (imagesLoaded === pics.length) {
startInterval();
}
};
img.onerror = () => {
console.error(`图片加载失败: ${src}`);
imagesLoaded++;
if (imagesLoaded === pics.length) {
startInterval();
}
};
});
}
function startInterval() {
intervalId = setInterval(update, 4500);
}
preloadImages();
ma.addEventListener('click', function() {
isPaused = !isPaused;
if (isPaused) {
clearInterval(intervalId);
cancelAnimationFrame(raf);
} else {
startInterval();
if (per >= -0.5 && per <= 100) {
animate();
}
}
});
function update() {
if (document.visibilityState === 'hidden') return;
const nextIdx = (picIdx + 1) % pics.length;
pa.style.setProperty('--bg', `url(${pics}) no-repeat center/cover`);
pa.style.setProperty('--bg1', `url(${pics}) no-repeat center/cover`);
picIdx = nextIdx;
per = -0.5;
step = 0.5;
animate();
}
function animate() {
per += step;
if (per < -0.5) per = -0.5;
if (per > 100) per = 100;
pa.style.setProperty('--per', per + '%');
if ((step > 0 && per < 100) || (step < 0 && per > -0.5)) {
raf = requestAnimationFrame(animate);
} else {
cancelAnimationFrame(raf);
step = -step;
}
}
ma.onmousemove = () => {
ma.title = document ? '播放/暂停' : '';
ma.style.cursor = document ? 'pointer' : 'default';
}
</script>
</body>
</html>
漂亮的圆形图片轮播。欣赏杨帆好帖{:4_187:} 当中好像有两张连续转换的？弄得来不及看{:4_173:} 本帖最后由 杨帆 于 2025-8-20 18:42 编辑 <br /><br />红影 发表于 2025-8-18 21:51
当中好像有两张连续转换的？弄得来不及看
谢谢影子鼓励~
是吗，我这图片轮播情况正常呀
杨帆 发表于 2025-8-18 22:08
谢谢影子鼓励~
是吗，我这图片轮播情况正常呀
现在好了，前面不知道为什么忽然出现不按牌理出牌的。
这些盘山路好奇特啊，开眼界了{:4_187:} 我自己升级了，但还是不管用。你的帖子只有中间一块。好帖看不到！ 梦江南 发表于 2025-8-19 07:52
我自己升级了，但还是不管用。你的帖子只有中间一块。好帖看不到！
不急，问一下装电脑的师傅{:4_171:} 红影 发表于 2025-8-18 23:28
现在好了，前面不知道为什么忽然出现不按牌理出牌的。
这些盘山路好奇特啊，开眼界了
是，按牌理出牌是基本要求，也许与网速有关{:4_171:} 杨帆 发表于 2025-8-19 09:15
不急，问一下装电脑的师傅
师傅微信远程重装系统，装了谷歌。看到了漂亮、宏伟壮观的盘山公路了。{:4_187:} 梦江南 发表于 2025-8-19 10:48
师傅微信远程重装系统，装了谷歌。看到了漂亮、宏伟壮观的盘山公路了。
好，这个师傅技术也挺过硬的{:4_199:} 杨帆 发表于 2025-8-19 09:16
是，按牌理出牌是基本要求，也许与网速有关
前面不知道咋回事，现在完全正常了{:4_173:} 杨帆 发表于 2025-8-19 13:08
好，这个师傅技术也挺过硬的
这个电脑修理师傅，是81890000介绍的。 梦江南 发表于 2025-8-19 14:14
这个电脑修理师傅，是81890000介绍的。
这是本地一个电脑服务维修电话吧 杨帆 发表于 2025-8-19 15:07
这是本地一个电脑服务维修电话吧
不是，是政府机构的查询帮助电话。有什么事情可以打这个电话，他会帮你介绍联系。像这个修电脑师傅都是在这个平台上登记过了的。 梦江南 发表于 2025-8-19 18:16
不是，是政府机构的查询帮助电话。有什么事情可以打这个电话，他会帮你介绍联系。像这个修电脑师傅都是在 ...
当地政府机构还有这样的查询帮助电话？太好了！{:4_199:}
杨帆 发表于 2025-8-19 18:47
当地政府机构还有这样的查询帮助电话？太好了！
是的，这个服务平台的服务态度很好，有求必应。 本帖最后由 杨帆 于 2025-8-20 17:15 编辑 <br /><br />梦江南 发表于 2025-8-20 09:24
是的，这个服务平台的服务态度很好，有求必应。
赞一个！真正的惠民之举{:4_199:} 杨帆 发表于 2025-8-20 10:17
赞一个！真正的惠民之举
是的，我表杨平台了。
页:
[1]