Team P’Arin (Copy 2085) (Branch 2090)

✨ นายพิสิฐพงศ์ ปาละวิสุทธิ์

<html>
<style>
    body {
        background-color: wheat;

}

.wrap {
        display: block;
        padding-top: 5%;
        width: 100%;
        text-align: center;
    }

.main {
        position: relative;
        display: inline-block;
        height: 600px;
        width: 900px;
        box-sizing: border-box;
        border: 3px solid #f008;
        overflow: hidden;
        background-color: #BFDFEC;
        background-repeat: repeat-x;
        background-image: url("https://i.stack.imgur.com/b7z29.png");
        animation: movement 10s linear infinite;

}

.parin {

position: absolute;
        animation: parinmove 5s infinite linear;
    }

@keyframes parinmove {
        from {
            top: 400px;
            left: -150;
            width: 124px;
            height: 124px;
            transform: rotateZ(0deg);
        }

to {
            top: -100px;
            left: 600px;
            width: 64px;
            height: 64px;
            transform: rotateZ(360deg);
        }
    }

@keyframes movement {
        0% {
            background-position: 0px 0px;
        }

100% {
            background-position: 560px 0px;
        }
    }

.sun {
        position: absolute;
        width: 124px;
        height: 124px;
        background: linear-gradient(to bottom, #ff6600 0%, #ffff00 100%);
        border-radius: 50%;
        box-shadow: ;
        left: 20px;
        top: 10px;
        animation: movesun 10s linear infinite;
    }

.imgsun {
        position: absolute;
        left: -15px;
        width: 150px;
        height: 150px;
    }

@keyframes movesun {
        from {
            transform: rotateZ(0deg);
        }

to {
            transform: rotateZ(360deg);
        }
    }

.airplane {
        position: absolute;
        top: 250px;
        left: -70px;
        animation: airplanemove 2s alternate infinite;
    }

@keyframes airplanemove{
        from {
            transform: translateY(0px);
        }
        to {
            transform: translateY(15px);
        }
    }

</style>

</body>
<script>

</script>

</html>