• 150403

    文章

  • 892

    评论

  • 13

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

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>

 


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客