将个人网站迁移成红警风格

将个人网站迁移成红警风格

最近把个人网站重新做了下，还没有迁移完。

进度条加载

vue项目未渲染之前，防止页面不好看。

开始后

后面的探照灯，后面的转动的太阳以及侧边的线条，是用clipPath画的，然后增加一个动画 。

<template><div class="trapezoid" :style="styles"></div>
</template><script setup>
import { computed, defineProps } from 'vue';// 定义组件属性，允许父组件控制梯形的外观
const props = defineProps({// 控制两头粗度差异，值越大差异越明显（5-30之间比较合适）offset: {type: Number,default: 15,validator: (value) => {return value >= 0 && value <= 45; // 限制在合理范围内},},// 梯形的填充颜色color: {type: String,default: '#3498db',},// 梯形的高度height: {type: Number,default: 120,},// 梯形的宽度（相对于视口）widthRatio: {type: Number,default: 90, // 90vwvalidator: (value) => {return value > 0 && value <= 100;},},revers: {type: Boolean,default: false,},
});// 计算顶部偏移量（用于clip-path）
const topOffset = props.offset;const styles = computed(() => {const st = {clipPath: `polygon(0 0, 100% ${props.offset}%, 100% ${100 - props.offset}%, 0 100%)`,background: props.color,};if (props.revers) {st.clipPath = `polygon(0 0,${props.offset}% 100% ,${100 - props.offset}% 100% ,100% 0)`;}return st;
});
</script><style scoped>
.trapezoid {/* 使用vw单位确保长度很长 */width: v-bind('widthRatio + "vw"');height: v-bind('height + "px"');box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);transition: all 0.3s ease; /* 平滑过渡效果 */
}
</style>

给基洛夫增加了点击音效，就扔炸弹的那个。

前端模块

左边的图片是根据屏幕大小生成的，
如果需要拿走改下。
A 21st century ${desc} with a dark toned steel animation style
这一串可以改成你自己的，后面的w和h是宽高。

const link = `https://image.pollinations.ai/prompt/A 21st century ${desc} with a dark toned steel animation style?width=${w}&height=${h}`

点击弹窗

游戏模块

所有的按钮点击包括前面的都增加了红警2那个点击音效

其他模块

还没想好
遭遇战那个我是真的想做一个简单的红警游戏，最近在补THREE的知识。做了几个小游戏。