Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Pastel Wobble Demo</title>
- <style>
- body {
- background: linear-gradient(135deg, #ffe4ec 0%, #d0f4de 100%);
- min-height: 100vh;
- margin: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- font-family: 'Segoe UI', Arial, sans-serif;
- }
- .wobble-text {
- font-size: 2.5rem;
- font-family: Basiic;
- color: #a3c9f9;
- text-shadow: 2px 4px 12px #b8b5ff, 0 2px 8px #f7d6e0;
- background: linear-gradient(90deg, #f7d6e0, #b8b5ff, #a3c9f9, #d0f4de);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- animation: wobble 1.5s infinite ease-in-out;
- padding: 1.5rem 2.5rem;
- border-radius: 1.5rem;
- box-shadow: 0 8px 32px 0 rgba(168, 210, 255, 0.25);
- text-align: center;
- }
- @keyframes wobble {
- 0%, 100% { transform: rotate(-3deg) scale(1); }
- 20% { transform: rotate(3deg) scale(1.05); }
- 40% { transform: rotate(-2deg) scale(1.02); }
- 60% { transform: rotate(2deg) scale(1.04); }
- 80% { transform: rotate(-1deg) scale(1.01); }
- }
- @media (max-width: 600px) {
- .wobble-text {
- font-size: 1.3rem;
- padding: 1rem 1.2rem;
- }
- }
- </style>
- </head>
- <body>
- <div class="wobble-text">
- Wobble Text Effect
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
