纯css实现流水点击切换动画效果-html代码-BFW代码库

代码语言：html

代码描述：纯css实现流水点击切换动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  font-family: "proxima-nova", sans-serif;
  color: white;
  display: flex;
  height: 100vh;
  background: #111;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  background: repeating-linear-gradient(
      0deg,
      hsla(103, 11%, 32%, 0.09) 0px,
      hsla(103, 11%, 32%, 0.09) 1px,
      transparent 1px,
      transparent 11px
    ),
    repeating-linear-gradient(
      90deg,
      hsla(103, 11%, 32%, 0.09) 0px,
      hsla(103, 11%, 32%, 0.09) 1px,
      transparent 1px,
      transparent 11px
    ),
    linear-gradient(90deg, hsl(317, 13%, 6%), hsl(317, 13%, 6%));
}
#demo {
  width: 90vw;
  height: auto;
  max-width: 720px;
  overflow: visible;
  margin: 1rem auto;
}
#icons path {
  fill: white;
}

#stretchy {
  fill: #5da662;
}

text {
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  fill: rgba(0, 0, 0, 0.5);
}

#icons g {
  cursor: pointer;
}

#icons rect {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 2px;
  rx: 8px;
  ry: 8px;
}

h1,
h2,
p {
  margin: 0;
}
h2 {
  font-weight: 400;
}
h2 span {
  font-weight: 700;
  color: #5cceee;
}

a {
  background: #5cceee;
  color: white;
  padding: 10px;
  text-decoration: none;
  border-radius: 3px;
  margin-top: 10px;
}

a:hover {
  background: white;
  color: #5cceee;
}

.branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 20px;
}
</style>

</head>
<body translate="no">
<h1>Easy Stretchy Nav</h1>
<svg id="demo" xmlns="http://www.w3.org/2000/svg" width="600" height="120" viewBox="0 0 600 120">
<rect id="stretchy" x="20" y="30" width="60" height="60" rx="8px" ry="8px" stroke-miterlimit="10" />
<g id="icons">
<g>
<rect x="20" y="30" width="60" height="60" stroke-miterlimit="10" />
<path d="M38.34,61.55,31,66.77l-1-1.46,8.34-6ZM50,45.7l13.19,9.4,1-1.47L50,43.47,35.8,53.65l1,1.45ZM60.45,62.3l5.69,4V76.53H52.71V68.72h-5.4v7.81H33.88V66.35l5.67-4V54.65L50,47.18l10.45,7.47ZM42.82,61.1h5.26V56.17H42.82Zm.58,7.51H37.64v3.11H43.4Zm13.22,0v3.11h5.76V68.61Zm.58-7.51V56.17H51.93V61.1Zm4.46-1.78v2.23L69,66.83l1-1.48Z" />
</g>
<g>
<rect x="120" y="30" width="60" height="60" stroke-miterlimit="10" />
<path d="M155.59,80c-23.33,0-23.42-12.35-19.05-16.72,3.9-3.9,11-4.51,1.47-10.72a1.19,1.19,0,0,0,.2-.19c6.53,2.42,8,3.32,8,6.05,0,1.49-2,2.91-3.67,4.57-3.89,3.9-3.47,9.69,10.17,9C153.48,73.54,155.59,80,155.59,80ZM139.45,43.64c0,1.86-1.2,2.56-2,4.28-1,2.25-.93,3.45-1.68,3.45s-.66-1.2-1.67-3.45c-.77-1.72-2-2.42-2-4.28A3.65,3.65,0,0,1,135.81,40h0A3.65,3.65,0,0,1,139.45,43.64Zm-1.71,0a1.93,1.93,0,1,0-1.93,1.92A1.92,1.92,0,0,0,137.74,43.64Zm30.09,20c0,3.88-2.51,5.34-4.12,8.93-2.1,4.71-1.92,7.22-3.49,7.22s-1.39-2.51-3.49-7.22c-1.61-3.59-4.11-5.05-4.11-8.93a7.62,7.62,0,0,1,7.6-7.61h0A7.62,7.62,0,0,1,167.83,63.69Zm-3.59,0a4,4,0,1,0-4,4A4,4,0,0,0,164.24,63.68Z" />
</g>
<g>
<rect x="220" y="30" width="60" height="60" stroke-miterlimit="10" />
<path d="M245.17,50.79a1.39,1.39,0,0,1,.72-1.83l4.76-2.08L253,52.22l2.6-1.13-2.33-5.34L258,43.67a1.4,1.4,0,0,1,1.83.72l5.29,12.14a1.39,1.39,0,0,1-.72,1.83l-12.13,5.29a1.4,1.4,0,0,1-1.83-.72Zm24.54,18c-.24.3-.92.15-1.52-.32L262.6,64a2,2,0,0,1-.21-.19l-.82.35-3.24,4a5.12,5.12,0,0,0-1.07-.89l1.59-2-3.06,1.31a5.64,5.64,0,0,0-1.49-.2,5.53,5.53,0,0,0-4.85,2.87,1,1,0,0,1-1.06-.57l-8.62-19.55a1.62,1.62,0,0,0-1.35-.88H238a1.23,1.23,0,0,1-1.14.74h-4.09a1.22,1.22,0,0,1-1.13-.74H231a1,1,0,0,1-1-1v-.63a1,1,0,0,1,1-1h.69a1.22,1.22,0,0,1,1.13-.74h4.09a1.23,1.23,0,0,1,1.14.74h2.08a1.59,1.59,0,0,1,1.34.88l8.29,18.8A1,1,0,0,0,251,66l16.71-7.18a1,1,0,0,1,1.25.52l.24.6a1,1,0,0,1-.53,1.24l-1.26.54,2.4,5.56C270.1,67.94,270.06,68.64,269.71,68.79ZM268,66.52l-1.85-4.29-2.29,1ZM258.78,72a4.48,4.48,0,1,1-4.48-4.48A4.48,4.48,0,0,1,258.78,72Zm-2.65,0a1.83,1.83,0,1,0-1.83,1.82A1.83,1.83,0,0,0,256.13,72Z" />
</g>
<g>
<rect x="320" y="30" width="60" height="60" stroke-miterlimit="10" />
<path d="M365.74,44.05H334.26A4.26,4.26,0,0,0,330,48.3v6.75a4.26,4.26,0,0,0,4.26,4.25h5.63V74.66a1.3,1.3,0,0,0,1.3,1.29h17.62a1.3,1.3,0,0,0,1.3-1.29V59.3h5.63A4.26,4.26,0,0,0,370,55.05V48.3A4.26,4.26,0,0,0,365.74,44.05Zm-7.85,24.13a.39.39,0,0,1-.37.........完整代码请登录后点击上方下载按钮下载查看