4款基于jquery的列表图标动画切换特效
网页中列表图标随处可见，特别是移动网页上，基本上的导航都采用了列表图标。今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效。喜欢的网友赶紧收藏吧。
实现的代码。
html代码：
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>
The Hamburger Menu</h1>
<p>
(click)</p>
<div class="navToggle1">
<div class="icon-left">
</div>
<div class="icon-right">
</div>
</div>
<div class="navToggle2">
<div class="icon">
</div>
</div>
<div class="navToggle3">
<div class="icon">
</div>
</div>
<div class="navToggle4">
<div class="icon">
</div>
</div>
<div class="navToggle5">
<div class="icon">
</div>
</div>
<div class="navToggle6">
<div class="icon">
</div>
</div>
<div class="navToggle7">
<div class="icon-E">
</div>
<div class="icon-X">
</div>
</div>
<div class="navToggle8">
<div class="icon-E">
</div>
<div class="icon-X">
</div>
</div>
<div class="navToggle9">
<div class="icon">
</div>
</div>
<div class="navToggle10">
<div class="icon">
</div>
</div>
<div class="navToggle11">
<div class="icon-left">
</div>
<div class="icon-right">
</div>
</div>
<div class="navToggle12">
<div class="icon">
</div>
</div>
<div class="navToggle13">
<div class="icon">
</div>
</div>
</div>
</div>
</div>
css代码：
body
{
background-color: #efefef;
font-family: 'Roboto' , sans-serif;
color: #212121;
} .container
{
position: relative;
max-width: 420px;
width: 100%;
margin: 0 auto;
} h1, p
{
text-align: center;
} .navToggle1
{
position: absolute;
width: 60px;
height: 120px;
top: 60px;
left: 0px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle1 .icon-left
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 30px;
top: 60px;
background-color: #212121;
}
.navToggle1 .icon-left:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.navToggle1 .icon-left:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.navToggle1 .icon-left:hover
{
cursor: pointer;
}
.navToggle1 .icon-right
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 30px;
top: 60px;
background-color: #212121;
left: 30px;
}
.navToggle1 .icon-right:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.navToggle1 .icon-right:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.navToggle1 .icon-right:hover
{
cursor: pointer;
}
.navToggle1.open .icon-left
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
background: transparent;
}
.navToggle1.open .icon-left:before
{
-webkit-transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
}
.navToggle1.open .icon-left:after
{
-webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
}
.navToggle1.open .icon-right
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
background: transparent;
}
.navToggle1.open .icon-right:before
{
-webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
}
.navToggle1.open .icon-right:after
{
-webkit-transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -4px);
transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -4px);
} .navToggle2
{
position: absolute;
width: 60px;
height: 120px;
top: 60px;
left: 120px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle2 .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 60px;
background-color: #212121;
}
.navToggle2 .icon:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.navToggle2 .icon:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.navToggle2 .icon:hover
{
cursor: pointer;
}
.navToggle2.open .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
background: transparent;
}
.navToggle2.open .icon:before
{
-webkit-transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
}
.navToggle2.open .icon:after
{
-webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
} .navToggle3
{
position: absolute;
width: 60px;
height: 120px;
top: 60px;
left: 240px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle3 .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 0px;
width: 60px;
top: 60px;
background-color: #212121;
}
.navToggle3 .icon:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.navToggle3 .icon:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.navToggle3 .icon:hover
{
cursor: pointer;
}
.navToggle3.open .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle3.open .icon:before
{
-webkit-transform: rotateZ(135deg) scaleX(1.25) translate(13px, -13px);
transform: rotateZ(135deg) scaleX(1.25) translate(13px, -13px);
}
.navToggle3.open .icon:after
{
-webkit-transform: rotateZ(-135deg) scaleX(1.25) translate(12px, 12px);
transform: rotateZ(-135deg) scaleX(1.25) translate(12px, 12px);
} .navToggle4
{
position: absolute;
width: 60px;
height: 120px;
top: 60px;
left: 360px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle4 .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 0px;
width: 60px;
top: 60px;
background-color: #212121;
}
.navToggle4 .icon:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.navToggle4 .icon:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.navToggle4 .icon:hover
{
cursor: pointer;
}
.navToggle4.open .icon
{
-webkit-transition: 0.5s;
transition: 0.5s;
}
.navToggle4.open .icon:before
{
-webkit-transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
}
.navToggle4.open .icon:after
{
-webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
} .navToggle5
{
position: absolute;
width: 60px;
height: 120px;
top: 180px;
left: 0px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle5 .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 60px;
background-color: #212121;
}
.navToggle5 .icon:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.navToggle5 .icon:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.navToggle5 .icon:hover
{
cursor: pointer;
}
.navToggle5.open .icon
{
-webkit-transition: 0.5s;
transition: 0.5s;
}
.navToggle5.open .icon:before
{
-webkit-transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.navToggle5.open .icon:after
{
-webkit-transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
} .navToggle6
{
position: absolute;
width: 60px;
height: 120px;
top: 180px;
left: 120px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle6 .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 60px;
background-color: #212121;
}
.navToggle6 .icon:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.navToggle6 .icon:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.navToggle6 .icon:hover
{
cursor: pointer;
}
.navToggle6.open .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
.navToggle6.open .icon:before
{
-webkit-transform: rotateZ(45deg) scaleX(0.75) translate(20px, -6px);
transform: rotateZ(45deg) scaleX(0.75) translate(20px, -6px);
}
.navToggle6.open .icon:after
{
-webkit-transform: rotateZ(-45deg) scaleX(0.75) translate(20px, 6px);
transform: rotateZ(-45deg) scaleX(0.75) translate(20px, 6px);
} .navToggle7
{
position: absolute;
width: 60px;
height: 120px;
top: 180px;
left: 240px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle7 .icon-E
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 60px;
background-color: #212121;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.navToggle7 .icon-E:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.navToggle7 .icon-E:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.navToggle7 .icon-E:hover
{
cursor: pointer;
}
.navToggle7 .icon-X
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 0px;
width: 60px;
top: 60px;
background-color: #212121;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.navToggle7 .icon-X:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
-webkit-transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
}
.navToggle7 .icon-X:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
-webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}
.navToggle7 .icon-X:hover
{
cursor: pointer;
}
.navToggle7.open .icon-E
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.navToggle7.open .icon-X
{
-webkit-transition: 0.5s;
transition: 0.5s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
} .navToggle8
{
position: absolute;
width: 60px;
height: 120px;
top: 180px;
left: 360px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle8 .icon-E
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 60px;
background-color: #212121;
-webkit-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
transform-origin: 0px 0px;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.navToggle8 .icon-E:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.navToggle8 .icon-E:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.navToggle8 .icon-E:hover
{
cursor: pointer;
}
.navToggle8 .icon-X
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 0px;
width: 60px;
top: 60px;
background-color: #212121;
-webkit-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
transform-origin: 0px 0px;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
}
.navToggle8 .icon-X:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
-webkit-transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
}
.navToggle8 .icon-X:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
-webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}
.navToggle8 .icon-X:hover
{
cursor: pointer;
}
.navToggle8.open .icon-E
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.navToggle8.open .icon-X
{
-webkit-transition: 0.5s;
transition: 0.5s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
} .navToggle9
{
position: absolute;
width: 60px;
height: 120px;
top: 305px;
left: 0px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle9 .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 0px;
width: 60px;
top: 60px;
background-color: #212121;
top: 30px;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
-webkit-transform-origin: 30px 30px;
-ms-transform-origin: 30px 30px;
transform-origin: 30px 30px;
}
.navToggle9 .icon:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 60px;
background-color: #212121;
content: "";
top: 20px;
top:;
}
.navToggle9 .icon:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 60px;
background-color: #212121;
content: "";
top: 20px;
top:;
left: 30px;
}
.navToggle9 .icon:hover
{
cursor: pointer;
}
.navToggle9.open .icon
{
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
.navToggle9.open .icon:before
{
width: 22.5px;
}
.navToggle9.open .icon:after
{
-webkit-transform-origin: 30px 60px;
-ms-transform-origin: 30px 60px;
transform-origin: 30px 60px;
-webkit-transform: scaleX(0.75);
-ms-transform: scaleX(0.75);
transform: scaleX(0.75);
}
.navToggle9.play .icon
{
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
.navToggle9.play .icon:before
{
width: 500px;
}
.navToggle9.play .icon:after
{
-webkit-transform-origin: 30px 60px;
-ms-transform-origin: 30px 60px;
transform-origin: 30px 60px;
-webkit-transform: scaleX(2);
-ms-transform: scaleX(2);
transform: scaleX(2);
} .navToggle10
{
position: absolute;
width: 60px;
height: 120px;
top: 300px;
left: 120px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle10 .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 60px;
background-color: #212121;
}
.navToggle10 .icon:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.navToggle10 .icon:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.navToggle10 .icon:hover
{
cursor: pointer;
}
.navToggle10.open .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transform: rotateZ(-180deg);
transform: rotateZ(-180deg);
}
.navToggle10.open .icon:before
{
-webkit-transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.navToggle10.open .icon:after
{
-webkit-transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
} .navToggle11
{
position: absolute;
width: 60px;
height: 120px;
top: 300px;
left: 240px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle11 .icon-left
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 4px;
width: 15px;
top: 60px;
background-color: #212121;
}
.navToggle11 .icon-left:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 15px;
height: 4px;
background-color: #212121;
content: "";
top: -10px;
}
.navToggle11 .icon-left:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 15px;
height: 4px;
background-color: #212121;
content: "";
top: 10px;
}
.navToggle11 .icon-left:hover
{
cursor: pointer;
}
.navToggle11 .icon-right
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 4px;
width: 15px;
top: 60px;
background-color: #212121;
left: 15px;
}
.navToggle11 .icon-right:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 15px;
height: 4px;
background-color: #212121;
content: "";
top: -10px;
}
.navToggle11 .icon-right:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 15px;
height: 4px;
background-color: #212121;
content: "";
top: 10px;
}
.navToggle11 .icon-right:hover
{
cursor: pointer;
}
.navToggle11.open .icon-left
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
background: transparent;
}
.navToggle11.open .icon-left:before
{
-webkit-transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
}
.navToggle11.open .icon-left:after
{
-webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
}
.navToggle11.open .icon-right
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
background: transparent;
}
.navToggle11.open .icon-right:before
{
-webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
}
.navToggle11.open .icon-right:after
{
-webkit-transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
} .navToggle12
{
position: absolute;
width: 60px;
height: 120px;
top: 300px;
left: 315px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle12 .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 4px;
width: 30px;
top: 60px;
background-color: #212121;
}
.navToggle12 .icon:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #212121;
content: "";
top: -10px;
}
.navToggle12 .icon:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #212121;
content: "";
top: 10px;
}
.navToggle12 .icon:hover
{
cursor: pointer;
}
.navToggle12.open .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
background: transparent;
}
.navToggle12.open .icon:before
{
-webkit-transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
}
.navToggle12.open .icon:after
{
-webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
} .navToggle13
{
position: absolute;
width: 60px;
height: 120px;
top: 300px;
left: 390px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navToggle13 .icon
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
height: 4px;
width: 30px;
top: 60px;
background-color: #212121;
}
.navToggle13 .icon:before
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #212121;
content: "";
top: -10px;
}
.navToggle13 .icon:after
{
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #212121;
content: "";
top: 10px;
}
.navToggle13 .icon:hover
{
cursor: pointer;
}
.navToggle13.open .icon
{
-webkit-transition: 0.5s;
transition: 0.5s;
}
.navToggle13.open .icon:before
{
-webkit-transform: rotateZ(-45deg) scaleX(0.75) translate(-10px, -3px);
transform: rotateZ(-45deg) scaleX(0.75) translate(-10px, -3px);
}
.navToggle13.open .icon:after
{
-webkit-transform: rotateZ(45deg) scaleX(0.75) translate(-10px, 3px);
transform: rotateZ(45deg) scaleX(0.75) translate(-10px, 3px);
}
js代码：
$(".navToggle1").click(function () {
$(this).toggleClass("open");
});
$(".navToggle2").click(function () {
$(this).toggleClass("open");
});
$(".navToggle3").click(function () {
$(this).toggleClass("open");
});
$(".navToggle4").click(function () {
$(this).toggleClass("open");
});
$(".navToggle5").click(function () {
$(this).toggleClass("open");
});
$(".navToggle6").click(function () {
$(this).toggleClass("open");
});
$(".navToggle7").click(function () {
$(this).toggleClass("open");
});
$(".navToggle8").click(function () {
$(this).toggleClass("open");
});
$(".navToggle9").click(function () {
$(this).toggleClass("open");
});
$(".navToggle10").click(function () {
$(this).toggleClass("open");
});
$(".navToggle11").click(function () {
$(this).toggleClass("open");
});
$(".navToggle12").click(function () {
$(this).toggleClass("open");
});
$(".navToggle13").click(function () {
$(this).toggleClass("open");
});
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/9330
4款基于jquery的列表图标动画切换特效的更多相关文章
- 一款基于jquery超炫的图片切换特效
今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览 源码下载 来看下实现的 ...
- 10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
- 一款基于jquery和css3的头像恶搞特效
今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览 源码下载 实现的代 ...
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 8款基于Jquery的WEB前端动画特效
1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...
- 一款基于jQuery的超酷动画幻灯片
今天给大家带来一款仿步步高vivo手机网站的一款首页焦点幻灯展示特效,带有超酷炫的动画特效,动态效果丝毫不逊色于flash动画,具有很强的视觉冲击力,推荐下载学习! 提示:兼容360.FireFox. ...
- 基于jQuery 3D旋转明星人物展示特效
分享一款基于jQuery 3D旋转明星人物展示特效.这是一款来自百度换肤活动的明星旋转展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
随机推荐
- Spring.Net Aop 学习
浅析Spring.net 中的Aop使用 Spring.NET 中的 AOP .NET中AOP的几种实现方案 Spring.NET学习笔记12——面向切面编程(基础篇) Level 300
- 我认为比较有用的快捷键（Eclipse）
http://hi.baidu.com/%D4%AD%CA%BC%C1%F7%C0%CB%D5%DF/blog/item/e497b94dd1b0b92daec3ab36.html 我认为比较有用的快 ...
- OpenStack+Ceph存储空间回收《转》
转自:http://blog.csdn.net/wytdahu/article/details/48288681 问题描述 在OpenStack云环境的部署中,存储通常具备Thin provision ...
- 让你的APP和你的服务器畅快通讯
做安卓开发有很多时候都是要和web交互的,我们很难制作本地应用,这次把小弟整出来的安卓和服务器通讯贡献出来,希望能帮到需要的朋友,同时也是加深印象. 我们先来搭建安卓客户端,首先写好布局文件: 1.布 ...
- CoreText实现图文混排之文字环绕及点击算法
系列文章: CoreText实现图文混排:http://www.jianshu.com/p/6db3289fb05d CoreText实现图文混排之点击事件:http://www.jianshu.co ...
- oracle中的一些基本概念
Oracle数据库的物理文件是存储在磁盘上的数据文件.控制文件和日志文件的总称.数据文件和日志文件是数据库中最重要的文件.数据库由若干个表空间组成,表空间由表组成,表由段组成,段由区间组成,区间由数据 ...
- Oracle分组函数以及数据分组
简单总结一下对于数据的分组和分组函数. 本文所举实例,数据来源oracle用户scott下的emp,dept ,salgrade 3表:数据如下: 一.分组函数 1.sum()求和函数.max()求最 ...
- mySQL把秒转换成日期
mysql> SELECT SEC_TO_TIME (3600); +--------------------+ | SEC_TO_TIME (3600) | +---------------- ...
- Android 在已有的项目上创建新的项目
原工程 右键Copy 再右键点Paste 改新的工程名
- Python ljust() 方法
描述 ljust() 方法返回一个原字符串左对齐,并使用指定字符填充至指定长度的新字符串,默认的填充字符为空格.如果指定的长度小于原字符串的长度则返回原字符串. 语法 ljust() 方法语法: S. ...