飞鸟 - LONG的个人小站

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞鸟</title>
    <link rel="stylesheet" href="../CSS/style.css">
</head>
<body>
    <div class="bird_box">
        <div class="bird">
            <div class="bird_body">
                <div class="bird_head"></div>
                <div class="bird_wing_left">
                    <div class="bird_wing_left_top"></div>
                </div>
                <div class="bird_wing_right">
                    <div class="bird_wing_right_top"></div>
                </div>
                <div class="bird_tail_left"></div>
                <div class="bird_tail_right"></div>
            </div>
        </div>
    </div>
</body>
</html>

body{
    background-color: rgba(170, 172, 247, 0.8);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/* 倒影 */
.bird_box {
    margin-top: -40px;
    perspective: 400px;
    filter: drop-shadow(0px 150px 10px rgba(0,0,0,0.2));
}
/* 3d模式 */
.bird_box div{
    transform-style: preserve-3d;
}
.bird_body{
    position: relative;
    width: 30px;
    height: 40px;
    background-color: #f9f6f3;
}
.bird{
    animation: fly 10s linear infinite;
}
.bird_head{
    position: absolute;
    top: -30px;
    border-right: 15px solid transparent;
    border-bottom: 30px solid #f9f6f3;
    border-left: 15px solid transparent;
    transform-origin: 50% 100%;
    transform: rotateX(-20deg);
}
.bird_wing_left{
    position: absolute;
    left: -30px;
    height: 30px;
    border-right: 30px solid #f9f6f3;
    border-bottom: 10px solid transparent;
    transform-origin: 100% 0;
    animation: wingleft 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite alternate;
}
.bird_wing_left_top{
    position: absolute;
    left: -30px;
    border-right: 30px solid #f9f6f3;
    border-bottom: 30px solid transparent;
    transform-origin: 100% 0;
    animation: wingleft 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate;
}
.bird_wing_right{
    position: absolute;
    left: 30px;
    height: 30px;
    border-left: 30px solid #f9f6f3;
    border-bottom: 10px solid transparent;
    transform-origin: 0 0;
    animation: wingright 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite alternate;
}
.bird_wing_right_top{
    position: absolute;
    border-left: 30px solid #f9f6f3;
    border-bottom: 30px solid transparent;
    transform-origin: 0 0;
    animation: wingright 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate;
}
.bird_tail_left{
    position: absolute;
    top: 40px;
    border-right: 30px solid transparent;
    border-top: 40px solid #f9f6f3;
    transform-origin: 50% 0;
    transform: rotateX(-20deg);
}
.bird_tail_right{
    position: absolute;
    top: 40px;
    border-left: 30px solid transparent;
    border-top: 40px solid #f9f6f3;
    transform-origin: 50% 0;
    transform: rotateX(-20deg);
}
@keyframes wingleft {
    0%{
        transform: rotateY(-40deg);
    }
    100%{
        transform: rotateY(40deg);
    }
}
@keyframes wingright {
    0%{
        transform: rotateY(40deg);
    }
    100%{
        transform: rotateY(-40deg);
    }
}
@keyframes fly {
    0%{
        transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
    }
    100%{
        transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
    }
}

评论/ 取消评论