fix(Fishing.vue): 修复钓鱼逻辑并优化动画效果
修复钓鱼逻辑中的等待时间和提竿判断，移除不必要的点击计数逻辑。优化钓鱼成功后的动画效果，增加多条鱼时的特殊动画和提示信息。
This commit is contained in:
akun
+213
-206
@@ -1,5 +1,4 @@
|
|||||||
<template>
|
<template>
|
||||||
<<<<<<< HEAD
|
|
||||||
<div class="fishing-page">
|
<div class="fishing-page">
|
||||||
<div class="fishing-container">
|
<div class="fishing-container">
|
||||||
<div class="fishing-area">
|
<div class="fishing-area">
|
||||||
@@ -12,29 +11,38 @@
|
|||||||
>
|
>
|
||||||
<div class="fishing-scene" @click="handleFish"></div>
|
<div class="fishing-scene" @click="handleFish"></div>
|
||||||
<div class="ripple"></div>
|
<div class="ripple"></div>
|
||||||
=======
|
|
||||||
<div class="fishing-page">
|
|
||||||
<div class="fishing-container">
|
|
||||||
<div class="fishing-area">
|
|
||||||
<div class="fishing-animation" :class="{ 'fishing-active': isFishing }">
|
|
||||||
<div class="fishing-scene" @click="handleFish"></div>
|
|
||||||
<div class="ripple"></div>
|
|
||||||
</div>
|
|
||||||
<div class="result" v-if="resultMessage || nextPullTime">
|
|
||||||
<el-alert v-if="resultMessage" :title="resultMessage" :type="currentCatch.length>0 ? 'success' : 'info'"
|
|
||||||
:closable="false" show-icon />
|
|
||||||
<el-alert v-if="nextPullTime" :title="`下次可钓鱼时间：${nextPullTime}`" type="warning" :closable="false" show-icon />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="log-area">
|
|
||||||
<FishingLog :logs="fishingLogs" />
|
|
||||||
<div class="back-button">
|
|
||||||
<el-button @click="goHome" size="small" type="default" icon="ArrowLeft">返回</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
>>>>>>> 4a4857fa8239db297faeeaf348f16654927c8bb7
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="result" v-if="resultMessage || nextPullTime">
|
||||||
|
<el-alert
|
||||||
|
v-if="resultMessage"
|
||||||
|
:title="resultMessage"
|
||||||
|
:type="currentCatch.length > 0 ? 'success' : 'info'"
|
||||||
|
:closable="false"
|
||||||
|
show-icon
|
||||||
|
/>
|
||||||
|
<el-alert
|
||||||
|
v-if="nextPullTime"
|
||||||
|
:title="`下次可钓鱼时间：${nextPullTime}`"
|
||||||
|
type="warning"
|
||||||
|
:closable="false"
|
||||||
|
show-icon
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="log-area">
|
||||||
|
<FishingLog :logs="fishingLogs" />
|
||||||
|
<div class="back-button">
|
||||||
|
<el-button
|
||||||
|
@click="goHome"
|
||||||
|
size="small"
|
||||||
|
type="default"
|
||||||
|
icon="ArrowLeft"
|
||||||
|
>返回</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -50,29 +58,21 @@ const nextPullTime = ref("");
|
|||||||
const isFishing = ref(false);
|
const isFishing = ref(false);
|
||||||
const currentCatch = ref([]); // 改为数组
|
const currentCatch = ref([]); // 改为数组
|
||||||
const fishingLogs = ref([]);
|
const fishingLogs = ref([]);
|
||||||
const clickCount = ref(0);
|
|
||||||
const targetClicks = ref(0);
|
|
||||||
const isWaiting = ref(false);
|
const isWaiting = ref(false);
|
||||||
const isReeling = ref(false);
|
const isReeling = ref(false);
|
||||||
const fishEscapeTimer = ref(null);
|
const fishEscapeTimer = ref(null);
|
||||||
|
|
||||||
// 从localStorage加载缓存的钓鱼日志
|
// 从localStorage加载缓存的钓鱼日志
|
||||||
const loadCachedLogs = () => {
|
const loadCachedLogs = () => {
|
||||||
const cachedLogs = localStorage.getItem("fishingLogs");
|
const cachedLogs = localStorage.getItem("fishingLogs");
|
||||||
if (cachedLogs) {
|
if (cachedLogs) {
|
||||||
fishingLogs.value = JSON.parse(cachedLogs);
|
fishingLogs.value = JSON.parse(cachedLogs);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 保存钓鱼日志到localStorage
|
// 保存钓鱼日志到localStorage
|
||||||
const saveLogs = () => {
|
const saveLogs = () => {
|
||||||
localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value));
|
localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value));
|
||||||
};
|
|
||||||
|
|
||||||
<<<<<<< HEAD
|
|
||||||
// 生成随机点击阈值（1-5秒内的随机次数）
|
|
||||||
const generateRandomTarget = () => {
|
|
||||||
return Math.floor(Math.random() * 15) + 5; // 5-20次随机点击
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 生成随机等待时间（1-3秒）
|
// 生成随机等待时间（1-3秒）
|
||||||
@@ -91,13 +91,10 @@ const willReelFail = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 组件挂载时加载缓存的日志
|
// 组件挂载时加载缓存的日志
|
||||||
=======
|
|
||||||
>>>>>>> 4a4857fa8239db297faeeaf348f16654927c8bb7
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadCachedLogs();
|
loadCachedLogs();
|
||||||
});
|
});
|
||||||
|
|
||||||
<<<<<<< HEAD
|
|
||||||
// 组件卸载时清除定时器
|
// 组件卸载时清除定时器
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
if (fishEscapeTimer.value) {
|
if (fishEscapeTimer.value) {
|
||||||
@@ -106,56 +103,50 @@ onBeforeUnmount(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const handleFish = async () => {
|
const handleFish = async () => {
|
||||||
// 如果正在钓鱼中，不允许操作
|
// 下杆前校验：如果设置了下次钓鱼时间，则判断当前时间是否在等待中
|
||||||
if (isFishing.value) return;
|
if (nextPullTime.value) {
|
||||||
|
// 尝试将 nextPullTime 转换为 Date 对象
|
||||||
|
const nextTime = new Date(nextPullTime.value);
|
||||||
|
if (Date.now() < nextTime.getTime()) {
|
||||||
|
ElMessage.warning(
|
||||||
|
`还未到下杆时间，请在 ${nextTime.toLocaleTimeString()} 后尝试`
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 如果正在钓鱼且还处于等待上钩阶段，不允许操作
|
||||||
|
if (isFishing.value && !isWaiting.value) return;
|
||||||
|
|
||||||
// 第一阶段：开始钓鱼
|
// 第一阶段：开始钓鱼
|
||||||
if (!isWaiting.value) {
|
if (!isWaiting.value) {
|
||||||
isFishing.value = true;
|
isFishing.value = true;
|
||||||
resultMessage.value = "放下鱼竿，等待中...";
|
resultMessage.value = "放下鱼竿，等待不知好歹的🐟";
|
||||||
|
|
||||||
// 随机等待时间后判断是否有鱼上钩
|
// 随机等待时间后判断是否有鱼上钩
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (willFishEscape()) {
|
if (willFishEscape()) {
|
||||||
resultMessage.value = "鱼儿警觉地游走了...";
|
resultMessage.value = "鱼儿警觉地游走了... 🐟";
|
||||||
ElMessage.info("鱼儿游走了 🐟");
|
|
||||||
isFishing.value = false;
|
isFishing.value = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
isWaiting.value = true;
|
isWaiting.value = true;
|
||||||
clickCount.value = 0;
|
resultMessage.value = "鱼儿上钩啦！速速收杆！速速速速速速";
|
||||||
targetClicks.value = generateRandomTarget();
|
|
||||||
resultMessage.value = "发现鱼儿上钩了！快点击收杆！";
|
isReeling.value = true;
|
||||||
|
|
||||||
// 设置逃跑计时器
|
// 设置逃跑计时器
|
||||||
fishEscapeTimer.value = setTimeout(() => {
|
fishEscapeTimer.value = setTimeout(() => {
|
||||||
if (isWaiting.value) {
|
if (isWaiting.value && isFishing.value) {
|
||||||
isWaiting.value = false;
|
isWaiting.value = false;
|
||||||
isFishing.value = false;
|
isFishing.value = false;
|
||||||
resultMessage.value = "鱼儿挣脱逃走了！";
|
resultMessage.value = "鱼儿挣脱逃走了！";
|
||||||
ElMessage.warning("鱼儿逃走了 🎣");
|
|
||||||
}
|
}
|
||||||
}, 5000); // 5秒内必须完成提竿
|
}, 5000); // 5秒内必须完成提竿
|
||||||
}, generateWaitTime());
|
}, generateWaitTime());
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 增加点击计数并添加提竿动画效果
|
|
||||||
clickCount.value++;
|
|
||||||
isReeling.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
isReeling.value = false;
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
// 如果点击次数未达到目标，更新提示信息
|
|
||||||
if (clickCount.value < targetClicks.value) {
|
|
||||||
const remainingClicks = targetClicks.value - clickCount.value;
|
|
||||||
resultMessage.value = `继续点击！还需要${remainingClicks}次！`;
|
|
||||||
ElMessage.info(`还需点击${remainingClicks}次！`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清除逃跑计时器
|
// 清除逃跑计时器
|
||||||
if (fishEscapeTimer.value) {
|
if (fishEscapeTimer.value) {
|
||||||
clearTimeout(fishEscapeTimer.value);
|
clearTimeout(fishEscapeTimer.value);
|
||||||
@@ -164,131 +155,140 @@ const handleFish = async () => {
|
|||||||
|
|
||||||
// 第二阶段：达到目标点击次数，判断是否提竿成功
|
// 第二阶段：达到目标点击次数，判断是否提竿成功
|
||||||
isWaiting.value = false;
|
isWaiting.value = false;
|
||||||
|
isReeling.value = false;
|
||||||
|
|
||||||
if (willReelFail()) {
|
if (willReelFail()) {
|
||||||
isFishing.value = false;
|
isFishing.value = false;
|
||||||
resultMessage.value = "提竿时机不对，鱼儿溜走了！";
|
resultMessage.value = "提竿时机不对，鱼儿溜走了！";
|
||||||
ElMessage.warning("提竿失败 🎣");
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 调用钓鱼接口
|
// 调用钓鱼接口
|
||||||
currentCatch.value = null;
|
currentCatch.value = [];
|
||||||
resultMessage.value = "正在钓鱼中...";
|
resultMessage.value = "正在钓鱼中...";
|
||||||
=======
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
localStorage.removeItem("fishingLogs");
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleFish = async () => {
|
try {
|
||||||
if (isFishing.value) return;
|
const res = await fishingClick();
|
||||||
|
if (res.success && res.data) {
|
||||||
|
const items = res.data.items || [];
|
||||||
|
if (res.data.nextPullTime) {
|
||||||
|
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
|
||||||
|
}
|
||||||
|
|
||||||
isFishing.value = true;
|
if (items.length > 0) {
|
||||||
currentCatch.value = [];
|
currentCatch.value = items;
|
||||||
resultMessage.value = "正在钓鱼中...";
|
|
||||||
>>>>>>> 4a4857fa8239db297faeeaf348f16654927c8bb7
|
|
||||||
|
|
||||||
try {
|
// 构建展示信息
|
||||||
const res = await fishingClick();
|
const messageList = items.map(
|
||||||
if (res.success && res.data) {
|
(fish) =>
|
||||||
const items = res.data.items || [];
|
`「${fish.isRare ? "稀有的" : ""}${fish.fishName}」，重量 ${
|
||||||
if (res.data.nextPullTime) {
|
fish.weight
|
||||||
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
|
}`
|
||||||
}
|
);
|
||||||
|
resultMessage.value = `你钓到了：\n${messageList.join("\n")}`;
|
||||||
if (items.length > 0) {
|
// 根据钓到的鱼的数量显示不同的消息和动画效果
|
||||||
currentCatch.value = items;
|
if (items.length > 1) {
|
||||||
|
ElMessage({
|
||||||
// 构建展示信息
|
message: `太棒了！一次钓到${items.length}条鱼！🎣✨`,
|
||||||
const messageList = items.map(fish =>
|
type: "success",
|
||||||
`「${fish.isRare ? "稀有的" : ""}${fish.fishName}」，重量 ${fish.weight}`
|
duration: 5000,
|
||||||
);
|
showClose: true,
|
||||||
resultMessage.value = `你钓到了：\n${messageList.join("\n")}`;
|
customClass: "multi-catch-message",
|
||||||
ElMessage.success("钓鱼成功！🎣");
|
});
|
||||||
|
// 添加额外的动画类
|
||||||
// 添加所有钓到的鱼到日志
|
document
|
||||||
const newLogs = items.map(fish => ({
|
.querySelector(".fishing-animation")
|
||||||
time: new Date(),
|
.classList.add("multi-catch");
|
||||||
fishName: fish.fishName,
|
setTimeout(() => {
|
||||||
weight: fish.weight,
|
document
|
||||||
isRare: fish.isRare,
|
.querySelector(".fishing-animation")
|
||||||
}));
|
.classList.remove("multi-catch");
|
||||||
fishingLogs.value.unshift(...newLogs);
|
}, 3000);
|
||||||
saveLogs();
|
|
||||||
} else {
|
|
||||||
resultMessage.value = "什么也没钓到，下次好运 🍀";
|
|
||||||
ElMessage.warning("什么也没钓到，下次好运 🍀");
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
resultMessage.value = res.message || "钓鱼失败";
|
ElMessage.success("钓鱼成功！🎣");
|
||||||
if (res.data?.nextPullTime) {
|
|
||||||
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
|
|
||||||
}
|
|
||||||
ElMessage.error(res.message || "钓鱼失败 🎣");
|
|
||||||
}
|
}
|
||||||
} catch (err) {
|
|
||||||
resultMessage.value = "钓鱼出错，请稍后重试";
|
// 添加所有钓到的鱼到日志
|
||||||
ElMessage.error("钓鱼出错，请稍后重试 🌊");
|
const newLogs = items.map((fish) => ({
|
||||||
console.error(err);
|
time: new Date(),
|
||||||
} finally {
|
fishName: fish.fishName,
|
||||||
isFishing.value = false;
|
weight: fish.weight,
|
||||||
|
isRare: fish.isRare,
|
||||||
|
}));
|
||||||
|
fishingLogs.value.unshift(...newLogs);
|
||||||
|
saveLogs();
|
||||||
|
} else {
|
||||||
|
resultMessage.value = "什么也没钓到，下次好运 🍀";
|
||||||
|
ElMessage.warning("什么也没钓到，下次好运 🍀");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
resultMessage.value = res.message || "钓鱼失败";
|
||||||
|
if (res.data?.nextPullTime) {
|
||||||
|
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
|
||||||
|
}
|
||||||
|
ElMessage.error(res.message || "钓鱼失败 🎣");
|
||||||
}
|
}
|
||||||
|
} catch (err) {
|
||||||
|
resultMessage.value = "钓鱼出错，请稍后重试";
|
||||||
|
ElMessage.error("钓鱼出错，请稍后重试 🌊");
|
||||||
|
console.error(err);
|
||||||
|
} finally {
|
||||||
|
isFishing.value = false;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const goHome = () => {
|
const goHome = () => {
|
||||||
router.push("/");
|
router.push("/");
|
||||||
};
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.fishing-page {
|
.fishing-page {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fishing-container {
|
.fishing-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 400px;
|
grid-template-columns: 1fr 400px;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
min-height: calc(100vh - 40px);
|
min-height: calc(100vh - 40px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button {
|
.back-button {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button .el-button {
|
.back-button .el-button {
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
background: #409eff;
|
background: #409eff;
|
||||||
border: 1px solid #409eff;
|
border: 1px solid #409eff;
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button .el-button:hover {
|
.back-button .el-button:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
|
box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
|
||||||
background: #66b1ff;
|
background: #66b1ff;
|
||||||
border-color: #66b1ff;
|
border-color: #66b1ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fishing-area {
|
.fishing-area {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fishing-animation {
|
.fishing-animation {
|
||||||
<<<<<<< HEAD
|
|
||||||
height: 500px;
|
height: 500px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
@@ -296,7 +296,6 @@ const goHome = () => {
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fishing-scene {
|
.fishing-scene {
|
||||||
@@ -308,30 +307,11 @@ const goHome = () => {
|
|||||||
background: url("@/assets/fishing-scene.svg") no-repeat center;
|
background: url("@/assets/fishing-scene.svg") no-repeat center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
transition: transform 0.2s ease;
|
transition: transform 0.2s ease;
|
||||||
pointer-events: auto;
|
cursor: pointer;
|
||||||
=======
|
|
||||||
height: 500px;
|
|
||||||
position: relative;
|
|
||||||
margin: 20px 0;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fishing-scene {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: url("@/assets/fishing-scene.svg") no-repeat center;
|
|
||||||
background-size: cover;
|
|
||||||
>>>>>>> 4a4857fa8239db297faeeaf348f16654927c8bb7
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fishing-active .fishing-scene {
|
.fishing-active .fishing-scene {
|
||||||
animation: scene-active 3s ease-in-out infinite;
|
animation: scene-active 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reeling .fishing-scene {
|
.reeling .fishing-scene {
|
||||||
@@ -339,65 +319,92 @@ const goHome = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ripple {
|
.ripple {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
background: rgba(255, 255, 255, 0.7);
|
background: rgba(255, 255, 255, 0.7);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
left: 60%;
|
left: 60%;
|
||||||
top: 70%;
|
top: 70%;
|
||||||
transform: translate(-50%, -50%) scale(0);
|
transform: translate(-50%, -50%) scale(0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fishing-active .ripple {
|
.fishing-active .ripple {
|
||||||
animation: ripple 2s infinite;
|
animation: ripple 2s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
<<<<<<< HEAD
|
|
||||||
=======
|
|
||||||
.fishing-controls {
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
>>>>>>> 4a4857fa8239db297faeeaf348f16654927c8bb7
|
|
||||||
.result {
|
.result {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes ripple {
|
@keyframes ripple {
|
||||||
0% {
|
0% {
|
||||||
transform: translate(-50%, -50%) scale(0);
|
transform: translate(-50%, -50%) scale(0);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translate(-50%, -50%) scale(4);
|
transform: translate(-50%, -50%) scale(4);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scene-active {
|
@keyframes scene-active {
|
||||||
0%,
|
0%,
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1) rotate(0deg);
|
||||||
}
|
filter: brightness(1);
|
||||||
50% {
|
}
|
||||||
transform: scale(1.02);
|
25% {
|
||||||
}
|
transform: scale(1.05) rotate(-2deg);
|
||||||
|
filter: brightness(1.2);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(1.05) rotate(2deg);
|
||||||
|
filter: brightness(1.2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes reel {
|
@keyframes reel {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg) scale(1);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: rotate(-5deg);
|
transform: rotate(-8deg) scale(1.1);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg) scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 多条鱼时的特殊动画效果 */
|
||||||
|
@keyframes multi-catch {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: scale(1) rotate(0deg);
|
||||||
|
filter: brightness(1) contrast(1);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: scale(1.15) rotate(-5deg);
|
||||||
|
filter: brightness(1.3) contrast(1.1);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(1.15) rotate(5deg);
|
||||||
|
filter: brightness(1.3) contrast(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.multi-catch {
|
||||||
|
animation: multi-catch 1s ease-in-out 3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multi-catch-message {
|
||||||
|
font-size: 16px !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
background: linear-gradient(45deg, #4caf50, #2196f3) !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
.fishing-scene:active {
|
.fishing-scene:active {
|
||||||
transform: scale(0.98);
|
transform: scale(0.98);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user