clip-path 绘制css常见图形制作有趣的动画丶Java教程网-IT开发者们的技术天堂

clip-path 绘制css常见图形制作有趣的动画

参考

https://www.imliyan.com/blogs/article/%E4%BD%BF%E7%94%A8clip-path%E7%BB%98%E5%88%B6CSS%E5%9B%BE%E5%BD%A2/

五角星

<div class="star"></div>


.star {
  width: 200px;
  height: 200px;
  background-color: #23bcc7;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%,    32% 57%, 2% 35%, 39% 35%);
}

三角形

<div class="box demo1"></div>

.box {
  width: 200px;
  height: 200px;
}

.demo1 {
  background-color: #1ce4c2;
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

圆

<div class="box demo2"></div>

.demo2 {
  background-color: #f2c145;
  -webkit-clip-path: circle();
  clip-path: circle();
}

多边形

其实就是一组百分比坐标点

<div class="box demo3"></div>
.demo3 {
  background-color: #cf45c8;
  -webkit-clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20%  100%, 0 80%, 0 20%);
  clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20%  100%, 0 80%, 0 20%);
}

椭圆

<div class="box demo4"></div>
.demo4 {
  background-color: #23ef6a;
  -webkit-clip-path: ellipse(40% 25% at 50% 50%);
  clip-path: ellipse(40% 25% at 50% 50%);
}

动画

<div class="box demo5"></div>

.demo5 {
  background-color: #cf45c8;
  animation: circle 1s infinite alternate;
}
@keyframes circle {
  0% {
    -webkit-clip-path: circle(100px);
    clip-path: circle(100px);
  }
  100% {
    -webkit-clip-path: circle(0);
    clip-path: circle(0);
  }
}

动画

<div class="box demo6"></div>
.demo6 {
  background-color: #8ac351;
  animation: msg 1s infinite alternate ease-in-out;
}
@keyframes msg {
  0% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  }
  100% {
    -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%,   0% 60%, 10% 20%);
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%,   0% 60%, 10% 20%);
  }
}

一些有趣的效果


#dark {
  background-color: #000;
}
#ring{
  background: #fff;
  padding: 1em;
  font-family: 'Times New Roman', Times, serif;
  text-align: center;
  white-space: pre;
  -webkit-clip-path: circle(50px at 200px 100px);
  clip-path: circle(50px at 200px 100px);
}



<div id="dark">
  <div id="ring">
    <h1>The Ring</h1><p>Three Rings for the Elven-kings under the   sky,
    Seven for the Dwarf-lords in their halls of stone,
    Nine for Mortal Men doomed to die,
    One for the Dark Lord on his dark throne
    In the Land of Mordor where the Shadows lie.
    One Ring to rule them all, One Ring to find them,
    One Ring to bring them all, and in the darkness bind them,
    In the Land of Mordor where the Shadows lie。</p>
  </div>
</div>
<script>
  let ring = document.querySelector('#ring')
  window.addEventListener('mousemove', (e) => {
    let x = e.pageX
    let y = e.pageY
    let ox = ring.offsetLeft
    let oy = ring.offsetTop
    let newPath = `circle(50px at ${x-ox}px ${y-oy}px)`
    ring.style['clip-path'] = newPath
  })
</script>

放大镜

核心思想为两个div, 将放大的div用遮罩展示出来展示出来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #dark2 {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    #ring2, #ring2c {
      background: #fff;
      text-align: center;
      white-space: pre;
    }

    #ring2c {
      width: 100%;
      transform: scale(1.3);
      text-align: center;
      -webkit-clip-path: circle(50px at 200px 100px);
      clip-path: circle(50px at 200px 100px);
      position: absolute;
      left: 0;
      top: 0;
    }

  </style>

</head>
<body>
<div id="dark2">
  <div id="ring2">
    <h1>The Ring</h1>
    <p>Three Rings for the Elven-kings under the sky,
      Seven for the Dwarf-lords in their halls of stone,
      Nine for Mortal Men doomed to die,
      One for the Dark Lord on his dark throne
      In the Land of Mordor where the Shadows lie.
      One Ring to rule them all, One Ring to find them,
      One Ring to bring them all, and in the darkness bind them,
      In the Land of Mordor where the Shadows lie。</p>
  </div>
</div>
<script>
  let dark2 = document.querySelector('#dark2')
  let ring2 = document.querySelector('#ring2')
  let ring2c = ring2.cloneNode(true)
  ring2c.id = 'ring2c'
  dark2.appendChild(ring2c)
  const rect = dark2.getBoundingClientRect()
  console.log(rect)
  document.addEventListener('mousemove', (e) => {

    console.log(e)
    let x = e.pageX
    let y = e.pageY
    let ox = dark2.offsetLeft
    let oy = dark2.offsetTop
    let newPath = `circle(50px at ${x - ox}px ${y - oy}px)`
    // let newPath = `circle(50px at ${x-ox}px ${y}px)`
    ring2c.style['clip-path'] = newPath
    let newOrigin = `${x - ox}px ${y - oy}px`
    ring2c.style['transform-origin'] = newOrigin
  })
</script>
</body>
</html>