CSS3：实现动态底部导航，点击滚动效果 1

sunly_

已于 2022-06-06 09:22:38 修改

阅读量640

点赞数

分类专栏： css 文章标签： css3 css 前端

于 2021-12-17 11:35:17 首次发布

本文链接：https://blog.csdn.net/qq_40745143/article/details/121992714

版权

css 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Hello H5</title>
		<style type="text/css">
			:root {
				--clr: #222327;
			}

			body {
				margin: 0;
				padding: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
				background: var(--clr);
				box-sizing: border-box;
			}

			ul,
			li,
			a {
				list-style: none;
				font-style: normal;
				text-decoration: none;
			}

			.nav {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 70px;
				padding: 0 30px;
				background: #fff;
				border-radius: 6px;
			}

			ul {
				padding: 0;
				height: 70px;
				display: flex;
				align-items: center;
				position: relative;
				border-radius: 6px;
			}

			li {
				position: relative;
				width: 70px;
				height: 70px;
			}

			a {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 100%;
				height: 70px;
				z-index: 2;
			}

			.icon {
				transition: 0.5s;
			}

			.text {
				position: absolute;
				bottom: 0;
				color: var(--clr);
				transition: 0.5s;
				opacity: 0;
			}

			li.active .icon {
				transform: translateY(-35px);
			}

			li.active .text {
				transform: translateY(-10px);
				opacity: 1;
			}

			.bg {
				position: absolute;
				left: 0;
				top: -50%;
				z-index: 1;
				width: 70px;
				height: 70px;
				margin-left: -6px;
				margin-top: -6px;
				background: #29fd53;
				border-radius: 50%;
				border: 6px solid var(--clr);
				transition: 0.5s;
			}

			.bg:after {
				left: -26px;
				position: absolute;
				top: 40px;
				margin-top: -6px;
				content: '';
				display: block;
				width: 20px;
				height: 20px;
				background: transparent;
				border-radius: 50%;
				box-shadow: 6px -10px var(--clr);
			}

			.bg:before {
				right: -26px;
				position: absolute;
				top: 40px;
				margin-top: -6px;
				content: '';
				display: block;
				width: 20px;
				height: 20px;
				background: transparent;
				border-radius: 50%;
				box-shadow: -6px -10px var(--clr);
			}

			li:nth-child(1).active~.bg {
				transform: translateX(calc(70px*0));
			}

			li:nth-child(2).active~.bg {
				transform: translateX(calc(70px*1));
			}

			li:nth-child(3).active~.bg {
				transform: translateX(calc(70px*2));
			}

			li:nth-child(4).active~.bg {
				transform: translateX(calc(70px*3));
			}

			li:nth-child(5).active~.bg {
				transform: translateX(calc(70px*4));
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li class="active">
					<a href="#">
						<img src="./home.png" class="icon">
						<span class="text">HOME</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./goods.png" class="icon">
						<span class="text">GOODS</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./cart.png" class="icon">
						<span class="text">CART</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./mine.png" class="icon">
						<span class="text">MINE</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./mine.png" class="icon">
						<span class="text">MINE</span>
					</a>
				</li>
				<div class="bg"></div>
			</ul>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$('.nav').on('click', 'li', function(event) {
			var index = $(this).index(); //获取到点击的.nav下，item的索引
			$(".nav li").eq(index).addClass("active").siblings().removeClass("active"); //点击项高亮显示
		});
	</script>
</html>

在这里插入图片描述

sunly_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
CSS3：实现动态底部导航，点击滚动效果 1

<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Hello H5</title> <style type="text/css"> :ro
复制链接

扫一扫