怎么用纯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; -...
怎么用纯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
mengvlog 阅读 29 次 更新于 2025-08-06 21:02:05 我来答关注问题0
  • 以前面临鼠标移入一级菜单显示下拉菜单,移开则隐藏,需要淡入、延迟淡出效果,仅使用CSS无法实现。JS与jQuery能通过设置定时器和fade效果达成目的。然而,纯CSS实现这一效果,主要依赖:hover伪类、后代选择器、opacity、transition、visibility以及animation与pointer-events。实现步骤如下:初始下拉菜单visibility为...

  • -- HTML部分 -->下拉 第一个 第二个 第三个 本例适用于谷歌浏览器和Safari浏览器,如需兼容Opera须将“-webkit-”更改为”-o-“,火狐改为“

  • 如何用css实现鼠标滑过时出现一个下拉列表请单击“文件”“新建”以创建新的web源文件。默认情况下,新类型是OK。如果您有其他需要,可以选择页面类型、布局等,然后单击“创建”按钮。使用hover这个属性,hover就是鼠标经过,先给需要出现的下拉表给个display:none,这样下拉表就看不见了,用上hover以后...

  • 方法/步骤 1,新建一个html文件,命名为test.html ,用于介绍如何用css改变下拉框select样式。2,在test.html页面,使用div创建一个模块,设置其class属性为select1,用于下面对该类名进行样式布局。3,在div模块内,使用select标签创建一个下拉选择框,下拉列表是三个颜色的选择。4,使用css对div进行样式...

  •  猪八戒网 如何使用HTML和CSS制作下拉菜单?

    1、请单击“文件”“新建”以创建新的web源文件。2、默认情况下,新类型是OK。如果您有其他需要,可以选择页面类型、布局等,然后单击“创建”按钮。3、创建新网页后,单击“设计”页上的“插入-表单-选择(列表/菜单)”以插入可选择的下拉表单。4、或者在菜单栏下有一个表单选项图标。将鼠标放在...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部