首页 🍋Code

实际效果:

html

<html>

<head>

<title>MGSY</title>

<link rel="stylesheet" type="text/css" href="./style.css">

<meta charset="UTF-8">
<meta itemprop="name" content="猫狗鼠鱼导航" />

<meta itemprop="image" content="http://fp1.fghrsh.net/2020/11/15/b8a12657ce622ee2979ec75beb51b96c.jpg" />

<meta name="description" itemprop="description" content="猫狗鼠鱼导航-储物间-bilibili-github" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>

</head>

<body>

<div class="content">

<div class="logo">

<img src="https://gitee.com/lr787/img/raw/master/img/QQ%E5%9B%BE%E7%89%8720200823182716.jpg" alt="logo">

<br>

<h1 style="color: white"><i class="fa fa-bolt" aria-hidden="true"></i>猫狗鼠鱼<i class="fa fa-bolt" aria-hidden="true"></i></h1>

</div>

<div class="nav">

<a href="https://www.mgsy007.top">

<span>mgsy</span>

<span>007</span>

<span>keep</span>

<span>going</span>

<i class="fa fa-moon-o" aria-hidden="true"></i>BLOG

</a>

<a href="https://mgsy007.top/links/">

<span></span>

<span></span>

<span></span>

<span></span>

<i class="fa fa-users" aria-hidden="true"></i> Friends

</a>

<a href="https://space.bilibili.com/386388600">

<span></span>

<span></span>

<span></span>

<span></span>

<i class="fa fa-battery-full" aria-hidden="true"></i>Bilibili

</a>

<a href="https://github.com/LR787">

<span></span>

<span></span>

<span></span>

<span></span>

<i class="fa fa-github" aria-hidden="true"></i>Github

</a>





</div>

</div>

<div class="footer">

<p style="color: white">不备案。我任性。</p>

</div>



</body></html>

css

/*@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;

    flex-direction: column;
    background: #050801;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    height: 100vh;
}

.content{
    display: flex;
    justify-content: center;
    align-items: center;
/*    flex-direction: column;*/

}

.footer{
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: white;*/

}
.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 60%;
}
.logo img{

    border-radius: 50%;
    height: 30%;
    -webkit-box-reflect:below 1px linear-gradient(transparent, #0003);
}
.logo img:hover{
    background: blue;
    box-shadow: 0 0 5px blue,
                0 0 25px blue,
                0 0 50px blue,
                0 0 200px blue;
}

/*.logo h1{
    text-shadow: 0 0 0.2em #fff,
                0 0 0.1em #fff;

    z-index:100;

}*/
.logo h1{

    z-index:100;
    animation-name: title;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function:2s;
-webkit-animation-timing-function:2s; /* Safari 和 Chrome */
    
}
@keyframes title {
    0%,10% {
        text-shadow: 0 0 0.2em #fff,
    }
    40% {
        text-shadow: 0 0 0.1em #fff,
                     0 0 0.1em #fff,
    }
    60% {
        text-shadow: 0 0 0.1em #fff,
                     0 0 0.1em #fff,
                     0 0 0.1em #fff;
        transform: translateY(30px);

    }
    75% {
        text-shadow: 0 0 0.1em gold,
                     0 0 0.1em gold,
                     0 0 0.1em #fff,
                     0 0 0.2em #fff;
    }
    80% {
                text-shadow: 0 0 0.1em #fff,
                     0 0 0.1em #fff,
                     0 0 0.1em #fff,
                     0 0 0.2em #fff,
                     0 0 0.3em #fff;
    }
}


.nav{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 70px;
    height: 30%
}
.nav a{

    position: relative;
    display: inline-block;
    padding: 25px 30px;
    margin: 40px 0;
    color: #03e9f4;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
    margin-right: 50px;
}
.nav a:hover{
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.nav a:nth-child(1){
    filter: hue-rotate(310deg);
}
.nav a:nth-child(2){
    filter: hue-rotate(210deg);
}
.nav a:nth-child(3){
    filter: hue-rotate(110deg);
}
.nav a span{
    position: absolute;
    display: block;
}



.nav a span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#03e9f4);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
.nav a span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#03e9f4);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
.nav a span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#03e9f4);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}

.nav a span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#03e9f4);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}

@media screen and (max-width: 960px){
    .content{
        flex-direction: column;
    }
    .nav{
        flex-direction: column;
        /*margin-left: 70px;*/
        /*height: 60%*/
    }
    .logo{
        height: 30%
    }
}



文章评论

目录