WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1410
kuzma
Im Editor öffnen
Veröffentlichen Sie Ihren Code
15 September 2025
CSS-Gedankenblasenanimation
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text to Speech</title> </head> <body> <div> <input id="input" type="text" placeholder="Enter text here"> <button onclick="speak()">Speak</button> </div> </body> </html>
CSS
Copy
<style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } div { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } input[type="text"] { width: 92%; height: 40px; margin-bottom: 10px; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 5px; } button { font-weight: 600; width: 100%; height: 25px; font-size: 16px; background-color: #299893; color: #fff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #299893; } </style>
JS
Copy
<script> function speak(){ var text = document.getElementById("input").value.trim(); if (text !== "") { var utterance = new SpeechSynthesisUtterance(text); speechSynthesis.speak(utterance); } else { alert("Please enter some text"); } } </script>
