![見出し画像](https://assets.st-note.com/production/uploads/images/81359516/rectangle_large_type_2_d13b62731d59b6e2a19e4efb47c4c57c.png?width=1200)
ベイマックスが可愛くまばたきするやつ
<!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>
この記事が気に入ったらサポートをしてみませんか?