円が大きくなりますます。
<input type="checkbox" id="hamburger"><!--入力 -->
<label for="hamburger"><!--入力用の図形の作成位置 -->
<p>asd</p>
<div id="container" class="circle icon"><!--入れ物 -->
<span class="bar top"></span> <!--線 上 -->
<span class="bar middle"></span> <!--線 中-->
<span class="bar bottom"></span><!--線 下-->
</div>
</label>
CSS
*{
margin: 0;/*外縁なし*/
padding: 0;/*内縁なし*/
box-sizing: border-box;/*?*/
}
#hamburger {力タグを非表示にします。
display: none;
}
#container{/*divタグのidに対しての装飾*/
background: tomato;/*円の色*/
display: inline-block;/*枠からはみ出さない*/
border-radius: 50px;/*角を丸く50以上で丸。padding等の大きさにもよります。*/
margin: 0px;
position: relative;/*相対座標*/
padding: 0px;
cursor: pointer;/*円内部ではカーソルは指の形*/
}
.circle {/*円の領域の大きさ指定*/
position: relative;/*相対座標*/
width: 100px;/*正方形の場所を確保します。*/
height: 100px;/*containerのpaddingも円の大きさに含まれます。*/
}
.bar {/*角の丸い白い太線を引きます。*/
position: absolute;/*絶対座標*/
width: 100px;/*幅*/
height: 12px;/*高さ*/
background: white;/*色*/
border-radius: 8px;/*角*/
transition: ease 0.3s;/*スピード*/
}
.top { top: 18%;}/*線 上の場所*/
.middle {top: 48%;}/*線 中の場所*/
.bottom{ top: 78%;}/*線 下の場所*/
#hamburger:checked ~ label .top{
transform: rotate(45deg);
top : 48%;}/*topを45度にします。*/
#hamburger:checked ~ label .middle{
opacity: 0;}/*middleをみえなくします。*/
#hamburger:checked ~ label .bottom{
transform: rotate(-45deg);
top : 48%;}/*bottomを-45度にします。*/