手风琴的制作

 

手风琴的制作，手风琴，听起来很高级的样子，其实想要实现它的功能其实就是一个CSS3动画的功能。下面是要实现的功能。

1. 首先先为他设置它的CSS的样式，

<div class="rightNav">

        <a href=""><em>Y</em>帅</a>

        <a href=""><em>Y</em>高</a>

        <a href=""><em>的</em>离离原上草</a>

        <a href=""><em>专</em>陌陌君子</a>

        <a href=""><em>属</em>一岁一枯荣</a>

        <a href=""><em>网</em>类和对象</a>

        <a href=""><em>站</em>将军百战</a>

        <a href=""><em>系</em>栀子花</a>

        <a href=""><em>统</em>平静如水</a>

        <a href=""><em>导</em>清潭深渊</a>

        <a href=""><em class="bgOrange">航</em>绿草如茵</a>

        <a href=""><em class="bgOrange">11</em>红红火火</a>

        <a href=""><em>T1</em>其它基础效果</a>

        <a href=""><em class="bgpurple">J</em>平淡之路</a>

</div>

      

       然后，给它们写上CSS3动画的参数值，要想实现动画的效果的话就给它们设置一个定时的效果，

transition-delay：的意思是规定过渡效果何时开始，

transform：转换是使元素改变形状、尺寸和位置的一种效果

.rightNav:hover a{

       transform: translateX(0);

}

.rightNav a:nth-of-type(1){

       transition-delay: 0.05s;

}

.rightNav a:nth-of-type(2){

       transition-delay: 0.1s;

}

.rightNav a:nth-of-type(3){

       transition-delay: 0.15s;

}

.rightNav a:nth-of-type(4){

       transition-delay: 0.2s;

}