CSS checkbox特性下的元素的显示与隐藏实例页面

展示

回到相关文章 »
FireFox 19支持(其他都不行,目前)将canvas内容导出为二进制数据图片,默认导出无损24-bit PNG图片。可设置格式,例如导出为90%质量的jpg图片,则使用:toBlob(callback, "image/jpeg", 0.9); 做了个简单的demo演示:canvas导出为图片实例页面

代码

核心CSS代码:
.test_checkbox,
.test_more,
.test_hide,
.test_checkbox:checked ~ .test_label .test_show {
    position:absolute;
    left: -999em;
}

.test_checkbox:checked ~ .test_more,
.test_checkbox:checked ~ .test_label .test_hide {
    position: static;
}
            
主要HTML代码:
【社交游戏的鲸鱼理论】...互动。
<input type="checkbox" id="testToggleCheckbox" class="test_checkbox" />
<span class="test_more">最后他们得出的结论...投资。</span>
<label class="test_label" for="testToggleCheckbox">
    <span class="test_hide">收起↑</span>
    <span class="test_show">展开↓</span>
</label>