見出し画像

日食

Yuki Tatemukai 
<!DOCTYPE html class="my-2 rounded-full h-10 w-[16rem] px-4">
<html lang="jp">

<head>
   <!-- Required meta tags -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" />

   <title>日食</title>
</head>

<style>
   html,
   body {
       height: 100%;
       box-sizing: border-box;
   }
   
   body {
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
       background-image: linear-gradient(30deg, #182c51, #09101e);
   }
   
   .moon {
       background-image: linear-gradient(30deg, #13223f, #2b4980);
       width: 256px;
       height: 256px;
       border-radius: 50%;
       position: relative;
   }
   
   .moon::before {
       content: "";
       background-color: #ffa400;
       position: absolute;
       height: 100%;
       width: 100%;
       border-radius: 50%;
       z-index: -1;
       animation: 10.2s eclipse linear infinite alternate;
   }
   
   @keyframes eclipse {
       0% {
           transform: translate(-30px, 30px) scale(0.9);
       }
       50% {
           transform: translate(0px, 0px) scale(1.02);
           box-shadow: 0 0 10px #f9f3f2, 0 0 80px 8px #c7938b;
           background: #efdbd8;
       }
       100% {
           transform: translate(30px, -30px) scale(0.9);
           box-shadow: none;
       }
   }
</style>

<body>
   <div class="moon"></div>
</body>

</html>

この記事が気に入ったらサポートをしてみませんか？