HW3 C-ARIN

✨ อนพัทย์ นันทนพิบูล

<html>
<head>
    <title>Let's Start</title>
    <style>
        @keyframes dao {
            0% {opacity: 0;}
            100% {opacity: 0.9;}
        }
        body {
            margin: 0;
          	overflow: hidden;
        }
        .pasad img {
            background-size: cover;
            position: absolute;
            top: 0;
            background-position: center;
            margin: 0;
            width: 100%;
            height: 100%;
        }
		#rr{
			width: 25%;
			position: absolute;
			bottom:8%;
			left:3%;
			animation: rrs 7s infinite;
		}
		@keyframes rrs{
			0%{left: -20%}
			100%{left: 100%}
		}
		#vl{
			width: 8%;
			position: absolute;
			bottom: 28%;
			left: 27%;
			animation: vls 6s infinite;
		}
		@keyframes vls{
			0%{left: 3%}
			100%{left: 100%}
		}
		#ar{
			width: 10%;
			position:absolute;
			top: 5%;
			left: 8%;
			animation: ars 3s infinite;
		}
		@keyframes ars{
			50%{transform: translate(3px, 40px);}
			100%{transform: translate(3px, -23px);}
		}
		#jb{
			width: 17%;
			position: absolute;
			top: 5%;
			right: 5%;
			animation: jbs 3s infinite;
		}
		@keyframes jbs{
			50%{transform: translate(3px, -23px);}
			100%{transform: translate(3px, 40px);}
		}
		#cc{
			width: 40%;
			position: absolute;
			top: 10%;
			left: 25%;
		}
        #day[data-day="1"] {
            background: linear-gradient(0deg, rgba(213, 222, 145, 1) 17%, rgba(203, 106, 26, 1) 65%, rgba(165, 28, 3, 1) 100%);
            margin: 0;
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 100%;
			z-index: -5;
        }
        #day[data-day="-1"] {
            background: linear-gradient(0deg,
                    rgba(201, 221, 255, 1) 5%,
                    rgba(76, 118, 238, 1) 39%,
                    rgba(31, 94, 198, 1) 65%,
                    rgba(5, 33, 103, 1) 100%);
            margin: 0;
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 100%;
			z-index: -5;
        }
        #star1 {
            bottom: 580px;
            left: 15px;
            position: absolute;
            animation: dao 1s infinite alternate linear;
        }
        #star2 {
            bottom: 500px;
            left: 200px;
            position: absolute;
            animation: dao 6s infinite alternate linear;
        }
        #star3 {
            bottom: 450px;
            left: 350px;
            position: absolute;
            animation: dao 2s infinite alternate linear;
        }
        #star4 {
            bottom: 350px;
            left: 150px;
            position: absolute;
            animation: dao 4s infinite alternate linear;
        }
        #star5 {
            bottom: 600px;
            left: 500px;
            position: absolute;
            animation: dao 7s infinite alternate linear;
        }
        #star6 {
            top: 10px;
            left: 300px;
            position: absolute;
            animation: dao 2s infinite alternate linear;
        }
        #star7 {
            top: 30px;
            left: 100px;
            position: absolute;
            animation: dao 3s infinite alternate linear;
        }
        #star8 {
            top: 50px;
            left: 800px;
            position: absolute;
            animation: dao 5s infinite alternate linear;
        }
        #star9 {
            top: 150px;
            left: 700px;
            position: absolute;
            animation: dao 1s infinite alternate linear;
        }
        #star10 {
            bottom: 440px;
            left: 600px;
            position: absolute;
            animation: dao 6s infinite alternate linear;
        }
        #star11 {
            top: 170px;
            right: 600px;
            position: absolute;
            animation: dao 9s infinite alternate linear;
        }
        #star12 {
            top: 10px;
            right: 400px;
            position: absolute;
            animation: dao 5s infinite alternate linear;
        }
        #star13 {
            top: 80px;
            right: 300px;
            position: absolute;
            animation: dao 7s infinite alternate linear;
        }
        #star14 {
            top: 150px;
            right: 150px;
            position: absolute;
            animation: dao 4s infinite alternate linear;
        }
        #star15 {
            top: 20px;
            right: 100px;
            position: absolute;
            animation: dao 8s infinite alternate linear;
        }
        #toggle {
            position: fixed;
            bottom: 1em;
            right: 1em;
            background: #fff;
            padding: .5em;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="day" data-day="-1">
		<div class="pasad">
        	<img src="https://media.discordapp.net/attachments/932854415201820752/941337013058158672/01bg.png?width=1178&height=662"
            alt="pasad">
    	</div>
			<img src="https://cdn.discordapp.com/attachments/932854415201820752/941337042032406558/05.png" alt="" id="rr">
			<img src="https://cdn.discordapp.com/attachments/932854415201820752/941337062479630416/02.png" alt="" id="jb">
        	<img src="https://cdn.discordapp.com/attachments/932854415201820752/941337110131146802/03.png" alt="" id="ar">
			<img src="https://cdn.discordapp.com/attachments/932854415201820752/941337128279892018/04.png" alt="" id="vl">
    </div>
	
	<div class="c">
		<img src="https://cdn.discordapp.com/attachments/897515768818827304/941946522088640522/16.png" alt="" id="cc">
	</div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star1">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star2">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star3">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star4">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star5">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star6">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star7">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star8">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star9">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star10">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star11">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star12">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star13">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star14">
        </div>
        <div class="star">
            <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663"
                width="30" height="30" alt="star" id="star15">
        </div>
        <div class="kangwon"></div>
    <div id="toggle" onclick="day.dataset.day *= -1">
        Toggle
    </div>
</body>

</html>