动画与新标志解锁!!!!-js教程-PHP中文网

首页

web前端

js教程

动画与新标志解锁!!!!

Jan 17, 2025 pm 02:30 PM

Animation with New Logo Unlocked!!!!

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Interactive Channel Logo&lt;/title&gt;
    &lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
    &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
    &lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&amp;display=swap" rel="stylesheet"&gt;
    &lt;style&gt;
        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;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;div class="logo-box"&gt;
            &lt;div class="logo"&gt;
                &lt;img src="/uploads/20250117/17370953786789f8d2679c0.jpg" alt="Channel Logo"&gt;
            &lt;/div&gt;
            &lt;div class="heading"&gt;New Logo&lt;/div&gt;
            &lt;div class="text"&gt;Unlocked!&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

登录后复制

以上是动画与新标志解锁!!!!的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn