/* CSS部分 */ul { list-style:none; margin:0; padding:0; text-align:center; background:#F03; color:#FFF; -webkit-transform:scaleY(0); -webkit-transform-origin:0 0; }li { padding:0; margin:0; }div { width:200px; }div:hover ul { -webkit-animation:ulShow 0.4s; -...
怎么用纯css实现点击出现下拉框,抽屉效果那种
/* CSS部分 */ul { list-style:none; margin:0; padding:0; text-align:center; background:#F03; color:#FFF; -webkit-transform:scaleY(0); -webkit-transform-origin:0 0; }li { padding:0; margin:0; }div { width:200px; }div:hover ul { -webkit-animation:ulShow 0.4s; -webkit-animation-fill-mode:forwards; -webkit-animation-timing-function: cubic-bezier(0,0.8,0.9,1); }div div { height:30px; line-height:30px; text-align:center; background-color:#FC0; }@-webkit-keyframes ulShow {from { -webkit-transform:scaleY(0); }to { -webkit-transform:scaleY(1); }}<!-- HTML部分 --><div><div>下拉 </div><ul> <li>第一个</li> <li>第二个</li> <li>第三个</li> </ul></div>本例适用于谷歌浏览器和Safari浏览器,如需兼容Opera须将“-webkit-”更改为”-o-“,火狐改为“-moz-”,IE系列比较复杂在此不予举例详情请查询W3C。
2015-04-18
给大家个思路,用input[checkbox]来模拟点击效果 选中会出现checked属性 这个是可以写进css里的 用input:checked来模拟已被点击。2018-05-30
这。。。想多了吧,用 input 多选下拉框不行吗?2015-04-18