clip-path的使用

作者: Yinzhishan | 来源:发表于2022-08-18 14:06 被阅读0次

不可思议的CSS之CLIP-PATH运用彩虹特效
动画相关
css使用技巧汇总--持续更新中
css技巧汇总--持续更新
前端人如何用clip-path画画....甚至做动画？
clip-path属性
clip-path的使用
[CSS][交互]断开的文字效果
css svg clippath mask 使用svg蒙版制作特
CSS聚光灯效果

用clip-path绘制多边形，在布局上有妙用‘；
以下灵感来源于 http://species-in-pieces.com；超级酷的

image.png

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>clip测试</title>
  <style>
    .box {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      position: relative;
    }

    .shard {
      width: 300px;
      height: 300px;
      position: absolute;
      top: 0;
      left: 0;
      transition: 0.23s 0s cubic-bezier(0.62, 0.02, 0.34, 1);
    }

    .one .shard:nth-child(1) {
      background-color: aquamarine;
      clip-path: polygon(5px 10px, 5px 100px, 55px 45px);
    }

    .one .shard:nth-child(2) {
      background-color: red;
      clip-path: polygon(55px 55px, 5px 110px, 55px 155px);
    }

    .one .shard:nth-child(3) {
      background-color: #2abc76;
      clip-path: polygon(200px 55px, 250px 55px, 275px 155px, 250px 205px, 200px 155px);
    }

    .tow .shard:nth-child(1) {
      background-color: aquamarine;
      clip-path: polygon(55px 55px, 5px 110px, 55px 155px);
    }

    .tow .shard:nth-child(2) {
      background-color: red;
      clip-path: polygon(5px 10px, 5px 100px, 55px 45px);
    }

    .tow .shard:nth-child(3) {
      background-color: #2abc76;
      clip-path: polygon(200px 155px, 250px 25px, 275px 105px, 250px 205px, 200px 55px);
    }

  </style>
</head>

<body>
  <div class="box one">
    <div class="shard"></div>
    <div class="shard"></div>
    <div class="shard"></div>
  </div>

  <button class="transform">转变</button>

  <script>
    const btn = document.querySelector('.transform');
    btn.addEventListener('click', function (e) {
      const box = document.querySelector('.box')
      const boxClass = box.className;
      console.log(boxClass);
      if (boxClass.indexOf('one') != -1) {
        box.className = 'box tow'
      } else {
        box.className = 'box one'
      }

    })
  </script>
</body>
</html>

还有`还有张鑫旭大神写了一组 0 - 1；用来做了一组时钟,用css绘制的数字哦。

image.png

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* by zhangxinxu(.com)，可免费商用，保留此注释即可 */
    .num {
      display: inline-block;
      line-height: 1;
      -webkit-text-fill-color: transparent;
      font-family: system-ui;
      font-weight: bold;
      position: relative;
      overflow: hidden;
      transition: 0.23s 0s cubic-bezier(0.62, 0.02, 0.34, 1);
    }

    .num:empty::after {
      content: '0';
    }

    .num::before {
      content: '';
      position: absolute;
      inset: 0;
      background-color: currentColor;
    }

    .num0::before {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 60% 20%, 40% 20%, 40% 80%, calc(60% - .01px) 80%, calc(60% - .01px) 100%, 0% 100%);
    }

    .num1 {
      text-indent: -.25em;
    }

    .num2::before,
    .num5::before {
      clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 60%, 50% 80%, 100% 80%, 100% 100%, 0 100%, 0% 40%, 50% 40%, 50% 20%, 0% 20%);
    }

    .num3::before {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0% 80%, 50% 80%, 50% 60%, 0% 60%, 0% 40%, 50% 40%, 50% 20%, 0% 20%);
    }

    .num4::before {
      clip-path: polygon(0 0, 40% 0, 40% 50%, calc(100% - 40%) 50%, calc(100% - 40%) 0%, 100% 0%, 100% 100%, calc(100% - 40%) 100%, calc(100% - 40%) 70%, 0% 70%);
    }

    .num5::before {
      transform: scaleX(-1);
    }

    .num6::before,
    .num9::before {
      clip-path: polygon(0% 0%,
          100% 0%,
          100% 20%,
          calc(40% - .01px) 20%,
          calc(40% - .01px) 80%,
          calc(100% - 40%) 80%,
          calc(100% - 40%) 60%,
          40% 60%,
          40% 40%,
          100% 40%,
          100% 100%,
          0% 100%);
    }

    .num7::before {
      clip-path: polygon(0% 0%,
          100% 0%,
          100% 100%,
          50% 100%,
          50% 20%,
          0% 20%);
    }

    .num8::before {
      clip-path: polygon(0% 0%, calc(40% - .01px) 0%, calc(40% - .01px) 40%, 60% 40%, 60% 20%, 40% 20%, 40% 0%, 100% 0%, 100% 100%, 40% 100%, 40% 80%, 60% 80%, 60% 60%, calc(40% - .01px) 60%, calc(40% - .01px) 100%, 0% 100%);
    }

    .num9::before {
      transform: scale(-1);
    }

    @supports not (inset: 0) {
      .num::before {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
    }

    .box {
      font-size: 50px;
      text-align: center;
      position: fixed;
      width: 500px;
      height: 300px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: aquamarine;
    }

  </style>
</head>

<body>
  <div class="box">
    <span class="num num0"></span>
    <span class="num num0"></span>
    :
    <span class="num num0"></span>
    <span class="num num0"></span>
    :
    <span class="num num0"></span>
    <span class="num num0"></span>


  </div>

  <script>
    function switchNumber(key) {
      return `num num${key}`;
    }

    function addZero(num) {
      return num > 9 ? num.toString() : '0' + num;
    }

    (function () {
      const numList = document.querySelectorAll('.num');
      setInterval(() => {
        const time = new Date()
        const h = time.getHours();
        const m = time.getMinutes();
        const s = time.getSeconds();
        const timeStr = `${addZero(h)}${addZero(m)}${addZero(s)}`;
        timeStr.split('').map((item, index) => {
          const newClassName = switchNumber(item);
          const oldlassName = numList[index].className;
          if (newClassName != oldlassName) {
            numList[index].className = newClassName;
          }
        })
      }, 1000)
    })()
  </script>
</body>

</html>