请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2023-6-5 12:57 编辑
本例,每一个文本个体所在的 span 元素通过 offset-distance 设置自己在 offset-path 路径上的位置,具体定位的实现在 JS 里完成:
<style>
#wrapper {
width: 400px;
height: 200px;
margin: 20px auto;
position: relative;
border: 1px solid gray;
}
#wrapper > span {
display: block;
position: absolute;
width: 40px;
height: 40px;
text-align: center;
font: bold 20px / 40px sans-serif;
color: blue;
background: gray;
border-radius: 50%;
offset-path: path('M80 100 a120 80 0 1 0 240 0 a120 80 0 1 0 -240 0z');
offset-rotate: 0deg;
}
</style>
<div id="wrapper"></div>
<script>
let text_ar = '君不见黄河之水天上来'.split('');
text_ar.forEach( (item,key) => {
let sp = document.createElement('span');
sp.innerText = item;
sp.style.cssText += `
offset-distance: ${100 / text_ar.length * key}%;
`;
wrapper.appendChild(sp);
});
</script>
提示:offset-rotate 规定元素在 offset-path 上自身朝向的属性,默认值为 auto,随路径变化而自然改变自己的朝向。本例是文本布局,所以值设为 0,不调整朝向,永远躺平。
|