click33
6f4af4351f
在 doc.html 和 index.html 中引入 star-guide.js， 新增 sa-token-doc/a/star-guide/ 目录，包含引导组件页面与脚本文件。
99 lines
3.6 KiB
HTML
99 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>点击 Star 支持我们</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html, body {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
}
|
||
|
||
.container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
transform-origin: 100% 0;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.container img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.img-before {
|
||
z-index: 2;
|
||
}
|
||
|
||
.img-after {
|
||
z-index: 1;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<img class="img-before" src="https://sa--file.oss-cn-beijing.aliyuncs.com/sa-token/doc/a/star-guide/gitee-star-guide-1.png" alt="img 1">
|
||
<img class="img-after" src="https://sa--file.oss-cn-beijing.aliyuncs.com/sa-token/doc/a/star-guide/gitee-star-guide-2.png" alt="img 2">
|
||
<!-- <img class="img-before" src="https://sa--file.oss-cn-beijing.aliyuncs.com/sa-token/doc/a/star-guide/github-star-guide-1.png" alt="img 1">
|
||
<img class="img-after" src="https://sa--file.oss-cn-beijing.aliyuncs.com/sa-token/doc/a/star-guide/github-star-guide-2.png" alt="img 2"> -->
|
||
<!-- <img class="img-before" src="https://sa--file.oss-cn-beijing.aliyuncs.com/sa-token/doc/a/star-guide/atomgit-star-guide-1.png" alt="img 1">
|
||
<img class="img-after" src="https://sa--file.oss-cn-beijing.aliyuncs.com/sa-token/doc/a/star-guide/atomgit-star-guide-2.png" alt="img 2"> -->
|
||
</div>
|
||
<script>
|
||
const container = document.querySelector('.container');
|
||
const imgBefore = document.querySelector('.img-before');
|
||
|
||
function startCycle() {
|
||
|
||
// ============================================================
|
||
// 第3秒末 → 第0秒初：暴力瞬间复位，无任何过渡
|
||
// 原理：先在当前帧写入 transition:none，
|
||
// requestAnimationFrame 保证下一帧浏览器已提交该样式，
|
||
// 再在下一帧改变属性值，此时过渡已关闭，改值不会触发动画。
|
||
// ============================================================
|
||
container.style.transition = 'none';
|
||
imgBefore.style.transition = 'none';
|
||
|
||
requestAnimationFrame(() => {
|
||
// ← 此处已是新的一帧，transition:none 确保已生效
|
||
container.style.transform = 'scale(1)'; // 瞬间复位缩放
|
||
imgBefore.style.opacity = '1'; // 瞬间复位透明度
|
||
|
||
// 以下各阶段动画均有过渡效果
|
||
// 0.5s~1.5s：放大（1s 过渡）
|
||
setTimeout(() => {
|
||
container.style.transition = 'transform 1s ease-in-out';
|
||
container.style.transform = 'scale(2.5)';
|
||
}, 500);
|
||
|
||
// 1.5s~2.0s：仅淡出图片1，窗口保持放大不动
|
||
setTimeout(() => {
|
||
imgBefore.style.transition = 'opacity 0.5s ease-in-out';
|
||
imgBefore.style.opacity = '0';
|
||
}, 1500);
|
||
|
||
// 第3s：进入下一轮，再次暴力复位（scale 和 opacity 同时瞬间归位）
|
||
setTimeout(startCycle, 3000);
|
||
});
|
||
}
|
||
|
||
startCycle();
|
||
</script>
|
||
</body>
|
||
</html>
|