見出し画像

ベイマックスが可愛くまばたきするやつ

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>Baymax CSS Animation</title>
 </head>

 <style>
   body {
     background: radial-gradient(circle at center, #fff , #fff  50%, #aaa );
     background-size: 100%;
     background-repeat: no-repeat;
     height: 100vh;
   }

   .baymax {
     border-bottom: 1.5em solid #000 ;
     position: absolute;
     top: 50%;
     left: 50%;
     width: 50%;
     transform: translate(-50%, -40%);
   }

   .baymax::before {
     animation: blink 6s infinite;
     content: "";
     background: #000 ;
     background: linear-gradient(
       to bottom,
       #efefef ,
       #efefef  50%,
       #000  50%,
       #000 
     );
     background-size: 200% 200%;
     background-position: 0 -100%;
     border-radius: 50%;
     position: absolute;
     width: 12em;
     height: 12em;
     left: -9em;
     top: -6em;
     transform: skewX(-4deg);
   }

   .baymax::after {
     animation: blink 6s 0.1s infinite;
     content: "";
     background: #000 ;
     background: linear-gradient(
       to bottom,
       #efefef ,
       #efefef  50%,
       #000  50%,
       #000 
     );
     background-size: 200% 200%;
     background-position: 0 -100%;
     border-radius: 50%;
     position: absolute;
     width: 12em;
     height: 12em;
     right: -9em;
     top: -6em;
     transform: skewX(4deg);
   }

   @keyframes blink {
     0%,
     50% {
       background-position: 0 100%;
     }
     85%,
     95% {
       background-position: 0 75%;
     }
     100% {
       background-position: 0 100%;
     }
   }
 </style>

 <body>
   <div class="baymax"></div>
 </body>
</html>

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