PHP Random Quote Generator with Animation
Build an animated random quote generator that fades in inspirational quotes fetched from a PHP backend.
PHPCSSAnimationQuotes
Overview
Create an elegant quote generator with smooth fade and slide animations. PHP serves random quotes from a JSON file.
quotes.json
json
[
{ "text": "The only way to do great work is to love what you do.", "author": "Steve Jobs" },
{ "text": "Code is like humor. When you have to explain it, it's bad.", "author": "Cory House" },
{ "text": "First, solve the problem. Then, write the code.", "author": "John Johnson" },
{ "text": "Simplicity is the soul of efficiency.", "author": "Austin Freeman" }
]api.php
php
<?php
header('Content-Type: application/json');
$quotes = json_decode(file_get_contents('quotes.json'), true);
echo json_encode($quotes[array_rand($quotes)]);
?>index.php
php
<?php $quotes = json_decode(file_get_contents('quotes.json'), true); $q = $quotes[array_rand($quotes)]; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random Quote Generator</title>
<style>
body { background: #0f0f1a; color: #fff; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: Georgia, serif; }
.card { max-width: 600px; padding: 3rem; background: linear-gradient(135deg, #1a1a3e, #2d2d5e); border-radius: 20px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.quote { font-size: 1.6rem; line-height: 1.8; font-style: italic; opacity: 0; animation: fadeUp 0.8s forwards; }
.author { margin-top: 1.5rem; font-size: 1rem; color: #6c63ff; opacity: 0; animation: fadeUp 0.8s 0.3s forwards; }
button { margin-top: 2rem; padding: 12px 32px; background: #6c63ff; color: #fff; border: none; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: transform 0.2s; }
button:hover { transform: scale(1.05); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
</style>
</head>
<body>
<div class="card">
<div class="quote" id="quote">"<?= htmlspecialchars($q['text']) ?>"</div>
<div class="author" id="author">— <?= htmlspecialchars($q['author']) ?></div>
<button onclick="newQuote()">New Quote ✨</button>
</div>
<script>
async function newQuote() {
const res = await fetch('api.php');
const data = await res.json();
const q = document.getElementById('quote');
const a = document.getElementById('author');
q.style.animation = 'none'; a.style.animation = 'none';
void q.offsetHeight;
q.textContent = '"' + data.text + '"';
a.textContent = '— ' + data.author;
q.style.animation = 'fadeUp 0.8s forwards';
a.style.animation = 'fadeUp 0.8s 0.3s forwards';
}
</script>
</body>
</html>Technologies
- PHP — random quote selection, JSON API - CSS — keyframe animations, gradient card - JavaScript — async fetch, animation replay
Related Projects
PHPApr 27, 2026
Analog Clock with PHP & CSS
Build a beautiful real-time analog clock using PHP for time calculation and CSS for the rotating hands and dial.
PHPCSSAnimationClock
Read more → Source
PHPApr 27, 2026
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHPCSSAnimationSpinners
Read more → Source
PHPApr 27, 2026
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
PHPCSSColorsDesign Tool
Read more → Source
Comments (0)
No comments yet. Be the first to comment!