Result
画像をクリックするとGIFアニメが再生される、みたいなやつです。
マウスホバーで再生というお手軽な方法もあるけど、クリック再生はこれはこれで利用シーンがあるんじゃないかなと。
方法はこの手のトリックではお馴染みのinputを利用する形となります。
css
label.clicktogif {/*再生ボタン*/background: url('image.png') DimGrey no-repeat center center; display: block; float: left;}label.clicktogif:hover, label.clicktogif:focus-within {/*再生ボタン、マウスホバー用*/background: url('hover.png') DarkSlateGrey no-repeat center center; display: block; float: left;}.clicktogif img {display: block;}.clicktogif input[type=checkbox] {/*全体をlabelで包括してクリッカブルにし、チェックボックス自体は外へ飛ばす*/ position: absolute; left: -100vw;}.clicktogif input[type=checkbox] + img {/*アニメーションのgifは非表示にしておく*/ opacity: 0;}.clicktogif input[type=checkbox]:checked + img {/*チェックが入ったら表示させる*/ opacity: 1;} |
内容は割とシンプルです。
html
<label class="clicktogif" title="click to show gif"> <input type="checkbox"> <img src="animation.gif"></label> |
画像とinput要素をlabelで包括します。
