文中已经参与「 . 」

序言

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;
        }
    }
}

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

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

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:仪表盘具体内容原素围绕实际效果