主页 / 问题 / 1034044
Accepted
Елизавета Чепцова
Asked:2020-10-13 04:18:30 +0000 UTC2020-10-13 04:18:30 +0000 UTC

告诉我如何制作这样的跑步线？

  • 772

在此处输入图像描述

请告诉我如何制作一条像图片中那样围绕元素运行的运行线，例如围绕图片。如果可能，从 html 元素设置文本。运行线的圆周运动，在背景中，流变淡了一点，​​它围绕着一些图片运行。谢谢你。

javascript

1 个回答

  1. Best Answer

    1. 我们取一个词组，打包括空格在内的字符。

    2. 每个字符都放置在一个绝对定位的方形 div 中

    3. 由于像这样的 css 3d 转换（顶视图），我们将这些正方形排列在圆柱体周围：

    在此处输入图像描述

    为了这：

    • 将 Z 移到负区域 - 这将使 div 更靠近查看器

    • 绕 Y 轴旋转一个角度，该角度通过将整个圆除以字符数计算得出

      1. 围绕中心旋转 

    let chars = 'hello hello hello hello hello hello '.split('');
spin.innerHTML = chars.map((c, i) => {
  return `<div class=char style="--a:${360/chars.length*i}deg">${c}</div>`
}).join('');
    body {
  perspective: 400px;
}

.char {
  animation: rot 20s linear infinite;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  text-align: center;
  font-size: 30px;
  position: absolute;
}

#spin {
  margin-left: 50vw;
}

@keyframes rot {
  from {transform: rotateY(var(--a)) translateZ(150px)}
  to   {transform: rotateY(calc(var(--a) - 360deg)) translateZ(150px)}
}
    <div id=spin></div>

    • 12

相关问题