mirror of
https://github.com/wailsapp/wails.git
synced 2026-03-14 22:55:48 +01:00
docs: add Desktop/Server text morphing effect on home page
Adds CSS animation that morphs between "Desktop" and "Server" text to highlight the new server mode feature. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
9a43ab558f
commit
c058b0ff59
1 changed files with 39 additions and 0 deletions
|
|
@ -188,8 +188,47 @@ import { Tabs, TabItem, Card, CardGrid } from "@astrojs/starlight/components";
|
|||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Text morphing effect */
|
||||
.morph-container {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
min-width: 5em;
|
||||
}
|
||||
|
||||
.morph-text {
|
||||
display: inline-block;
|
||||
animation: morph-cycle 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.morph-text::after {
|
||||
content: 'Desktop';
|
||||
animation: morph-words 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes morph-words {
|
||||
0%, 40% { content: 'Desktop'; }
|
||||
45%, 50% { content: 'Server'; }
|
||||
55%, 95% { content: 'Desktop'; }
|
||||
100% { content: 'Desktop'; }
|
||||
}
|
||||
|
||||
@keyframes morph-cycle {
|
||||
0%, 40% { opacity: 1; }
|
||||
42% { opacity: 0; }
|
||||
45% { opacity: 0; }
|
||||
48% { opacity: 1; }
|
||||
50%, 52% { opacity: 1; }
|
||||
54% { opacity: 0; }
|
||||
57% { opacity: 0; }
|
||||
60%, 100% { opacity: 1; }
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div style="text-align: center; font-size: 1.5rem; margin: -1rem 0 2rem 0; color: var(--sl-color-gray-2);">
|
||||
Build <span class="morph-container"><span class="morph-text"></span></span> Apps with Go
|
||||
</div>
|
||||
|
||||
## Quickstart
|
||||
|
||||
```bash
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue