Guru Nanak dev ji Jayanti special animation using html css and javascript code-JS Tutorial-php.cn

Guru Nanak dev ji Jayanti special animation using html css and javascript code

Mary-Kate Olsen

Release： 2024-11-26 04:56:14

Original

238 people have browsed it

Guru Nanak dev ji Jayanti special animation using html css and javascript code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guru Nanak Jayanti Animation</title>
    <style>
        body {
            background: linear-gradient(135deg, #ffeb3b, #f57f17);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            margin: 0;
            font-family: 'Poppins', sans-serif;
            position: relative;
        }
        .container {
            text-align: center;
            color: #fff;
            animation: fadeIn 2s ease-in-out;
        }
        .container img {
            width: 200px;
            height: auto;
            margin-bottom: 10px;
            animation: glow 2s infinite alternate;
        }
        h1 {
            font-size: 2rem;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }
        .teachings {
            margin-top: 20px;
            display: flex;
        }
        .teaching-box {
            width: 160px;
            height: 100px;
            margin: 10px auto;
            padding: 15px;
            background: #333;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transform: translateY(50px);
            animation: slideUp 1.5s forwards;
        }
        .teaching-box:nth-child(1) {
            background: #ff7043; /* Orange */
            animation-delay: 0.5s;
        }
        .teaching-box:nth-child(2) {
            background: #42a5f5; /* Blue */
            animation-delay: 1s;
        }
        .teaching-box:nth-child(3) {
            background: #66bb6a; /* Green */
            animation-delay: 1.5s;
        }
        .teaching-heading {
            font-size: 1.4rem;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .teaching-subtext {
            font-size: 1rem;
        }
        .flowers {
            position: absolute;
            top: -50px;
            width: 100%;
            height: 100%;
            pointer-events: none;
            display: flex;
            flex-wrap: wrap;
        }
        .flower {
            position: absolute;
            font-size: 30px;
            animation: fall linear infinite;
        }
        @keyframes fall {
            from { transform: translateY(-100vh) rotate(0deg); }
            to { transform: translateY(100vh) rotate(360deg); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes glow {
            from { filter: drop-shadow(0 0 10px #fff); }
            to { filter: drop-shadow(0 0 30px #ffeb3b); }
        }
        @keyframes slideUp {
            to { transform: translateY(0); opacity: 1; }
        }/* Flower Button */
        .flower-button {
            position: fixed;
            right: 20px;
            bottom: 20px;
            font-size: 30px;
            background: none;
            border: none;
            cursor: pointer;
            animation: glow 1.5s infinite alternate;
        }
    </style>
</head>
<body>
    <div>

Copy after login

The above is the detailed content of Guru Nanak dev ji Jayanti special animation using html css and javascript code. For more information, please follow other related articles on the PHP Chinese website!