css动画之-利用less实现圆形轮播图片

效果预览

css动画之-利用less实现圆形轮播图片

思路图解

css动画之-利用less实现圆形轮播图片

  1. 其中,黄色为显示区域
  2. 蓝色为图片,且应与显示区域大小一致
  3. 红色为动画转动区域
  4. 转动区域的边缘,即红色圈的边缘在显示区域和图片的圆点上

重点解决问题

  1. 如何将照片放置在转动区域的各个位置上?
    1. 利用transform-origin改变图片转动圆点,而transform-origin的x轴为center,y轴方向为转动区域圆的半径R。
    2. 利用rotate函数旋转角度
  2. 若图片为任意多个,如何计算转动区域的半径?
    css动画之-利用less实现圆形轮播图片

(图片画的不标准)

如图,若图片半径r已知,等腰三角形顶角已,可得出R为
r / sin(角度/2)

html结构

  <div class="imgRotateContainer">
    <div class="imgRArea">
      <img src="../img/img1.png" />
      <img src="../img/img2.png" />
      <img src="../img/img3.png" />
      <img src="../img/img4.png" />
      <img src="../img/img1.png" />
      <img src="../img/img2.png" />
      <img src="../img/img3.png" />
      <img src="../img/img4.png" />
      <img src="../img/img3.png" />
      <img src="../img/img4.png" />
    </div>
  </div>

less代码

@size: 200px; //可视区域的大小,也是每张图片的大小
@r: (@size / 2);
@n: 10;
@rDeg: (360deg / @n);
@R: (@r / sin(@rDeg / 2));
@eachPercentage: (1 / @n) * 100%;
@stopInterval: .3s;
@eachInterval: 2s;
@duration: (@stopInterval + @eachInterval) * @n;
@backPercentage: (@stopInterval / @duration) * @eachPercentage;

.imgRotateContainer{
  width: @size;
  height: @size;
  // border: 1px solid red;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  .imgRArea{
    width: 2 * @R;
    height: 2 * @R;
    // border: 1px solid yellow;
    border-radius: 50%;
    position: absolute;
    top: @r;
    margin-left: -(@R - @r);
    display: flex;
    justify-content: center;
    animation: rotation @duration infinite ease-in;
    img {
      width: @size;
      height: @size;
      border-radius: 50%;
      position: absolute;
      top: -@r;
      transform-origin: center @r+@R;
      each(range(@n),{
        &:nth-child(@{value}){
          transform: rotate(@rDeg * @value);
        }
       
      })
    }
  }
}

.setAnimation(@i,@max) when(@i <= @max){
  @eP: @eachPercentage * @i;
  @bP:  @eP - @backPercentage;
  @{eP},
  @{bP} {
    transform: rotate(-@rDeg * @i);
  }
  .setAnimation(@i + 1,@max);
}  
@keyframes rotation {
  .setAnimation(1,@n);
}

原文链接:https://juejin.cn/post/7256668242142904375 作者:JZzz

(0)
上一篇 2023年7月18日 上午10:10
下一篇 2023年7月18日 上午10:21

相关推荐

发表回复

登录后才能评论