|
收藏闪存小组博问

小染``

园龄：3年7个月粉丝：3关注：5

ccc 

<!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>Document</title>
</head>
<style>
    .box {
        width: 70vw;
        height: 700px;
        overflow: hidden;
        background-color: rgb(0,0,0);
    }
    .floor {
        width: 100%;
        height: 300px;
        position: relative;
        top: 20%;
    }
    .floor-left {
        width: 1000px;
        height: 600px;
        background-color: rgb(0,128,0);
        border-radius: 50%;
        position: relative;
        top: 300px;
        left: -300px;
        float: left;
        z-index: 1;
    }
    .floor-right {
        width: 1000px;
        height: 600px;
        background-color: rgb(139,69,19);
        border-radius: 50%;
        position: relative;
        top: 320px;
        left: 300px;
        z-index: 2;
    }
    .tree {
        width: 100%;
        height: 400px;
        /* background-color: red; */
        position: relative;
        top: -90px;
        left: -50px;
        z-index: 3;
    }
    .tree-cir {
        width: 200px;
        height: 300px;
        position: relative;
        /* background-color: red; */
        top: 0px;
    }
    .tree-cir .leaf{
        width: 200px;
        height: 200px;
        background-color: rgb(48,174,30);
        border-radius: 50%;
    }

    .tree-cir .body{
        width: 20px;
        height: 0;
        border-width :0 17px 80px 17px;
        border-style: none solid solid;
        border-color: transparent transparent rgb(65,45,41);
        /* background-color: rgb(65,45,41); */
        position: relative;
        left: 70px;
        top: -10px;
    }
    .tree-1 {
        width: 50px;
        height: 200px;
        position: relative;
        /* background-color: red; */
        top: -190px;
        left: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .tree-1 .leaf {
        width: 50px;
        height: 120px;
        background-color: rgb(194,227,140);
        border-radius: 50%;
    }
    .tree-1 .leaf:hover {
        box-shadow: 10px rgb(194,227,140);
    }
    .tree-1 .body {
        width: 8px;
        height: 40px;
        background-color: rgb(55,35,32);
        border-radius: 50px;
        position: relative;
        top: -10px;
    }

    .tree-2 {
        width: 50px;
        height: 200px;
        position: relative;
        /* background-color: red; */
        top: -370px;
        left: 650px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .tree-2 .leaf {
        width: 50px;
        height: 120px;
        background-color: rgb(190,218,33);
        border-radius: 50%;
    }
    .tree-2 .body {
        width: 8px;
        height: 40px;
        background-color: rgb(55,35,32);
        border-radius: 50px;
        position: relative;
        top: -10px;
    }

    .tree-3 {
        width: 50px;
        height: 200px;
        position: relative;
        /* background-color: red; */
        top: -610px;
        left: 750px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .tree-3 .leaf {
        width: 60px;
        height: 150px;
        background-color: rgb(28,193,123);
        border-radius: 90% 90% 50px 50px;
    }
    .tree-3 .body {
        width: 8px;
        height: 40px;
        background-color: rgb(55,35,32);
        border-radius: 50px;
        position: relative;
        top: -10px;
    }
    .pine {
        width: 300px;
        height: 380px;
        position: relative;
        /* background-color: red; */
        top: -740px;
        left: 920px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .tra-1 {
        border-width :0 100px 100px 100px;
        border-style: none solid solid;
        border-color: transparent transparent rgb(26,115,26);
        position: relative;
        top: 20px;
    }
    .tra-2 {
        border-width :0 150px 150px 150px;
        border-style: none solid solid;
        border-color: transparent transparent rgb(26,115,26);
        position: relative;
        top: -40px;
    }
    .tra-3 {
        border-width :0 170px 200px 170px;
        border-style: none solid solid;
        border-color: transparent transparent rgb(26,115,26);
        position: relative;
        top: -150px;
    }
    .pine .body {
        width: 70px;
        border-width :0 5px 40px 5px;
        border-style: none solid solid;
        border-color: transparent transparent rgb(65,45,41);
        position: relative;
        left: 0px;
        top: -160px;
    }
    .house {
        width: 200px;
        height: 280px;
        position: relative;
        /* background-color: red; */
        top: -500px;
        left: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
    }
    .chimney {
        width: 20px;
        height: 50px;
        background: rgb(153,51,0);
        position: relative;
        left: 40px;
        top: 50px;
    }
    .roof {
        border-width :0 100px 100px 100px;
        border-style: none solid solid;
        border-color: transparent transparent rgb(153,51,0);
        position: relative;
        top: 0px;
    }
    .house .body {
        width: 150px;
        height: 100px;
        background: rgb(200,145,121);
        position: relative;
        left: 0px;
    }
    .window {
        width: 20px;
        height: 20px;
        border: 5px solid rgb(131,83,35);
        background-color: rgb(237,226,184);
        position: relative;
        left: 20px;
        top: 20px;
    }
    .moon {
        width: 80px;
        height: 80px;
        /* background-color: red; */
        position: relative;
        top: -950px;
        left: 300px;
        transform: rotate(20deg);
        animation: moon 3s linear infinite alternate;
    }
    @keyframes moon {
        0% {
            top: -450px;
            left: 0px;
        }
        100% {
            top: -950px;
        left: 300px;
        }
    }

    .dark {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: black;
        float: left;
        position: relative;
        top: 0px;
        left: -20px;
    }
    .bright {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgb(255,233,69);
    }
    .meteor {
        width: 150px;
        height: 100px;
        /* background: red; */
        position: relative;
        top: -1000px;
        left: 750px;
        transform: rotate(60deg);
    }
    .line {
        width: 2px;
        height: 100px;
        border-radius: 30px 30px 50% 50%;
        background-color: #5bc6db;
        background-image: linear-gradient(300deg, #5bc6db 0%, #357095 25%, #194259 100%);
    }
    .m-1 {
        position: relative;
        top: 20px;
        left: 10px;
        float: left;
        animation: linear 3s infinite normal m-1;
    }
    @keyframes m-1 {
        from {
            transform: translateY(-20px);
            z-index:1;
        }

        to {
            transform:translateY(200px);
            z-index:1;
         }
    }
    .m-2 {
        position: relative;
        top: 0px;
        left: 20px;
        float: left;
        animation: linear 2s infinite normal m-2;
    }
    @keyframes m-2 {
        from {
            transform: translateY(-20px);
            z-index:1;
        }

        to {
            transform:translateY(150px);
            z-index:1;
         }
    }
    .m-3 {
        position: relative;
        top: -20px;
        left: 30px;
        float: left;
        animation: linear 4s infinite normal m-3;
        animation-timing-function: 2s;
    }
    @keyframes m-3 {
        from {
            transform: translateY(-20px);
            z-index:1;
        }

        to {
            transform:translateY(230px);
            z-index:1;
         }
    }
    .m-4 {
        position: relative;
        top: -40px;
        left: 40px;
        float: left;
        animation: linear 2s infinite normal m-4;
        animation-timing-function: 2s;
    }
    @keyframes m-4 {
        from {
            transform: translateY(-20px);
            z-index:1;
        }

        to {
            transform:translateY(150px);
            z-index:1;
         }
    }
    .m-5 {
        position: relative;
        top: -60px;
        left: 50px;
        float: left;
        animation: linear 3s infinite normal m-5;
    }
    @keyframes m-5 {
        from {
            transform: translateY(-20px);
            z-index:1;
        }

        to {
            transform:translateY(190px);
            z-index:1;
         }
    }
</style>
<body>
    <div class="box">
        <div class="floor">
            <div class="floor-left"></div>
            <div class="floor-right"></div>
        </div>
        <div class="tree">
            <div class="tree-cir">
                <div class="leaf"></div>
                <div class="body"></div>
            </div>
            <div class="tree-1">
                <div class="leaf"></div>
                <div class="body"></div>
            </div>
            <div class="tree-2">
                <div class="leaf"></div>
                <div class="body"></div>
            </div>
            <div class="tree-3">
                <div class="leaf"></div>
                <div class="body"></div>
            </div>
            <div class="pine">
                <div class="tra-1"></div>
                <div class="tra-2"></div>
                <div class="tra-3"></div>
                <div class="body"></div>
            </div>
        </div>
        <div class="house">
            <div class="chimney"></div>
            <div class="roof"></div>
            <div class="body">
                <div class="window"></div>
            </div>
        </div>
        <div class="moon">
            <div class="dark"></div>
            <div class="bright"></div>
        </div>
        <div class="meteor">
            <div class="m-1 line"></div>
            <div class="m-2 line"></div>
            <div class="m-3 line"></div>
            <div class="m-4 line"></div>
            <div class="m-5 line"></div>
        </div>
    </div>
</body>
</html>

本文作者：小染のblog

本文链接：https://www.cnblogs.com/xiaoranya/p/16408752.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   小染``  阅读(91)  评论(1)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae
评论
收藏
关注
推荐
深色
回顶
收起