youtubeのシアターモードっぽいスタイルの実装です。
個別投稿ページでご覧ください。
Theater Mode
HTML
<span class="switch" tabindex="0">Theater Mode</span> <div class="button"> <input type="checkbox" name="morphing_check" value="morphing" id="morphing_check"> <label for="morphing_check">シアターモード</label> <div class="theater"> </div> </div>
CSS
.theater{ margin-top:2em; transition: all 1s ease-in-out; } .button input[type="checkbox"]:checked ~.theater{ margin:2em -50%; padding:10px 50%; background:rgba(0,0,0,1); text-align:center; transition: all 1s ease-in-out; } .button label{ padding:.3em; border:1px solid #ccc; background:#ddd; } .button input[type="checkbox"]{ visibility:hidden; } .button label:before{ margin:-3px 10px 0 0; content:" "; display:inline-block; width:13px; height:13px; background:url( http://tenman.info/labo/css/files/del.png ); background-size:contain; vertical-align:middle; background-repeat:no-repeat; transition: all 1s ease-in-out; } .button input[type="checkbox"]:checked ~ label:before{ margin:-3px 10px 0 0; content:" "; display:inline-block; width:13px; height:13px; background:url( http://tenman.info/labo/css/files/checked.png ); background-size:contain; vertical-align:middle; background-repeat:no-repeat; transition: all 1s ease-in-out; }