suchen

Heim >Web-Frontend >js-Tutorial >Animation mit neuem Logo freigeschaltet!!!!

Animation mit neuem Logo freigeschaltet!!!!

Susan Sarandon
Susan SarandonOriginal
2025-01-17 14:30:15151Durchsuche

Animation with New Logo Unlocked!!!!

<code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Channel Logo</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            overflow: hidden;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .logo-box {
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #ff416c, #ff4b2b);
            border-radius: 50%;
            box-shadow: 0 0 30px #ff4b2b;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            transition: all 0.7s ease-in-out;
            position: relative;
        }

        .logo-box:hover {
            width: 400px;
            height: 250px;
            border-radius: 30px;
            background: linear-gradient(135deg, #1f1c2c, #928dab);
            box-shadow: 0 0 50px #928dab;
        }

        .logo {
            width: 200px;
            height: 200px;
            background: white;
            border-radius: 50%;
            transition: all 0.7s ease-in-out 0.7s;
            overflow: hidden;
            position: absolute;
        }

        .logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .logo-box:hover .logo {
            right: 30px;
            width: 100px;
            height: 100px;
            top: 15px;
            border-radius: 50%;
        }

        .heading {
            font-family: 'Montserrat', sans-serif;
            font-size: 2em;
            font-weight: bolder;
            color: #fff;
            position: absolute;
            left: 30px;
            top: 40px;
            opacity: 0;
            transition: opacity 0.7s ease-in-out 0.3s;
        }

        .logo-box:hover .heading {
            opacity: 1;
        }

        .text {
            font-family: 'Montserrat', sans-serif;
            font-size: 1em;
            color: #ccc;
            position: absolute;
            left: 30px;
            bottom: 40px;
            opacity: 0;
            transition: opacity 0.7s ease-in-out 0.5s;
        }

        .logo-box:hover .text {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo-box">
            <div class="logo">
                <img src="/uploads/20250117/17370953786789f8d2679c0.jpg" alt="Channel Logo">
            </div>
            <div class="heading">New Logo</div>
            <div class="text">Unlocked!</div>
        </div>
    </div>
</body>
</html></code>

Das obige ist der detaillierte Inhalt vonAnimation mit neuem Logo freigeschaltet!!!!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

animation
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Mit Tavily Search in KaibanJS das Potenzial von KI-Agenten freisetzenNächster Artikel：Mit Tavily Search in KaibanJS das Potenzial von KI-Agenten freisetzen

In Verbindung stehende Artikel

Mehr sehen