80 lines
3.1 KiB
JavaScript
80 lines
3.1 KiB
JavaScript
import { defineConfig, presetUno,presetWind , presetAttributify, presetIcons } from 'unocss'
|
|
const parseStyle = (style) => {
|
|
const [key, value] = style.split(':');
|
|
return { [key.trim()]: value.trim() };
|
|
};
|
|
export default defineConfig({
|
|
presets: [
|
|
presetWind(), // 使用默认的 UnoCSS 预设
|
|
presetIcons()
|
|
],
|
|
theme: {
|
|
colors: {
|
|
primary: '#2B69A1', // 自定义主色
|
|
secondary: '#9333EA', // 自定义副色
|
|
accent: '#F59E0B', // 自定义强调色
|
|
// 你可以继续添加更多颜色
|
|
}
|
|
},
|
|
rules: [
|
|
// 处理 focus 伪类
|
|
[/^focus:(.*)$/, ([, style]) => ({ ':focus': { ...parseStyle(style) } })],
|
|
// 处理 placeholder 伪元素
|
|
[/^placeholder:(.*)$/, ([, style]) => ({ '::placeholder': { ...parseStyle(style) } })],
|
|
// 自定义动画
|
|
['animate-bounce-in', { 'animation': 'bounce-in 0.9s cubic-bezier(0.23,1,0.32,1) both' }],
|
|
['animate-icon-in', { 'animation': 'icon-in 1s cubic-bezier(0.23,1,0.32,1) both' }],
|
|
['animate-bg-move', { 'animation': 'bg-move 8s linear infinite alternate', 'background-size': '200% 200%' }],
|
|
['animate-blob', { 'animation': 'blob 7s ease-in-out infinite alternate' }],
|
|
['animate-blob2', { 'animation': 'blob2 9s ease-in-out infinite alternate' }],
|
|
['animate-bubble-pop', { 'animation': 'bubble-pop 0.5s cubic-bezier(0.23,1,0.32,1) both' }],
|
|
// 动画延迟
|
|
['animate-delay-0', { 'animation-delay': '0s' }],
|
|
['animate-delay-200', { 'animation-delay': '0.2s' }],
|
|
['animate-delay-400', { 'animation-delay': '0.4s' }],
|
|
['animate-delay-600', { 'animation-delay': '0.6s' }],
|
|
],
|
|
// 自定义keyframes
|
|
safelist: [
|
|
'animate-bounce-in', 'animate-icon-in', 'animate-bg-move', 'animate-blob', 'animate-blob2', 'animate-bubble-pop',
|
|
'animate-delay-0', 'animate-delay-200', 'animate-delay-400', 'animate-delay-600',
|
|
],
|
|
preflights: [
|
|
{
|
|
getCSS: () => `
|
|
@keyframes bounce-in {
|
|
0% { opacity: 0; transform: scale(0.7) translateY(-40px); }
|
|
60% { opacity: 1; transform: scale(1.1) translateY(10px); }
|
|
100% { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
@keyframes icon-in {
|
|
0% { opacity: 0; transform: scale(0.2) rotate(-30deg); }
|
|
80% { opacity: 1; transform: scale(1.2) rotate(10deg); }
|
|
100% { opacity: 1; transform: scale(1) rotate(0); }
|
|
}
|
|
@keyframes bg-move {
|
|
0% { background-position: 0% 50%; }
|
|
100% { background-position: 100% 50%; }
|
|
}
|
|
@keyframes blob {
|
|
0%,100% { transform: scale(1) translate(0,0); }
|
|
33% { transform: scale(1.1,0.9) translate(20px,10px); }
|
|
66% { transform: scale(0.9,1.1) translate(-10px,-20px); }
|
|
}
|
|
@keyframes blob2 {
|
|
0%,100% { transform: scale(1) translate(0,0); }
|
|
50% { transform: scale(1.2) translate(10px,20px); }
|
|
}
|
|
@keyframes bubble-pop {
|
|
0% { opacity: 0; transform: scale(0.5) translateY(10px); }
|
|
60% { opacity: 1; transform: scale(1.1) translateY(-4px); }
|
|
100% { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
`
|
|
}
|
|
],
|
|
shortcuts: {
|
|
'flex-center': 'flex justify-center items-center',
|
|
},
|
|
})
|