最近
最近はコロナのせいで引きこもっています。楽しみがパンケーキを作ることしかないです。何かちょうど良い趣味教えてください。
bootstrapでプラスからマイナスに変化するアイコンを作る
まずはHTML
index.html
<divclass=""id="collapseListGroupHeading"><ahref="#switch"class="collapsed"data-toggle="collapse"></a><divclass="collapse"id="switch"aria-expanded="false"></div></div>そしてCSS
style.css
#collapseListGroupHeadinga[data-toggle="collapse"]{padding:10px;text-decoration:none;position:relative;}#collapseListGroupHeadinga[data-toggle="collapse"]::before,#collapseListGroupHeadinga[data-toggle="collapse"]::after{content:"";width:8px;height:0;border-top:#0000001pxsolid;border-bottom:#0000001pxsolid;position:absolute;right:15px;top:12px;bottom:12px;margin:auto;}#collapseListGroupHeadinga[aria-expanded=false]::after{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);transition-duration:0.3s;}#collapseListGroupHeadinga[aria-expanded=true]::after{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);transition-duration:0.3s;}