jquery实现底部圆滑过渡切换菜单导航条选项卡效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery实现底部圆滑过渡切换菜单导航条选项卡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ionicons.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; le.........完整代码请登录后点击上方下载按钮下载查看
网友评论0