/* 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); }
}
- 第一个
- 第二个
- 第三个
本例适用于谷歌浏览器和Safari浏览器,如需兼容Opera须将“-webkit-”更改为”-o-“,火狐改为“-moz-
”,IE系列比较复杂在此不予举例详情请查询W3C。
追问
这个是hover啊,不是模拟click,不过从你的代码里学到了transform的origin用法,还有animation-fill-mode的用法,谢谢你。
我现在有点怀疑题目只是让hover模拟了,click实在想不出来办法,可惜看不到题目了
追答
/* 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; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0,0.8,0.9,1); }
li { padding:0; margin:0; }
div { width:200px; }
div button:focus~ul { -webkit-transform:scaleY(1); }
div button { width:200px; border:none; height:30px; line-height:30px; text-align:center; background-color:#FC0; }
下拉
- 第一个
- 第二个
- 第三个
修改版……
有个缺点,由于是focus获得焦点,所以当点击LI中的内容时button会失去焦点,导致ul消失,暂时来讲没有想到其他解决方法,太晚了睡觉了。
温馨提示:答案为网友推荐,仅供参考