你的位置:首页 > 网页设计

[网页设计]手机体验细节小动画


1.展开收起

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title> 展开收起 </title>  <style>    .m-list { background-color: #fff; border-top: 1px #e0e0e0 solid; border-bottom: 1px #e0e0e0 solid; overflow: hidden; }    .m-list .hd { position: relative; z-index: 10; height: 40px; line-height: 40px; background-color: #fff; cursor: pointer; }    .m-list .tit { font-size: 14px; margin: 0; }    .m-list .more { -webkit-transform: rotate(0deg); transform: rotate(0deg); float: right; width: 40px; height: 40px; text-align: center; color: #ccc; font-size: 12px; }    .m-list .bd { height: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); border-top: 1px #e0e0e0 dashed; overflow: hidden; }    .m-list .hd.active + .bd { height: auto; transform: translateY(0); padding: 10px 0; }    .m-list .hd.active .more { -webkit-transform: rotate(180deg); transform: rotate(180deg); }    .m-list .more, .m-list .bd { -webkit-transition: all 1s; transition: all 1s; }  </style></head><body><div class="m-list J_List">  <div class="hd active">    <span class="more">▲</span>    <h2 class="tit">点我展开/收起</h2>  </div>  <div class="bd">    世界那么大,我想去看看~<br/>    世界那么大,我想去看看~<br/>    世界那么大,我想去看看~<br/>    世界那么大,我想去看看~<br/>  </div></div>世界不是你想看,想看就能看 - -<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script><script>  $('.J_List .hd').on('click', function(){    $(this).toggleClass('active');  });</script></body></html>

View Code

2.TAB导航动画切换

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title> TAB导航动画切换 </title>  <style>    .m-tab2 {      position: relative;      overflow: hidden;      background-color: #f0f6f8    }    .m-tab2 .item {      float: left;      text-align: center;      height: 40px;      line-height: 40px;      border-top: 1px #e0e0e0 solid;      border-bottom: 1px #e0e0e0 solid;      font-size: 14px;      color: #333;      -webkit-box-sizing: border-box;      box-sizing: border-box    }    .m-tab2 .item:not(:first-child) {      border-left: 1px #e0e0e0 solid    }    .m-tab2 .active {      background-color: #fff;      color: #fe6601    }    .m-tab2 .scrollbar {      position: absolute;      z-index: 10;      left: 0;      bottom: 0;      height: 2px;      background-color: #fe6601;      -webkit-transition: transform 300ms ease-in-out;      transition: transform 300ms ease-in-out    }    .m-tab2 .item:nth-of-type(1).active ~ .scrollbar {      transform: translateX(0);      -webkit-transform: translateX(0)    }    .m-tab2 .item:nth-of-type(2).active ~ .scrollbar {      transform: translateX(100%);      -webkit-transform: translateX(100%)    }    .m-tab2 .item:nth-of-type(3).active ~ .scrollbar {      transform: translateX(200%);      -webkit-transform: translateX(200%)    }    .m-tab2 .item:nth-of-type(4).active ~ .scrollbar {      transform: translateX(300%);      -webkit-transform: translateX(300%)    }    .m-tab2 .item:nth-of-type(5).active ~ .scrollbar {      transform: translateX(400%);      -webkit-transform: translateX(400%)    }    .m-tab2 .item:nth-of-type(6).active ~ .scrollbar {      transform: translateX(500%);      -webkit-transform: translateX(500%)    }    .wb50 { width: 50%; }  </style></head><body><div class="m-tab2 J_Tab">  <a class="item wb50 active" href="javascript:;">栏目1</a>  <a class="item wb50" href="javascript:;">栏目2</a>  <i class="scrollbar wb50"></i></div><script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script><script>  $('.J_Tab .item').on('click', function(){    $(this).addClass('active').siblings('.item').removeClass('active');  });</script></body></html>

View Code

3.列表动画

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title> 列表动画 </title>  <style>    .list { height: 100px; line-height: 100px; text-align: center; margin-bottom: 10px; background-color: #ccc; border-top: 1px #e0e0e0 solid; border-bottom: 1px #e0e0e0 solid; }    .anim-slide:nth-of-type(1) {      -webkit-animation: slide .5s ease 0s backwards;      animation: slide .5s ease 0s backwards    }    .anim-slide:nth-of-type(2) {      -webkit-animation: slide .5s ease .1s backwards;      animation: slide .5s ease .1s backwards    }    .anim-slide:nth-of-type(3) {      -webkit-animation: slide .5s ease .2s backwards;      animation: slide .5s ease .2s backwards    }    .anim-slide:nth-of-type(4) {      -webkit-animation: slide .5s ease .2s backwards;      animation: slide .5s ease .2s backwards    }    .anim-slide:nth-of-type(5) {      -webkit-animation: slide .5s ease .2s backwards;      animation: slide .5s ease .2s backwards    }    .anim-slide:nth-of-type(6) {      -webkit-animation: slide .5s ease .2s backwards;      animation: slide .5s ease .2s backwards    }    @-webkit-keyframes slide {      0% {        opacity: 0;        -webkit-transform: translate3d(0,32px,0);        transform: translate3d(0,32px,0)      }      100% {        opacity: 1;        -webkit-transform: translate3d(0,0,0);        transform: translate3d(0,0,0)      }    }    @keyframes slide {      0% {        opacity: 0;        -webkit-transform: translate3d(0,32px,0);        transform: translate3d(0,32px,0)      }      100% {        opacity: 1;        -webkit-transform: translate3d(0,0,0);        transform: translate3d(0,0,0)      }    }  </style></head><body><div class="list anim-slide">列表</div><div class="list anim-slide">列表</div><div class="list anim-slide">列表</div><div class="list anim-slide">列表</div><div class="list anim-slide">列表</div></body></html>

View Code

 

待续...