滑动按钮(固定宽度)

滑动按钮(固定宽度)

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xMI066f3-1581038272770)(演示.gif)]

代码区

html

  <nav>
		<a href="#">Home</a>
		<a href="#">About</a>
		<a href="#">Blog</a>
		<a href="#">Portfolio</a>
		<a href="#">Contact</a>
		<div class="animation start-home"></div>
	</nav>

CSS

body {
  font-family: 'Open Sans', sans-serif; /* 字体 */
  background: #2c3e50; /* 背景 */
}

nav {
  position: relative; /* 相对定位 */
  margin: 270px auto 0; /* 外边距 */
  width: 590px; /* 宽度 */
  height: 50px; /* 高度 */
  background: #34495e;
  border-radius: 8px; /* 边框圆角 */
  font-size: 0; /* 字体大小 */
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1); /* 阴影 */
}
nav a {
  font-size: 15px;
  text-transform: uppercase; /* 大写 */
  color: white; /* 字体颜色 */
  text-decoration: none; /* 字体附加效果 */
  line-height: 50px; /* 行高 */
  position: relative; /* 相对定位 */
  z-index: 1; /* 层叠顺序 */
  display: inline-block; /* 行内盒模型 */
  text-align: center; /* 字体居中 */
}
nav .animation {
  position: absolute; /* 绝对定位 */
  height: 100%;
  top: 0;
  z-index: 0;
  background: #1abc9c;
  width: 100px;
  border-radius: 8px;
  transition: all .5s ease 0s; /* 过渡时间 */
}
a:nth-child(1) { /* 第一个元素a */
  width: 100px;
}
nav .start-home, a:nth-child(1):hover~.animation {
  width: 100px;
  left: 0;
}
a:nth-child(2) {
  width: 110px;
}
nav .start-about, a:nth-child(2):hover~.animation {
  width: 100px;
  left: 100px;
}
a:nth-child(3) {
  width: 100px;
}
nav .start-blog, a:nth-child(3):hover~.animation {
  width: 100px;
  left: 210px;
}
a:nth-child(4) {
  width: 160px;
}
nav .start-portfolio, a:nth-child(4):hover~.animation {
  width: 160px;
  left: 310px;
}
a:nth-child(5) {
  width: 120px;
}
nav .start-contact, a:nth-child(5):hover~.animation {
  width: 120px;
  left: 470px;
}

JS

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）