Clip使用

简单使用 

img {
    width: 300px;
    height: 300px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
}

图片如下： 

img {
    width: 300px;
    height: 300px;
    clip-path: polygon(0% 0%, 100% 100%, 50% 100%)
}

 图片如下：

 我们给出对应的点，浏览器就能进行剪裁。原点为左上角，x轴横着向右、y轴竖着向下

该网站可以非常方便的得到你想要的形状

案例一

 

    <div class="loader">
      <span class="top-half">Loading</span>
      <span class="bottom-half">Loading</span>
    </div>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 300px;
  height: 60px;
  border: 7px solid #0a3d62;
  border-radius: 10px;
  text-align: center;
  line-height: 60px;
  position: relative;
  overflow: hidden;
}

span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 48px;
}

.top-half {
  color: #ee5253;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  animation: split 2s linear infinite;
}

.bottom-half {
  color: #0a3d62;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  animation: split 2s linear infinite reverse;
}

@keyframes split {
  0% {
    transform: translateX(100%);
  }

  40% {
    transform: translateX(0%);
  }

  60% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

 案例二

    <div class="wave">
      <h2>wave</h2>
      <h2>wave</h2>
    </div>

 

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2f2f2f;
}

.wave {
  width: 500px;
  height: 500px;
  position: relative;
}

h2 {
  position: absolute;
  text-align: center;
  line-height: 500px;
  text-transform: uppercase;
  font-size: 170px;
}

h2:nth-child(1) {
  color: #7efff5;
}

h2:nth-child(2) {
  color: #03a9f4;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  animation: wave 2s ease infinite;
}

@keyframes wave {
  0% {
    clip-path: polygon(
      0 48%,
      18% 52%,
      35% 58%,
      56% 59%,
      79% 60%,
      100% 55%,
      100% 100%,
      0 100%
    );
  }
  50% {
    clip-path: polygon(
      0 55%,
      15% 62%,
      40% 60%,
      61% 58%,
      79% 53%,
      100% 45%,
      100% 100%,
      0 100%
    );
  }
  100% {
    clip-path: polygon(
      0 48%,
      18% 52%,
      35% 58%,
      56% 59%,
      79% 60%,
      100% 55%,
      100% 100%,
      0 100%
    );
  }
}

案例三

    <div class="container">
      <div class="clip clip1"></div>
      <div class="clip clip2"></div>
      <div class="clip clip3"></div>
    </div>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2f2f2f;
}

.container {
  position: relative;
  width: 800px;
  height: 500px;
  background-color: #222;
}

.clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  box-sizing: border-box;
}

.clip1 {
  background: url(./img/1.jpg);
  background-size: cover;
  background-position: center;
  clip-path: polygon(0 0, 21% 0, 45% 100%, 0 100%);
  transform: translateX(-2px);
}

.clip2 {
  background: url(./img/2.jpg);
  background-size: cover;
  background-position: center;
  clip-path: polygon(16% 0, 85% 0, 70% 100%, 33% 100%);
}

.clip3 {
  background: url(./img/3.jpg);
  background-size: cover;
  background-position: center;
  clip-path: polygon(83% 0, 100% 0, 100% 100%, 63% 100%);
}

.container:hover .clip {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.container .clip:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

案例四

    <div class="card">
      <h1>information</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
        molestiae incidunt consectetur non quas. Eum laudantium deleniti quis
        quos consequatur ipsam fugit nisi? Ea ratione, facere rem dolore minus
        quod.
      </p>
    </div>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 500px;
  height: 250px;
  background-color: #c7ecee;
  padding: 20px 80px 20px 20px;
  border-radius: 10px;
  clip-path: circle(7% at 93% 20%);
  transition: all 0.5s;
}

h1 {
  margin-bottom: 20px;
}

p {
  font-size: 18px;
}

.card:hover {
  clip-path: circle(70.7% at 50% 50%);
}

案例五

    <div class="main">
      <h1>black</h1>
      <h1>white</h1>
    </div>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c8d6e5;
}

.main {
  position: relative;
  width: 800px;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  font-size: 220px;
  text-transform: uppercase;
  transition: all 0.5s;
}

h1:nth-child(2) {
  color: white;
  clip-path: polygon(0 0, 100% 0%, 100% 0, 0% 100%);
  background-color: #c8d6e5;
}

h1:nth-child(2):hover {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}

h1:nth-child(1):hover ~ h1:nth-child(2) {
  clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
}

案例六

      <div class="content">
        <h2>title</h2>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique
          dolorum optio nihil soluta dignissimos dicta esse enim rem magnam
        </p>
      </div>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c8d6e5;
}

.main {
  position: relative;
  width: 800px;
}

.card {
  width: 335px;
  height: 580px;
  position: relative;
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  clip-path: circle(70.7% at 50% 50%);
}

img {
  width: 100%;
}

.card:hover .img {
  clip-path: circle(13.9% at 50% 35%);
}

.content {
  position: absolute;
  left: 0;
  bottom: 100px;
  text-align: center;
}

h2 {
  padding: 0;
  margin: 0;
  text-transform: uppercase;
}

h2,
p {
  transform: translateY(20px);
  transition: 0.3s;
  opacity: 0;
}

.card:hover h2,
.card:hover p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

案例七

 <ul>
      <li>
        <a href="#" data-text="home">home</a>
      </li>
      <li>
        <a href="#" data-text="about">about</a>
      </li>
      <li>
        <a href="#" data-text="services">services</a>
      </li>
      <li>
        <a href="#" data-text="team">team</a>
      </li>
      <li>
        <a href="#" data-text="contact">contact</a>
      </li>
    </ul>

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c8d6e5;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  margin: 10px 0px;
  position: relative;
  overflow: hidden;
}

a {
  text-decoration: none;
  display: block;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 60px;
  font-weight: 900;
  position: relative;
  padding: 5px 10px;
  color: transparent;
}

a:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #262626;
  padding: 5px 0;
  clip-path: polygon(0 0, 100% 0%, 100% 50%, 0 50%);
  transition: all 0.5s;
  transition-delay: 0.25s;
}

a:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #262626;
  padding: 5px 0;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  transition: all 0.5s;
  transition-delay: 0.25s;
}

a:hover:before {
  color: rgb(160, 0, 0);
  transform: translate(10px, -3px);
}

a:hover:after {
  color: rgb(160, 0, 0);
  transform: translate(-10px, 3px);
}

li:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: #262626;
  transition: all 0.5s;
  left: -100%;
}

li:hover:before {
  left: 100%;
}

案例八

    <a href="">
      <span>button</span>
      <span>button</span>
    </a>

@import url("https://fonts.googleapis.com/css?familt=poppins:200,300,400,500,600,700,800,900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222;
}

a {
  width: 180px;
  height: 60px;
  position: relative;
}

a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  background-color: #4834d4;
  text-align: center;
  line-height: 60px;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 22px;
}

span:nth-child(2) {
  color: #4834d4;
  background-color: white;
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%, 38% 51%);
  transition: all 0.5s;
}

/* span:nth-child(1) {
  transition: all 0.5s;
} */

span:nth-child(2):hover {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 0 53%);
}

span:nth-child(1):hover ~ span:nth-child(2) {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%, 100% 57%);
}

案例九

    <section>
      <div class="box box1">
        <h2><span>Bye Bye</span><span>2030</span></h2>
      </div>
      <div class="box box2">
        <h2><span>Happy New Year</span><span>2031</span></h2>
      </div>
    </section>

@import url("https://fonts.googleapis.com/css?familt=poppins:200,300,400,500,600,700,800,900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
}

body {
  overflow: hidden;
}

section {
  width: 100%;
  height: 100vh;
  position: relative;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box2 {
  background-color: #4cb979;
  clip-path: polygon(0 0, 100% 0%, 100% 50%, 0 50%);
}

h2 {
  font-size: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateY(-70%);
  animation: textMove 3s ease-in-out infinite;
}

.box2 h2 {
  color: #fff;
}

span:nth-child(2) {
  line-height: 1em;
  font-size: 2em;
}

@keyframes textMove {
  0%,
  45% {
    transform: translateY(-70%);
  }

  55%,
  90% {
    transform: translateY(70%);
  }

  100% {
    transform: translateY(-70%);
  }
}

clip-path做动画，就是依靠“重叠遮盖、窗口显露”，利用元素互相遮挡、clip-path撕开口子显示不同的内容，再利用transition或者animation做出来的