我只想使用css为菜单项设置动画。我已应用动画,但它不起作用。任何类型的动画都可以。我是css的新手。请有人帮帮我。
这是JS小提琴我现在做的事情: Demo
这是HTML部分..
<div id="back">
<div class="wrapper">
<div class="container">
<ul id="menu" class="menu">
<li id="l1" runat="server" class="active"><a class="link1" href="Home.aspx" runat="server" id="a1">Home</a></li>
<li id="l2" runat="server"><a runat="server" class="link1" href="?id=History" id="a2">About MCB<img src="Images/Other%20Images/dropdown.png" style="position:absolute;margin-right:0px; top: -3px; left: 138px;"/></a>
<ul>
<li id="l21" runat="server"><a runat="server" class="link1" href="?id=Members" id="a21">Member details</a></li>
<li id="l22" runat="server"><a runat="server" class="link1" style="width:116px;" href="?id=History" id="a22">History</a></li>
</ul>
</li>
<li id="l3" runat="server"><a runat="server" href="?id=Photos" class="link1" id="a3">Gallery<img src="Images/Other%20Images/dropdown.png" style="position:absolute;top: -3px; float:right;right:-8px; z-index:1000;"/></a>
<ul id="gl">
<li id="L31" runat="server"><a style="width:inherit" runat="server" class="link1" href="?id=Photos" id="a15">Photos</a></li>
<li id="L32" runat="server"><a style="width:inherit" runat="server" class="link1" href="?id=Videos" id="a16">Videos</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
这是Css:
.wrapper {
width: 100%;
height: 40px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top: 2px ridge #939393;
position: relative;
top:19px;
margin-bottom: 30px;
}
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 30px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
position:relative;
}
ul.menu li {
list-style: none;
float:left;
height: 39px;
display:inline-block;
text-align: center;
position:relative;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul.menu li ul li
{
display: block;
float: none;
clear: left;
animation-duration:5s;
animation-fill-mode:both;
animation-play-state:paused;
animation-direction:alternate;
animation:ease-in-out;
}
.menu li:not(:hover) ul {
display: none;
}
.menu li:hover ul {
display: inline-block;
}
ul.menu li ul li a
{
clear: left;
line-break: strict;
display:inline-block;
position:relative;
font-size:18px;
}
.link1 {
display: block;
text-decoration: none;
font-family:'Adobe Garamond Pro';
color: White;
font-size: 22px;
font-weight:bolder;
padding: 0 30px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 39px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-moz-transition-property: background;
transition-property:background;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.link1:hover {
background: transparent none;
}
ul li.active .link1{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
color:black;
background:-o-linear-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
background:linear-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
我哪里出错了。请告诉我。
答案 0 :(得分:1)
我更新了你的小提琴,使下拉菜单在循环中淡入淡出。这不是最好的例子,但它可以帮助你理解。
您只是错过了实际的关键帧动画,然后错过了对该动画名称的引用。非常简单,应该让您了解如何扩展它以动画其他元素及其属性。不要忘记添加所有适当的供应商前缀!
@-webkit-keyframes fadeInOut {
0% { opacity: 1; }
50% { opacity: .25; }
100% {opacity: 1; }
}
ul.menu li ul li
{
display: block;
float: none;
clear: left;
-webkit-animation-name: fadeInOut;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 3s;
}
如果您想了解有关CSS关键帧动画的更多信息,请查看有关CSS技巧的精彩文章。
http://css-tricks.com/snippets/css/keyframe-animation-syntax/