马黑黑《offset-path ray 函数演示（一）》
<style>.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
.artBox p { margin: 10px 0; }
</style>
<div class="artBox">
<p>CSS 属性 <mark>offset-path</mark> 可以通过 <mark>ray()</mark> 函数创建由里往外发射的射线路径。射线路径的发起点默认在包含块即容器的中心（50% 50%）；射线方向由射线角度决定，0deg 为正上方向；射线终止点在包含块内部、边界或以外。ray() 函数可支持多个参数：angle（射线角度）、size（射线尺寸）、contain（约束在包含块内）、at（射线发起位置）。这些参数，角度必须，其余可选。本演示仅使用 ray() 函数的角度参数，辅以 offset-distance 属性帮助查看射线路径信息：</p>
<div class="hEdiv" data-prev="1"><pre class="hEpre">
<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>
</pre></div>
<p>核心要点：CSS 函数 ray() 为 offset-path 属性创建的射线路径，最简单时只需要一个参数，角度参数，具体代码参见 21 行，在预览页面也会动态提供代码。ray() 函数仅设置角度参数时，其余参数为缺省默认，此时，正上、正右、正下和正左四个方向的射线路径的终点正好处在容器边界之上。演示中应该会看到运动元素（子元素）越界，那是因为运动元素的偏移锚点（由 offset-anchor 属性设置）默认设在元素的中心点，而偏移锚点是元素在 offset-distance（元素在路径上的偏移距离）为 100% 时的抛锚点；若不希望子元素整体突破容器边界，可设 <mark>offset-anchor: 100% 50%;</mark> 或 <mark>offset-anchor: right center;</mark>，即将偏移锚点设在元素X轴的右侧、Y轴的中心。</p>
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
const divs = document.querySelectorAll('.hEdiv');
const pres = document.querySelectorAll('.hEpre');
divs.forEach((div,idx) => hl.hl(div, pres));
</script>
实用的教程，谢谢分享
页:
[1]