延迟CSS转换2秒
Delay the CSS transition for 2 secs
OK,我已经创建了一个按钮,当鼠标悬停在它上面时,它会显示一个菜单。一旦将鼠标从按钮上移开,菜单就会被隐藏。这是完美的,但菜单不应该消失,当我从鼠标移到菜单本身。也发生了,但我已经创建了一个使用css反弹效应使它更时尚,如果我尝试悬停鼠标在菜单上动画发生之前,再次得到隐藏菜单,因为菜单和按钮之间的差距在弹跳动作,所以我想延迟2秒的隐藏,所以即使有人继续按钮并试图移动菜单消失之前应该等待至少2秒。链接到小提琴
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="listOfNumbers"><a id="Menus" href="">Numbers</a><div>
<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>
</div>
</li>
</ul>
</div>
CSS代码:ul.menu .listOfNumbers{
position: fixed;
margin-left: 20px;
list-style-type: none;
margin: 15px 0;
float: left;
height: 30px;
line-height: 30px;
}
ul.menu .listOfNumbers a{
position: fixed;
margin-left: 93px;
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)) );
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%);
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%); /* IE10+ */
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%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
display: block;
padding: 0;
text-decoration: none;
color: #fff;
font-size: 12px;
font-weight: bolder;
text-shadow: #000 0 -1px 1px;
width: 90px;
text-align: center;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #000;
-webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
-moz-transition: text-shadow .7s ease-out, background .7s ease-out;
-moz-box-shadow: white 7px 5px 20px;
-webkit-box-shadow:white 7px 5px 20px;
box-shadow: white 7px 5px 20px;
}
ul.menu .submenu{
display: none;
top: -30px;
position: absolute;
opacity: 0;
}
ul.menu .submenu li{
list-style-type: none;
}
ul.menu li:hover .submenu{
display: block;
top: -2px;
opacity: 1;
animation:mymove 1.2s linear;
-moz-animation:mymove 1.2s linear; /* Firefox */
-webkit-animation:mymove 1.2s linear; /* Safari and Chrome */
-o-animation:mymove 1.2s linear; /* Opera */
-ms-animation:mymove 1.2s linear; /* IE */
}
@keyframes mymove
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-ms-keyframes mymove /* IE */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
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;
-moz-border-top-left-radius: 2px;
-moz-border-radius-bottomleft:10px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius: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 .submenu li:nth-of-type(2) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 68px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(3) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 100px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(4) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 133px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(5) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 165px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(6) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 197px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(7) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 229px 95px;
z-index: 1000;
}
我不知道如果有必要涉及javascript或jQuery。但是,如果使用它们中的任何一个都可以实现,那么也没关系。
也许你想要transition-delay
: https://developer.mozilla.org/en-US/docs/CSS/transition-delay
可以指定多个延迟;每个延迟将应用于transition-property属性指定的相应属性,该属性充当主列表。如果指定的延迟少于主列表,则缺失值被设置为初始值(0)。如果有更多的延迟,则简单地将列表截断到合适的大小。在这两种情况下,CSS声明仍然有效。
jsfiddle http://jsfiddle.net/sP5hg/6/
ul.menu .listOfNumbers{
position: relative;
margin-left: 20px;
list-style-type: none;
margin: 15px 0;
float: left;
line-height: 30px;
z-index: 1000;
}
ul.menu .listOfNumbers a{
margin-left: 93px;
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)) );
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%);
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%); /* IE10+ */
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%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
display: block;
padding: 0;
text-decoration: none;
color: #fff;
font-size: 12px;
font-weight: bolder;
text-shadow: #000 0 -1px 1px;
width: 90px;
text-align: center;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #000;
-webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
-moz-transition: text-shadow .7s ease-out, background .7s ease-out;
-moz-box-shadow: white 7px 5px 20px;
-webkit-box-shadow:white 7px 5px 20px;
box-shadow: white 7px 5px 20px;
}
ul.menu .submenu{
display: none;
top: -30px;
position: absolute;
/*opacity: 0;*/
}
ul.menu .submenu li{
list-style-type: none;
}
ul.menu li:hover .submenu{
display: block;
top: -2px;
/*opacity: 1;*/
animation:mymove 1.2s linear;
-moz-animation:mymove 1.2s linear; /* Firefox */
-webkit-animation:mymove 1.2s linear; /* Safari and Chrome */
-o-animation:mymove 1.2s linear; /* Opera */
-ms-animation:mymove 1.2s linear; /* IE */
}
@keyframes mymove
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-ms-keyframes mymove /* IE */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
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: 35px 93px 0;
}
ul.menu .submenu li:last-child a{
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:10px;
-moz-border-top-left-radius: 2px;
-moz-border-radius-bottomleft:10px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius: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;
}
ul.menu .submenu li:nth-of-type(2) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(3) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(4) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(5) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(6) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(7) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
CSS的主要变化:
- 将LI的位置更改为相对位置并删除其子位置固定,以便LI的大小将包括其所有子位置;这一步是至关重要的,因为它将使li:hover始终工作,即使鼠标可以移出链接"Numbers";
- 在LI而不是子菜单上应用z-index,恐怕这应该更合理,因为我们希望整个菜单应该在顶部前面;
看看这个W3School的解释
它说你可以在任何你想要的时候指定一个过渡,有多个过渡,以及更多你可以用CSS3做的事情。一定要好好学习这个教程,它会对你有很大的帮助。
相关文章:
- 秒数转换波斯数字
- 如何在javascript中将秒转换为分钟和小时
- 如何使用javascript将秒转换为分钟.
- 将音频第二次转换为分钟和秒格式
- 无法将秒转换为HH:MM:SS
- 如何使用moment.js将秒转换为时间格式(YYYY:MM:DD HH:MM:ss)
- 在 javascript 中将 24 小时时间转换为 12 小时,运行秒数
- 将触摸事件转换为鼠标事件仅每秒有效一次
- 将秒实时转换为小时和分钟
- 将字符串转换为秒数
- 将秒转换为天,小时,分钟和秒
- 获取一个像字符串这样的数字,转换它并每秒添加一个
- 从日期转换为 ISO 字符串中删除秒/毫秒
- 转换地段图,使其以 60 秒的间隔动态更新
- 将秒转换为时间格式
- 使用javascript将秒转换为{H小时MM分钟}时间格式
- 将数千秒转换为moment.js中的h:mm:ss
- 将秒转换为月
- 将秒转换为HH:mm:ss
- Javascript将秒转换为分钟