这很好:
<style type="text/css"> div { width:100px; height:100px; background:red; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style>
但是有没有人知道使用点击而不是悬停来做到这一点的方法?而不涉及JQuery?
谢谢!
解决方法
你可以这样写:
CSS
input{display:none} .ani { width:100px; height:100px; background:red; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ display:block; } input:checked + .ani{width:300px;}
HTML
<input type="checkBox" id="button"> <label class="ani" for="button"></label>