Home >Web Front-end >JS Tutorial >Animation with New Logo Unlocked!!!!

Animation with New Logo Unlocked!!!!

Susan SarandonOriginal: 2025-01-17 14:30:15151browse

<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>

The above is the detailed content of Animation with New Logo Unlocked!!!!. For more information, please follow other related articles on the PHP Chinese website!

animation

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Unleashing AI Agent Potential with Tavily Search in KaibanJSNext article：Unleashing AI Agent Potential with Tavily Search in KaibanJS

See more

Animation with New Logo Unlocked!!!!

Related articles