- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
好吧,在承受了很大的压力和喝咖啡之后,我使用这段代码通过将鼠标悬停在链接上来显示对子元素的弹跳效果。在将鼠标移离链接时,子元素会在延迟 4 秒后隐藏。之所以引入这个 4 秒的延迟,是因为在将鼠标悬停在链接上之后,人们往往会立即将鼠标悬停在下拉菜单上,并且由于弹跳效果,在和
HTML 代码:
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="listOfNumbers">
<a id="Menus" href="">Numbers</a>
<ul class="submenu">
<li>
<a id="one" href="">one</a>
</li>
<li>
<a id="two" href="">two</a>
</li>
<li>
<a id="three" href="">three</a>
</li>
<li>
<a id="four" href="">four</a>
</li>
<li>
<a id="five" href="">five</a>
</li>
<li>
<a id="six" href="">six</a>
</li>
<li>
<a id="seven" href="">seven</a>
</li>
<li>
<a id="eight" href="">eight</a>
</li>
</ul>
</li>
</ul>
</div>
CSS 代码
ul { margin:0; padding:0; width:0; }
ul li {
height: 30px;
line-height: 30px;
list-style: none;
}
ul.menu li a {
padding:0;
width:90px;
display:block;
color: #fff;
font-size: 12px;
font-weight: bolder;
text-shadow: #000 0 -1px 1px;
text-decoration: none;
text-align: center;
border-top: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
box-shadow: white 7px 5px 20px; /* W3 Standarts */
-o-box-shadow: white 7px 5px 20px; /* Opera */
-ms-box-shadow: white 7px 5px 20px; /* IE 10+ */
-moz-box-shadow: white 7px 5px 20px; /* Firefox */
-webkit-box-shadow:white 7px 5px 20px; /* Webkit */
transition: text-shadow .7s ease-out,
background .7s ease-out; /* W3 Standarts */
-o-transition: text-shadow .7s ease-out,
background .7s ease-out; /* Opera */
-ms-transition: text-shadow .7s ease-out,
background .7s ease-out; /* IE 10+ */
-moz-transition: text-shadow .7s ease-out,
background .7s ease-out; /* Firefox */
-webkit-transition: text-shadow .7s ease-out,
background .7s ease-out; /* Webkit */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%);
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(17,17,17,1) 60%, rgba(0,0,0,1) 77%, rgba(19,19,19,1) 91%);
/* Webkit */
background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80)) );
/* Opera */
background: #666 -o-gradient( linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80)) );
/* IE 10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
}
ul.menu .listOfNumbers {
margin:15px 0 0 20px;
}
ul.menu li .submenu {
top:30px;
visibility:hidden;
}
ul.menu li:hover .submenu {
visibility:visible;
animation:mymove 1.2s linear; /* W3 Standart */
-o-animation:mymove 1.2s linear; /* Opera */
-ms-animation:mymove 1.2s linear; /* IE 10+ */
-moz-animation:mymove 1.2s linear; /* Firefox */
-webkit-animation:mymove 1.2s linear; /* Safari and Chrome */
}
ul.menu li:not(:hover) .submenu {
top:30px;
opacity:0;
transition:opacity 1.2s linear 3s,
visibility 1.2s linear 3s; /* W3 Standart */
-o-transition:opacity 1.2s linear 3s,
visibility 1.2s linear 3s; /* Opera */
-ms-transition:opacity 1.2s linear 3s,
visibility 1.2s linear 3s; /* IE 10+ */
-moz-transition:opacity 1.2s linear 3s,
visibility 1.2s linear 3s; /* Firefox */
-webkit-transition:opacity 1.2s linear 3s,
visibility 1.2s linear 3s; /* Safari and Chrome */
}
@keyframes mymove
{
0% {opacity:0.1;margin-top:0px;}
10% {opacity:0.3;margin-top:25px;}
30% {opacity:0.4;margin-top:50px;}
60% {opacity:0.5;margin-top:25px;}
80% {opacity:0.7;margin-top:50px;}
90% {opacity:0.9;margin-top:35px;}
95% {opacity:0.95;margin-top:25px;}
100% {opacity:1;margin-top:0px;}
}
/* Opera */
@-o-keyframes mymove
{
0% {opacity:0.1;margin-top:0px;}
10% {opacity:0.3;margin-top:25px;}
30% {opacity:0.4;margin-top:50px;}
60% {opacity:0.5;margin-top:25px;}
80% {opacity:0.7;margin-top:50px;}
90% {opacity:0.9;margin-top:35px;}
95% {opacity:0.95;margin-top:25px;}
100% {opacity:1;margin-top:0px;}
}
/* IE 10+ */
@-ms-keyframes mymove
{
0% {opacity:0.1;margin-top:0px;}
10% {opacity:0.3;margin-top:25px;}
30% {opacity:0.4;margin-top:50px;}
60% {opacity:0.5;margin-top:25px;}
80% {opacity:0.7;margin-top:50px;}
90% {opacity:0.9;margin-top:35px;}
95% {opacity:0.95;margin-top:25px;}
100% {opacity:1;margin-top:0px;}
}
/* Firefox */
@-moz-keyframes mymove
{
0% {opacity:0.1;margin-top:0px;}
10% {opacity:0.3;margin-top:25px;}
30% {opacity:0.4;margin-top:50px;}
60% {opacity:0.5;margin-top:25px;}
80% {opacity:0.7;margin-top:50px;}
90% {opacity:0.9;margin-top:35px;}
95% {opacity:0.95;margin-top:25px;}
100% {opacity:1;margin-top:0px;}
}
/* Safari and Chrome */
@-webkit-keyframes mymove
{
0% {opacity:0.1;margin-top:0px;}
10% {opacity:0.3;margin-top:25px;}
30% {opacity:0.4;margin-top:50px;}
60% {opacity:0.5;margin-top:25px;}
80% {opacity:0.7;margin-top:50px;}
90% {opacity:0.9;margin-top:35px;}
95% {opacity:0.95;margin-top:25px;}
100% {opacity:1;margin-top:0px;}
}
ul.menu .submenu li a {
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
/* margin: 68px 95px; */
z-index: 1000;
}
ul.menu .submenu li:first-child a {
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:2px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:2px;
-moz-border-top-left-radius: 10px;
-moz-border-radius-bottomleft:2px;
-moz-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 2px;
border-top-left-radius: 10px;
border-bottom-left-radius:2px;
border-top-right-radius: 10px;
border-bottom-right-radius:2px;
/* margin: 34px 95px; */
z-index: 1000;
}
ul.menu .submenu li:last-child a {
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:10px;
-moz-border-top-left-radius: 2px;
-moz-border-radius-bottomleft:10px;
-moz-border-top-right-radius: 2px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 2px;
border-bottom-left-radius:10px;
border-top-right-radius: 2px;
border-bottom-right-radius:10px;
/* margin:260px 95px; */
z-index: 1000;
}
最佳答案
如何为父级设置动画 - 类似于:
ul.menu > li:hover {
visibility:visible;
animation:parentmove 1.2s linear; /* W3 Standart */
-moz-animation:parentmove 1.2s linear; /* Firefox */
-webkit-animation:parentmove 1.2s linear; /* Safari and Chrome */
}
@keyframes parentmove
{
0% {padding-bottom:5px;}
10% {padding-bottom:30px;}
30% {padding-bottom:55px;}
60% {padding-bottom:30px;}
80% {padding-bottom:55px;}
90% {padding-bottom:40px;}
95% {padding-bottom:30px;}
100% {padding-bottom:5px;}
}
http://jsfiddle.net/kGqRM/187/
填充以与子菜单移动相同的速率添加到父级的底部
不幸的是,这意味着 li 必须是一个 block 元素并向左浮动(以便该元素实际上正确呈现 - 如果您当前检查您的 li 它似乎全部向左挤压,这就是您离开它的原因当你试图去到 child 身上时)
关于html - 在其 <li> 子元素中也观察到悬停在 <ul> 上的反弹效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14138715/
如果停止 ScrollView 中两个元素之间的滚动,是否有办法使 ScrollView 弹起并稳定? 最佳答案 是的,它叫做Pagination,您基本上需要设置contentSize,然后在中设置
我有一个 UIImageView,它应该从顶部滑入 View ,然后当它停止时它应该制作一个弹跳动画。 我正在像这样设置 y.position 变化的动画: [UIView animateW
我在 java android studio 中使用 libgdx。我才刚刚开始。我正在使用安卓手机。我没有使用任何相机。我想要的只是屏幕所有四个边的 Sprite 反弹而无需点击。我尝试了很多我认为
文本以编程方式添加到 UILabel。随着添加更多文本,文本换行并增加标签的高度。 问题是,当文本在一行的末尾换行时,整个标签将跳起 1 行的高度并自行动画回到正确的位置。最终结果很好,但是你如何摆脱
从 iPhone 上的 UIAlertView 模仿弹跳动画的最佳方法是什么?是否有一些内置机制? UIAlertView 本身不能满足我的需要。 我研究了动画曲线,但据我所知,它们提供的唯一曲线是缓
为此搜索了很多,但还没有找到合适的解决方案。 是否可以禁用 UIPageViewController 的反弹效果并仍然使用 UIPageViewControllerTransitionStyleScr
我有一个 ScrollView ,它充当横幅,其中有 15 个 ImageView 作为 subview (水平滚动)。我这样添加 subview : for (int i = 0; i < feat
我希望如果用户滑动的宽度小于按钮宽度的一半,那么它会弹回并且不显示任何按钮,但是如果用户滑动的宽度超过按钮宽度的一半,那么单元格就会弹回正确的位置。 这就是我目前所拥有的,可以左右滑动。 privat
我使用 jQuery Waypoints 库将菜单栏容器的位置从静态修改为固定。当浏览器窗口向下滚动到菜单栏时,该栏固定在窗口的顶部。 当缓慢滚动到/经过航路点时,状态变化似乎很顺利,但当我以正常速度
我在 xib 中为我的 customCell 使用 autoLayout,因为我想根据文本为行设置可变高度。 现在在我的 VC.m 中 我正在使用这些代码行 - (void)viewdidLoad {
我已经尝试了很多方法来解决这个问题,浪费了整整一周,没有解决。 我有两个 AWS 账户。一个帐户有 example.com 通过 SMTP 发送 SES 电子邮件。原始 mime 文件包括来源:bou
我希望让球的弹跳变得逼真。有时它会反弹,顶点会开始下降,然后再次撞击地面并反弹得更高。当它撞到墙壁时也会发生同样的情况,就好像墙壁违背我的意愿对球施加了一个力(除了 y 方向默认设置为 9.8 的重力
正在寻求有关如何创建执行弹跳的自定义 SKAction( Sprite 套件)的帮助? 基本上,想要将 Sprite 从顶部屏幕拖放到底部(Y 轴)并让它执行快速衰减反弹(仅在 Y 轴上下)。 注意:
我是 Core Animation 的新手,也是 RubyMotion 的新手(自 1 月以来一直在 Xcode 中使用 Obj-C)。我需要 AppLabel(它的 png 在名为 AppAppea
我正在尝试将 vector 拆分为 n 个部分。我检查了以下解决方案 How to split a vector into n "almost equal" parts 我根据这个评论得出了以下代码:
我是一名优秀的程序员,十分优秀!