我的标志呀

妖为邻

已于 2024-07-30 12:58:16 修改

阅读量116

点赞数 2

文章标签： css3 css javascript

于 2024-06-29 12:36:42 首次发布

本文链接：https://blog.csdn.net/lulei5153/article/details/140062356

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>logo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* logo */
        .logo {
            div {
                /* 放大镜效果 */
                transform: scale(1.5);
                position: fixed;
                z-index: 99999;
                top: 100px;
                left: 300px;
                background-color: #f30303;
                box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
                border-radius: 50%;
            }

            img {
                float: right;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                transition: transform 0.3s ease;

                &:hover {
                    transform: scale(1.2);
                }
            }

            h2 {
                background: hsl(0, 0%, 1%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
                letter-spacing: -3px;
                line-height: 30px;
                border-radius: 50%;
                font-size: 30px;
                width: 170px;
            }

            .my_name1 {
                text-shadow: 1px 1px 1px #ffffffaf;
                ;
                clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
                transform: translate(0%, 45%);
            }

            .my_name2 {
                text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
                clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
                transform: translate(0%, -45%);
            }
        }

        /* logo 结束*/
    </style>
</head>

<body>
    <!-- logo -->
    <div class="logo">
        <div>
            <a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" class=""
                target="_blank">
                <img src="file:///D:/img/icon.ico" alt="与妖为邻">
            </a>
            <h2 class="my_name1">与妖为邻</h2>
            <h2 class="my_name2">与妖为邻</h2>
        </div>
    </div>
    <!-- logo 结束 -->
</body>

</html>

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>logo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        /* logo */
        .logo {
            div {
                /* 放大镜效果 */
                transform: scale(2.5);
                position: fixed;
                z-index: 99999;
                top: 100px;
                left: 300px;
                background-color: #f30303;
                box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
                border-radius: 50%;
                height: 45px;
            }
 
            img {
                float: right;
                width: 60px;
                height: 30px;
                border-radius: 50%;
                transition: transform 0.3s ease;
                margin-top: 7px;
                &:hover {
                    transform: scale(1.2);
                }
            }
 
            h2 {
                background: hsl(0, 0%, 1%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
                letter-spacing: -3px;
                line-height: 30px;
                border-radius: 50%;
                font-size: 30px;
                width: 170px;
            }
 
            .my_name1 {
                text-shadow: 1px 1px 1px #ffffffaf;
                ;
                clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
                transform: translate(0%, 25%);
            }
 
            .my_name2 {
                text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
                clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
                transform: translate(0%, -70%);
            }
        }
 
        /* logo 结束*/
    </style>
</head>
 
<body>
    <!-- logo -->
    <div class="logo">
        <div>
            <a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" class=""
                target="_blank">
                <img src="file:///D:/img/icon.ico" alt="与妖为邻">
            </a>
            <h2 class="my_name1">与妖为邻</h2>
            <h2 class="my_name2">与妖为邻</h2>
        </div>
    </div>
    <!-- logo 结束 -->
</body>
 
</html>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        figure.logo {
            width: 262px;
            height: 50px;
            /* 缩小 */
            transform: scale(2.8);
            margin-top: 180px;
            margin-left: 380px;
            border-radius: 50%;
            background: #f30303;
            box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
                inset -4px -4px 5px rgba(0, 0, 0, 0.6);
            z-index: 99;

            figcaption {
                background: hsl(0, 0%, 0%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: bold;
                box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
                letter-spacing: -3px;
                line-height: 45px;
                border-radius: 50%;
                font-size: 40px;
                width: 152px;
            }

            .my_name1 {
                text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);
                clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
                transform: translate(35%, 0%);
            }

            .my_name2 {
                text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
                clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
                transform: translate(35%, -93%);
            }

            img {
                width: 60px;
                height: 35px;
                border-radius: 50%;
                transition: transform 0.3s ease;
                position: absolute;

                &:hover {
                    transform: scale(1.3);
                    filter: drop-shadow(0 0 0.3em #ff0202);
                }
            }


            .kong {
                margin-top: 7px;
                margin-left: 200px;
            }

            .ying {
                top: 7px;
                margin-left: 2px;

            }
        }
    </style>
</head>

<body>
    <figure class="logo">

        <a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" target="_blank">
            <img class="kong" src="file:///D:/img/icon.ico" alt="与妖为邻">
        </a>
        <figcaption class="my_name1">与妖为邻</figcaption>
        <figcaption class="my_name2">与妖为邻</figcaption>

        <a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" class="home_page" title="首页"
            target="_blank">
            <img class="ying" src="file:///D:/img/ying.png" alt="与妖为邻">
        </a>

    </figure>

</body>
<script>

</script>

</html>