css3的一些前沿特性

前言，简单整理了一些css3的属性

1. clip-path

clip-path 创建复杂的裁剪形状，使元素仅显示被裁剪区域内的部分。

可视化工具：
https://tools.jb51.net/static/api/css3path/index.html
语法:
clip-path: 内置几何形。
内置几何形。状如 circle()、polygon()
示例
    .nav {
      width: 200px;
      height: 60px;
      background-color: #141e37;
      -webkit-clip-path: polygon(10% 0, 100% 1%, 90% 100%, 0% 100%);
      clip-path: polygon(10% 0, 100% 1%, 90% 100%, 0% 100%);
    }

2. 滤镜 filter

CSS滤镜通过filter 属性实现，可对元素及其子元素进行实时图像处理，无需修改原始素材。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
示例：
img {    
    -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, 
	Opera */   
    filter: contrast(200%) brightness(150%);
}

2.1 背景滤镜

backdrop-filter是 CSS 中的一个图形滤镜属性，主要用于对元素背后的区域（即“背景”）应用滤镜效果。
它通常与半透明背景配合使用，能实现类似“毛玻璃”的视觉效果，使用方法和filter类似，这里不展开了。

3. nimation-timeline 动画时间线

animation-timeline 是 CSS 中用于控制动画时间线的核心属性，它允许开发者将动画进度与特定事件（如滚动、视口可见性）绑定，从而实现更复杂的交互效果。

滚动时间线：动画进度与页面或容器的滚动位置关
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    .scrollbar {
      width: 0%;
      height: 3px;
      background: linear-gradient(90deg, #96f, #bf70ff, #e67aff, #ff89dc, #ffa176, #ffb90f);
      animation: scrollbar 2s linear forwards;
      /* 添加滚动时间线 */
      /* 让动画绑定时间线 */
      animation-timeline: scroll();
    }
    /* 彩色线条动画效果 */
    @keyframes scrollbar {
      0% { width: 0%; }
      100% { width: 100%; }
    }
    <div class="navbar">
        <div class="scrollbar"></div>
    </div>
视图时间线：动画进度与元素进入/离开视口的可见性关联
    .box img {
      opacity: 0.2;
      animation: anim 1s linear forwards;
      /* 绑定视图时间线 */
      animation-timeline: view();
    }
    /* 图片动画 */
    @keyframes anim {
      0% {
        transform: scale(1);
        opacity: 0.2;
      }
      100% {
        transform: scale(1.5);
        opacity: 1;
      }
    }

示例比如保时捷的官网进度条效果

4. 常用的 calc() clamp() max() 和 min() 函数

函数可以执行数学运算（加减乘除），支持混合单位

.box{
    width: calc(100% - 20px);
    height: calc(var(--base-size) * 1.5);
}

CSS 的 clamp() 函数用于设置一个值，该值会根据视口的大小在最小值和最大值之间自适应调整。
clamp() 函数有三个参数：最小值、首选值和最大值。如果首选值在指定范围内，浏览器会选择首选值；否则，浏览器会选择最小值或最大值。

clamp(min, preferred, max)
min	可选。指定允许的最小值。 preferred 必需。指定首选值。 max 可选。指定允许的最大值。
/* 响应式字体 */
h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
/* 响应式宽高 */
.box {
  height: clamp(300px, 50vh, 600px);
}