手机体验细节小动画
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>
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>
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>
待续...
