css实现蓝色底部菜单切换滑动效果代码-html代码-BFW代码库

css实现蓝色底部菜单切换滑动效果代码

代码语言：html

代码描述：css实现蓝色底部菜单切换滑动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
    <style>
        * {
    	box-sizing:border-box
    }
    html {
    	font-size:62.5%
    }
    body {
    	font-family:Roboto
    }
    .container {
    	padding-top:80px;
    	display:flex;
    	justify-content:center;
    	align-items:center
    }
    .phone-bottom {
    	width:400px;
    	background-color:#4E3CC8;
    	height:60px;
    	border-bottom-right-radius:10px;
    	border-bottom-left-radius:10px;
    	padding:10px 15px;
    	box-shadow:0 4px 6px #4E3CC8
    }
    .phone-bottom .nav {
    	color:#fff;
    	display:flex;
    	align-items:center;
    	height:100%;
    	position:relative
    }
    .phone-bottom .nav .slide {
    	width:calc(100% / 3);
    	height:100%;
    	content:'';
    	position:absolute;
    	background-color:rgba(255,255,255,0.15);
    	z-index:2;
    	top:0;
    	border-radius:4px;
    	transform:translateX(0%);
    	transition:transform 350ms ease
    }
    .phone-bottom .nav-link {
    	color:#fff;
    	text-decoration:none;
    	flex:1;
    	display:flex;
    	align-items:center;
    	height:100%;
    	justify-content:center;
    	position:relative
    }
    .phone-bottom .nav-link.active .nav-text {
    	opacity:1
    }
    .phone-bottom .nav-link.active i {
    	transform:translateX(0%)
    }
    .phone-bottom .nav-text {
    	text-decoration:none;
    	padding-left:10px;
    	display:block;
    	font-size:1.6rem;
    	opacity:0;
    	transition:opacity 350ms ease 100ms
    }
    .phone-bottom .nav i {
    	color:#fff;
    	transform:translateX(80%);
    	transition:transform 350ms ease
    }
    .material-icons {
    	font-family:'Material Icons';
    	font-weight:normal;
    	font-style:normal;
    	font-size:24px;.........完整代码请登录后点击上方下载按钮下载查看