css实现圆滑三角形悬浮变形动画效果代码-html代码-BFW代码库

css实现圆滑三角形悬浮变形动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现圆滑三角形悬浮变形动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @property --r{
          syntax: '<length>';
          inherits: true;
          initial-value: 0;
        }
        
        .triangle {
          --r: 20px;    /* the radius */
          width: 250px; /* the size */
          
          aspect-ratio: 1.15;
          background: linear-gradient(45deg,#4ECDC4,#C7F464);
          clip-path: polygon(50% 0,100% 100%,0 100%);
          --_g1: #0000 calc(3*var(--r)/2),#000 0;
          --_g2: calc(1.7*var(--r)) bottom var(--r),#000 97%,#0000;
          --_m:
            radial-gradient(var(--r) at right var(--_g2)),
            radial-gradient(var(--r) at left  var(--_g2)),
            radial-gradient(var(--r) at 50% calc(2*var(--r)),#000 97%,#0000),
            linear-gradient(180deg,var(--_g1)) 50%  0   /100% 50%,
            linear-gradient( 60deg,var(--_g1)) 0    100%/51%  51%,
            linear-gradient(-60deg,var(--_g1)) 100% 100%/51%  51%;
          -webkit-mask: var(--_m);
              .........完整代码请登录后点击上方下载按钮下载查看