从外国html5网站上扒来一个鼠标经过的css3 效果，感觉很不错

鼠标经过的时候，感觉有点像一张纸卷上去的感觉。

下面是代码

<div class="main-container types">
  <div class="main wrapper clearfix">
    <article id="product_types">
      <nav id="type_nav">
        <ul class="items5">
          <li >
            <div></div>
            <a href="/Product/type/1#type_nav"><strong>VŠECHNY</strong> řada</a></li>
          <li>
            <div></div>
            <a href="/Product/type/6#type_nav"><strong>Trendy</strong> řada</a></li>
          <li>
            <div></div>
            <a href="/Product/type/7#type_nav"><strong>Classic</strong> řada</a></li>
          <li>
            <div></div>
            <a href="/Product/type/8#type_nav"><strong>Look</strong> řada</a></li>
          <li>
            <div></div>
            <a href="/Product/type/9#type_nav"><strong>Basic</strong> řada</a></li>
        </ul>
      </nav>
    </article>
  </div>
</div>

css 文件

.types NAV {
    font-size:65%;
    -webkit-transition: opacity 150ms ease-out 0ms, top 300ms ease-out 0ms;
    -moz-transition: opacity 150ms ease-out 0ms, top 300ms ease-out 0ms;
    -ms-transition: opacity 150ms ease-out 0ms, top 300ms ease-out 0ms;
    -o-transition: opacity 150ms ease-out 0ms, top 300ms ease-out 0ms;
    transition: opacity 150ms ease-out 0ms, top 300ms ease-out 0ms
}
.types NAV UL {
    width: 100%;
    margin: 0;
    padding: 0
}
.types NAV UL LI {
    width: 25%;
    float: left;
    position: relative;
    background: #d05f68;
    overflow: hidden
}
.types NAV UL LI:last-child A {
    border-right: 1px solid #9f4950
}
.types NAV UL LI A {
    color: #e39fa4;
    font-size: 1.8em;
    font-family: 'GeogrotesqueLightItalic';
    text-decoration: none;
    text-align: center;
    padding: 24px 2%;
    display: block;
    position: relative;
    border: 1px solid #9f4950;
    border-right: 0;
    -webkit-transition: color 200ms linear 0ms, border-top-color 0ms linear 0ms, border-right-color 200ms linear 0ms, border-bottom-color 200ms linear 0ms, border-left-color 200ms linear 0ms;
    -moz-transition: color 200ms linear 0ms, border-top-color 0ms linear 0ms, border-right-color 200ms linear 0ms, border-bottom-color 200ms linear 0ms, border-left-color 200ms linear 0ms;
    -ms-transition: color 200ms linear 0ms, border-top-color 0ms linear 0ms, border-right-color 200ms linear 0ms, border-bottom-color 200ms linear 0ms, border-left-color 200ms linear 0ms;
    -o-transition: color 200ms linear 0ms, border-top-color 0ms linear 0ms, border-right-color 200ms linear 0ms, border-bottom-color 200ms linear 0ms, border-left-color 200ms linear 0ms;
    transition: color 200ms linear 0ms, border-top-color 0ms linear 0ms, border-right-color 200ms linear 0ms, border-bottom-color 200ms linear 0ms, border-left-color 200ms linear 0ms
}
.types NAV UL LI A STRONG {
    color: #fff;
    font-size: 1.1111em;
    font-family: 'GeogrotesqueMediumItalic';
    text-transform: uppercase;
    display: block;
    -webkit-transition: all 200ms linear 0ms;
    -moz-transition: all 200ms linear 0ms;
    -ms-transition: all 200ms linear 0ms;
    -o-transition: all 200ms linear 0ms;
    transition: all 200ms linear 0ms
}
.types NAV UL LI.active {
    background: #fff
}
.types NAV UL LI.active A {
    color: #616161;
    border-color: #fff
}
.types NAV UL LI.active A STRONG {
    color: #616161
}
.types NAV UL LI.active DIV {
    display: none
}
.types NAV UL LI DIV {
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: skewY(25deg);
    -moz-transform: skewY(25deg);
    -ms-transform: skewY(25deg);
    -o-transform: skewY(25deg);
    transform: skewY(25deg);
    -webkit-transition: all 200ms linear 0ms;
    -moz-transition: all 200ms linear 0ms;
    -ms-transition: all 200ms linear 0ms;
    -o-transition: all 200ms linear 0ms;
    transition: all 200ms linear 0ms
}
.types NAV UL LI:hover A {
    color: #616161;
    border-color: #fff;
    -webkit-transition: color 200ms linear 0ms, border-top-color 0ms linear 200ms, border-right-color 200ms linear 0ms, border-bottom-color 200ms linear 0ms, border-left-color 200ms linear 0ms;
    -moz-transition: color 200ms linear 0ms, border-top-color 0ms linear 200ms, border-right-color 200ms linear 0ms, border-bottom-color 200ms linear 0ms, border-left-color 200ms linear 0ms;
    -ms-transition: color 200ms linear 0ms, border-top-color 0ms linear 200ms, border-right-color 200ms linear 0ms, border-bottom-color 200ms linear 0ms, border-left-color 200ms linear 0ms;
    -o-transition: color 200ms linear 0ms, border-top-color 0ms linear 200ms, border-right-color 200ms linear 0ms, border-bottom-color 200ms linear 0ms, border-left-color 200ms linear 0ms;
    transition: color 200ms linear 0ms, border-top-color 0ms linear 200ms, border-right-color 200ms linear 0ms, border-bottom-color 200ms linear 0ms, border-left-color 200ms linear 0ms
}
.types NAV UL LI:hover A STRONG {
    color: #616161
}
.types NAV UL LI:hover DIV {
    height: 100%;
    -webkit-transform: skewY(0);
    -moz-transform: skewY(0);
    -ms-transform: skewY(0);
    -o-transform: skewY(0);
    transform: skewY(0)
}

.types NAV UL.items5 LI {
    width: 20%
}


@media only screen and (min- 1024px){
.types NAV UL LI A STRONG {
display: inline;
}

}