offset-path ray 函数演示（一）

马黑黑

CSS 属性 offset-path 可以通过 ray() 函数创建由里往外发射的射线路径。射线路径的发起点默认在包含块即容器的中心（50% 50%）；射线方向由射线角度决定，0deg 为正上方向；射线终止点在包含块内部、边界或以外。ray() 函数可支持多个参数：angle（射线角度）、size（射线尺寸）、contain（约束在包含块内）、at（射线发起位置）。这些参数，角度必须，其余可选。本演示仅使用 ray() 函数的角度参数，辅以 offset-distance 属性帮助查看射线路径信息：

<style>
    @import 'https://638183.freep.cn/638183/web/css/hl.css';
    .pa {
        margin: 20px auto;
        width: 200px;
    }
    .pa:nth-of-type(1) {
        height: 200px;
        border: 1px solid gray;
        margin-top: 100px;
    }
    .pa:nth-of-type(2) {
        width: 400px;
        border-width: 0;
    }
    .son {
        width: 60px;
        height: 40px;
        background: purple;
        clip-path: polygon(50% 60%,0 60%,0 40%,50% 40%,50% 0,100% 50%, 50% 100%);
        offset-path: ray(0deg);
        transition: offset-distance .7s;
    }
</style>

<div class="pa">
    <div id="son" class="son"></div>
</div>
<div class="pa">
    <p class="hlCode">offset-path: <output id="outputCode">ray(0deg);</output></p>
    <p>
        <label for="rangeAngle">射线角度 ：</label>
        <input id="rangeAngle" type="range" max="360" min="-360" step="5" />
        <output id="outputAngle">0deg</output>
    </p>
    <p>
        <label for="rangeDistance">元素在路径上的偏移位置 ：</label>
        <input id="rangeDistance" type="range" max="100" min="0" value="0" />
        <output id="outputDistance">0%</output>
    </p>
</div>

<script>
    rangeAngle.oninput = () => {
        outputAngle.value = rangeAngle.value + 'deg';
        outputCode.value = `ray(${rangeAngle.value}deg);`
        son.style.offsetPath = `ray(${rangeAngle.value}deg)`;
    }
    
    rangeDistance.oninput = () => outputDistance.value = rangeDistance.value + '%';
    
    rangeDistance.onchange = () => son.style.offsetDistance = rangeDistance.value + '%';
</script>
    

核心要点：CSS 函数 ray() 为 offset-path 属性创建的射线路径，最简单时只需要一个参数，角度参数，具体代码参见 21 行，在预览页面也会动态提供代码。ray() 函数仅设置角度参数时，其余参数为缺省默认，此时，正上、正右、正下和正左四个方向的射线路径的终点正好处在容器边界之上。演示中应该会看到运动元素（子元素）越界，那是因为运动元素的偏移锚点（由 offset-anchor 属性设置）默认设在元素的中心点，而偏移锚点是元素在 offset-distance（元素在路径上的偏移距离）为 100% 时的抛锚点；若不希望子元素整体突破容器边界，可设 offset-anchor: 100% 50%; 或 offset-anchor: right center;，即将偏移锚点设在元素X轴的右侧、Y轴的中心。