practice

<html>

.フレーム{position:absolute;
top:10px;
left:10px;
width:680px;
height:680px;
background-image:linear-gradient(-135deg,#aaaaaa,#444444);
border:1px solid black;
border-radius:50%;
z-index:10;}

.コーン{position:absolute;
top:40px;
left:42px;
width:602px;
height:602px;
border:10px solid black;
border-radius:50%;
background:radial-gradient(white 0%,#cccccc 25.9%,gray 26%,#cccccc 27%,white 33.9%,gray 34%,#cccccc 35%,white 41.9%,gray 42%,#cccccc 43%,white 49.9%,gray 50%,#cccccc 51%,white 56.9%,gray 57%,#cccccc 58%,white 63.9%,gray 64%,#cccccc 65%,white 69.9%,gray 70%);
animation:ジャン 0.02s 1 ease;
animation-delay:0.2s;
z-index:20;}
@keyframes ジャン{0%{transform:scale(1);}
100%{transform:scale(1.02);}}

.サウンド{position:absolute;
top:160px;
left:150px;
width:300px;
height:300px;
border-radius:50%;
background-image:repeating-radial-gradient(circle at center,white 30%,white 35%,white 40%,white 45%,white 50%,white 55%,white 60%,white 65%,white 70%,white 75%,white 80%,white 85%,white 90%,white 95%,white 100%);
filter:blur(8px);
mix-blend-mode:soft-light;
opacity:0;
animation-name:ドッドッ;
animation-duration:0.2s;
animation-delay:0.05s;
animation-timing-function:ease-out;
animation-iteration-count:2;
z-index:30;}
@keyframes ドッドッ{0%{transform:scale(0);
opacity:1;}
100%{transform:scale(2);
opacity:0;}}

.コイル_1{position:absolute;
top:188px;
left:304px;
width:10px;
height:80px;
background-color:black;
border:1px solid black;
border-radius:50%;
transform:rotate(8deg);
z-index:41;}
.コイル_1::before{position:absolute;
top:-8px;
left:-1px;
content:"⚫️";
font-size:10px;}

.コイル_2{position:absolute;
top:188px;
left:290px;
width:10px;
height:80px;
background-color:black;
border:1px solid black;
border-radius:50%;
transform:rotate(-8deg);
z-index:42;}
.コイル_2::before{position:absolute;
top:-8px;
left:-2px;
content:"⚫️";
font-size:10px;}

.キャップ{position:absolute;
top:200px;
left:222px;
font-size:160px;
animation:ショック 0.1s ease 0.1s forwards;
animation-iteration-count:2;
animation-delay:0.1s;
z-index:50;}
@keyframes ショック{0%{transform:translate(0,0);}
40%{transform:translate(3px,3px);}
80%{transform:translate(-3px,-3px);}
100%{transform:translate(0,0);}}

.ネジ_1{position:absolute;
top:110px;
left:110px;
font-size:14px;
z-index:61;}
.ネジ_2{position:absolute;
top:110px;
left:570px;
font-size:14px;
z-index:62;}
.ネジ_3{position:absolute;
top:570px;
left:110px;
font-size:14px;
z-index:63;}
.ネジ_4{position:absolute;
top:570px;
left:570px;
font-size:14px;
z-index:64;}
</style>

</html>