仪表盘具体内容原素围绕实际效果

文中已经参与「 . 」

序言

C端的讲解页中，设计公司设计特效都特别有意思。此次碰见了“仪表盘具体内容原素围绕实际效果”，类似仪表盘里的时针在一格一格健身运动一样，仅仅此次动漫健身运动元素不一样。

实际效果如下所示：

完成仪表盘合理布局

有效的应用JavaScrip的三角函数，根据逐一定位元素就可以实现仪表盘合理布局， 但后续互动写起来会比较繁琐。而依靠CSS的transform-origin则可特别简单的完成仪表盘合理布局。

transform-originCSS 特性使你变更一个元素变形起点。`

我们只需把头原素里的起点设定到父元素的中心线上，随后先后转动相对应视角transform: rotate(#{$i * 360 / 12}deg)，就可以完成一个仪表盘合理布局。

基本款式

<ul>
  <li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
  <li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
  <li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
  <li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
  <li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
  <li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
  <li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
  <li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
  <li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
  <li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
  <li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
  <li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
</ul>

ul {
  width: 800px;
  height: 800px;
  background-color: rgb(206, 206, 206);
  border-radius: 50%;
  @for $i from 1 through 12 {
    li:nth-child(#{$i}) {
      transform: rotate(#{$i * 360 / 12}deg);
    }
  }
  li {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid orange;
    box-sizing: border-box;
    position: absolute;
    top: 350px;
    transform-origin: 400px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

再中合一下子元素旋转方向，具体内容反向磁矩回子元素的视角，让具体内容“正”下去

img {
    transform: rotate(#{-$i * 360 / 12}deg);
}

完成仪表盘具体内容原素围绕实际效果

原素围绕功效的完成实质都是各元素转动再中合。以上边的代码为载体，大家让父元素旋转与此同时，子元素具体内容反向转动子元素 父元素的旋转方向

• 父元素每秒钟顺时针旋转30deg

<ul :style="{ transform: `rotate(${rotateNum}deg)` }">
    ...
</ul>

setInterval(() => {
    this.rotateNum  = 30
}, 1000)

• 调节一下子元素旋转方向起始站，让第一个元素为index === 1元素，即让第一个旋转方向为360deg就可以。

<li
    v-for="index in 12"
    :key="index"
    :style="{
      transform: `rotate(${(13 - index) * 30}deg)`,
    }"
>
    ...
</li>

• 中合一下子原素 父元素的旋转方向，让具体内容“正”下去。与此同时再加上和父元素一样时间transition

<li>
    <div
        class="content"
        :style="{
            transform: `rotate(${-(13 - index) * 30 - rotateNum}deg)`
        }"
        :data-text="index"
    >
        <img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" />
    </div>
</li>

ul {
    transition: transform 0.5s linear;
    ...
    li {
        .content {
            transition: transform 0.5s linear;
        }
    }
}

• 最终再加上onmouseover、onmouseleave完成鼠标悬停和离开的时候，中止/逐渐围绕作用。然后从9377某着陆页上偷一套款式装饰一下。