<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>jQuery/CSS3适应手机端的Tab页面切换插件</title> <!--图标样式和字体样式--> <link rel='stylesheet' href='./ionicons.min.css'> <!--页面框架样式--> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { justify-content: center; align-items: center; min-height: 100vh; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); } nav { width: 440px; } .wave-wrap { position: relative; width: 100%; height: 33px; overflow: hidden; margin-bottom: 0; } .wave-wrap #wave { position: absolute; width: 150px; transform-origin: bottom; transform: scaleY(0.8); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .wave-wrap #wave .path { fill: #2f3542; } .list-wrap { display: flex; width: 100%; height: 80px; background: #2f3542; list-style: none; justify-content: space-around; padding: 0 20px; } .list-wrap li { cursor: pointer; position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .list-wrap li i { position: relative; font-size: 1.5em; color: #a4b0be; z-index: 5; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .list-wrap li:before { content: ""; position: absolute; background: green; height: 80%; width: 80%; left: 10%; top: 10%; border-radius: 50%; z-index: 0; transform: scale(0); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .list-wrap li.active { margin-top: -10px; } .list-wrap li.active i { color: #2f3542; } .list-wrap li.active:before { transform: scale(1); } .list-wrap li:nth-child(1):before { background: #eccc68; } .list-wrap li:nth-child(2):before { background: #ff6b81; } .list-wrap li:nth-child(3):before { background: #7bed9f; } .list-wrap li:nth-child(4):before { background: #70a1ff; } .list-wrap li:nth-child(5):before { background: #dfe4ea; } .phone { height: 300px; width: 440px; margin: 80px auto; border: 7px solid rgba(47, 53, 66, 0.05); border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; flex-direction: column; font-family: 'Montserrat', sans-serif; } .phone .page { height: 327px; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 3em; color: rgba(47, 53, 66, 0.1); text-transform: uppercase; letter-spacing: 5pt; padding-top: 50px; } </style> </head> <body> <div class="phone"> <div class="page">Home</div> <nav> <div class="wave-wrap"> <svg version="1.1" id="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 119 26"> <path class="path" d="M120.8,26C98.1,26,86.4,0,60.4,0C35.9,0,21.1,26,0.5,26H120.8z"> </svg> </div> <ul class="list-wrap"> <li data-color="#eccc68" title="Home"> <i>首页</i> </li> <li data-color="#ff6b81" title="Profile"> <i>第一</i> </li> <li data-color="#7bed9f" title="Get a beer!"> <i>第二</i> </li> <li data-color="#70a1ff" title="Files"> <i>第三</i> </li> <li data-color="#dfe4ea" title="Settings"> <i>第四</i> </li> </ul> </nav> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> // set the first nav item as active var dis = $(".list-wrap li").eq(0); // align the wave align(dis); // align the wave on click $(".list-wrap li").click(function(){ dis = $(this); align(dis); }); function align(dis){ // get index of item var index = dis.index() + 1; // add active class to the new item $(".list-wrap li").removeClass("active"); dis.delay(100).queue(function() { dis.addClass('active').dequeue(); }); // move the wave var left = index * 80 - 98; $("#wave").css('left', left); // 鈻� this is not necessary for the navigation 鈻� // set the background color var color = dis.data('color'); $("body").css('background', color); // set the text $(".page").text(dis.attr("title")); } </script> </body> </html>
jQuery/CSS3适应手机端的Tab页面切换插件
标签:
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇:
纯CSS3流星雨动画
下一篇:
纯CSS3卡通水母动画