css的clip path实现按钮点击动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css的clip path实现按钮点击动画效果代码，现代浏览器支持。

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

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

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

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=PT+Mono&family=Poppins:wght@400;600&display=swap");
body {
  background-color: #20232e;
  color: #a1b1e6;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

h1,
h2 {
  font-weight: 600;
}
h1 span,
h2 span {
  color: #fcba03;
  font-family: "PT Mono", monospace;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  background-color: #2e3342;
  border: 1px solid #444b61;
  border-radius: 6px;
  margin: 10px;
  padding: 10px 30px;
}

button {
  align-items: center;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  height: 44px;
  margin: 15px 0;
  padding: 0 25px;
  position: relative;
  text-decoration: none;
  z-index: 1;
}
button:before, button:after {
  border-radius: 50px;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: -webkit-clip-path 275ms ease-in-out;
  transition: clip-path 275ms ease-in-out;
  transition: clip-path 275ms ease-in-out, -webkit-clip-path 275ms ease-in-out;
}
button.dramatic:before, button.dramatic:after {
  transition: none;
}
button:before {
  background: #33383b;
  background: linear-gradient(60deg, #3a3e52 0%, #606788 100%);
  box-shadow: -1px 1px 1px 0px #808dcb inset, 0px 0px 0px 4px rgba(14, 16, 20, 0.7);
}
button:after {
  background: #a53ab4;
  background: linear-gradient(90deg, #a53ab4 0%, #f45757 100%);
  box-shadow: -1px 1px 1px 0px #f79393 inset, 0px 0px 0px 4px rgba(14, 16, 20, 0.7);
}
button.left-to-right:after {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
button.left-to-right:focus:after {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
button.center-out-y:after {
  -webkit-clip-path: inset(50% 0 50% 0);
          clip-path: inset(50% 0 50% 0);
}
button.center-out-y:focus:after {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
button.center-out-x:after {
  -webkit-clip-path: inset(0 50% 0 50%);
          clip-path: inset(0 50% 0 50%);
}
button.center-out-x:focus:after {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
button.top-to-bottom:after {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
}
button.top-to-bottom:focus:after {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
button.top-to-bottom.dramatic:focus:after {
  -webkit-animation-name: topToBottom;
          animation-name: topToBottom;
  -webkit-animation-duration: 750ms;
          animation-duration: 750ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
button.left-to-right.dramatic:focus:after {
  -webkit-animation-name: leftToRight;
          animation-name: leftToRight;
  -webkit-animation-duration: 750ms;
          animation-duration: 750ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
button.center-out-y.dramatic:focus:after {
  -webkit-animation-name: centerOutY;
          animation-name: centerOutY;
  -webkit-animation-duration: 1000ms;
          animation-duration: 1000ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
button.center-out-x.dramatic:focus:after {
  -webkit-animation-name: centerOutX;
          animation-name: centerOutX;
  -webkit-animation-duration: 1000ms;
          animation-duration: 1000ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes topToBottom {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
  20% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  50% {
    -webkit-clip-path: inset(0 0 50% 0);
            clip-path: inset(0 0 50% 0);
  }
  60% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  75% {
    -webkit-clip-path: inset(0 0 30% 0);
            clip-path: inset(0 0 30% 0);
  }
  85% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  90% {
    -webkit-clip-path: inset(0 0 20% 0);
            clip-path: inset(0 0 20% 0);
  }
  94% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  96% {
    -webkit-clip-path: inset(0 0 10% 0);
            clip-path: inset(0 0 10% 0);
  }
  98% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  99% {
    -webkit-clip-path: inset(0 0 3% 0);
            clip-path: inset(0 0 3% 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

@keyframes topToBottom {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
  20% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  50% {
    -webkit-clip-path: inset(0 0 50% 0);
            clip-path: inset(0 0 50% 0);
  }
  60% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  75% {
    -webkit-clip-path: inset(0 0 30% 0);
            clip-path: inset(0 0 30% 0);
  }
  85% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  90% {
    -webkit-clip-path: inset(0 0 20% 0);
            clip-path: inset(0 0 20% 0);
  }
  94% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  96% {
    -webkit-clip-path: inset(0 0 10% 0);
            clip-path: inset(0 0 10% 0);
  }
  98% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  99% {
    -webkit-clip-path: inset(0 0 3% 0);
            clip-path: inset(0 0 3% 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes leftToRight {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  20% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  50% {
    -webkit-clip-path: inset(0 50% 0 0);
            clip-path: inset(0 50% 0 0);
  }
  60% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  75% {
    -webkit-clip-path: inset(0 30% 0 0);
            clip-path: inset(0 30% 0 0);
  }
  85% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  90% {
    -webkit-clip-path: inset(0 20% 0 0);
            clip-path: inset(0 20% 0 0);
  }
  94% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  96% {
    -webkit-clip-path: inset(0 10% 0 0);
            clip-path: inset(0 10% 0 0);
  }
  98% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  99% {
    -webkit-clip-path: inset(0 3% 0 0);
            clip-path: inset(0 3% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes leftToRight {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  20% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  50% {
    -webkit-clip-path: inset(0 50% 0 0);
            clip-path: inset(0 50% 0 0);
  }
  60% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  75% {
    -webkit-clip-path: ins.........完整代码请登录后点击上方下载按钮下载查看