kecanwen.github.io
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet/css" type="text/css" href="../styles/reset.css" />
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            color: white;
            margin: 0;
            padding: 0;
        }
        .firstPage{
            width: 100vw;
            height: 100vh;
            background: linear-gradient(90deg,#007991,#78ffd6);
            display: flex;
            justify-content: center;
        }
        .myHeadPortrait{
            transition-property: all;
            transition-duration: 4s;
            transition-delay: 0s, 1s, 0s;
            border: solid 2px #000000;
            border-radius: 10px;
        }
        .myHeadPortrait:hover{
            border-radius: 90px;
            box-shadow: 5px 3px 5px #03040a;
        }
        .introduce{
            padding-top: 180px;
            text-align: center;
        }
        .introduce h1{
            padding: 10px 0;
            -webkit-transition:all 1.5s ease;
            transition:all 1.5s ease;
        }
        .introduce h1:hover{
            color:#fff;
            -webkit-animation:Glow 1.5s ease infinite alternate;
            animation:Glow 1.5s ease infinite alternate;
        }
        @keyframes Glow {
            from {
                text-shadow:0 0 10px DarkSlateBlue,0 0 20px DarkSlateBlue,0 0 30px DarkSlateBlue,0 0 40px #00a67c,0 0 70px #00a67c,0 0 80px #00a67c,0 0 100px #00a67c,0 0 150px #00a67c;
            }
            to {
                text-shadow:0 0 5px DarkSlateBlue,0 0 10px DarkSlateBlue,0 0 15px DarkSlateBlue,0 0 20px #00a67c,0 0 35px #00a67c,0 0 40px #00a67c,0 0 50px #00a67c,0 0 75px #00a67c;
            }
        }
        .introduce p{
            font-size: 16px;
            padding: 5px 0;
        }
        .introduce h3{
            display: flex;
            float: right;
            margin-top: 20px;
        }
        .introduce h3 a{
            padding: 0 10px;
            text-decoration: none;
        }
        .Bubble{
            display: flex;
            justify-content: space-evenly;
        }
        .Bubble .BubbleItem{
            position: fixed;
            list-style-type: none;
            width: 100px;
            height: 100px;
            line-height: 100px;
            border-radius: 50%;
            text-align: center;
            color: #fff;
            font-size: .34667rem;
            box-shadow: inset 0 0 0.66667rem 0.13333rem;
            animation: pulse 2s linear infinite;
            transition: opacity 1s 1s;
        }
        .Bubble .BubbleItem:first-child{
            left: 26%;
            top: 10%;
        }
        .Bubble .BubbleItem:nth-child(2){
            left: 60%;
            top: 10%;
        }
        .Bubble .BubbleItem:nth-child(3){
            left: 36%;
            top: 8%;
        }
        .Bubble .BubbleItem:nth-child(4){
            left: 31%;
            top: 31%;
        }
        .Bubble .BubbleItem:nth-child(5){
            left: 58%;
            top: 30%;
        }
        .Bubble .BubbleItem:last-child{
            left: 68%;
            top: 30%;
        }
        @keyframes  pulse{
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(1.1);
            }
            100%{
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div class="firstPage">
        <div class="introduce">
            <div class="Bubble">
                <div class="BubbleItem">24岁</div>
                <div class="BubbleItem">在职</div>
                <div class="BubbleItem">上海</div>
                <div class="BubbleItem">本科一批</div>
                <div class="BubbleItem">计算机专业</div>
                <div class="BubbleItem">前端工程师</div>
            </div>
            <p><img src="./imgs/headPortrait.png" class="myHeadPortrait"></p>
            <h1>Hey，我是柯灿文</h1>
            <span></span>
            <p>本科计算机专业,2018年底开始自学前端,对一些基础的计算机基础原理有着深刻的理解</p>
            <p>从Vue框架，从MPA、SPA到小程序、快应用、electron，对开源分享造轮子亦有浓厚兴趣。</p>
            <h3>
                <a href="">掘金</a>
                <a href="">csdn</a>
                <a href="">github</a>
                <a href="">公众号</a>
            </h3>
        </div>
    </div>
</body>
</html>