前端css/less绕椭圆轨道旋转动画带遮挡效果 3D

最新推荐文章于 2024-05-20 16:21:17 发布

藤井粟

最新推荐文章于 2024-05-20 16:21:17 发布

阅读量1.3k

点赞数 6

分类专栏：大屏开发文章标签：前端 css less

本文链接：https://blog.csdn.net/weixin_48701221/article/details/134667136

版权

大屏开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

效果如图，多个物体在轨道上绕中心物体旋转，当旋转到物体后面时将被遮挡。主要使用css实现，为了简化代码，引入less进行处理。

html结构

// 中心物体
<div class="center">center</div>
// 轨道
<div class="orbit">
	// 轨道上的物体
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

less代码

本质上是使用动画控制轨道带动内部的物体进行旋转，计算出每个物体在椭圆轨道上的位置，使用绝对定位放置物体。由于轨道上物体有多个，代码做了椭圆位置等分计算处理，使用less根据轨道大小和物体个数动态计算各个物体的位置，要添加或减少物体个数只需要在html上添加相应类名的物体并修改less代码中的@num变量即可。
遮挡效果是通过z-index制造视觉差来实现的。

// 轨道旋转动画b
@keyframes spin {
  0% {
    transform: scaleY(0.5) rotate(0deg);
  }
  100% {
    transform: scaleY(0.5) rotate(360deg);
  }
}
@keyframes anti-spin {
  0% {
    transform: rotate(0deg) scaleY(2) scale(1);
  }
  100% {
    transform: rotate(-360deg) scaleY(2) scale(1);
  }
}
// 轨道宽高
@w1: 200px;
@h1: 200px;
@r: @w1 / 2;
// 元素宽高
@w2: 20px;
@h2: 20px;
// 动画时间
@time: 30s;
// 元素个数
@num: 6;
.locateItem(@n, @i: 1) when (@i =< @n) {
  .item@{i} {
    @m: pi() / 180 * round(360 / @n) * @i;
    left: @r + @r * sin(@m) - @w2 / 2;
    bottom: @r + @r * cos(@m) - @h2 / 2;
  }
  .locateItem(@n, (@i + 1));
}
// 旋转中心
.center {
  z-index: 999;
  position: absolute;
  top: 40px;
  left: 120px;
  width: 80px;
  height: 80px;
  background: yellow;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
// 轨道及元素
.orbit {
  z-index: 900;
  position: absolute;
  top: 10px;
  left: 50px;
  width: @w1;
  height: @h1;
  border-radius: 50%;
  border: 2px solid black;
  z-index: 900;
  animation: spin @time infinite linear;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    background: red;
    border-radius: 50%;
    width: @w2;
    height: @h2;
    animation: anti-spin @time infinite linear;
    color: #fff;
    position: absolute;
    text-align: center;
  }
  //   对每个元素进行定位
  .locateItem(@num);
}
// 鼠标悬停 动画暂停
.orbit:hover,
.orbit:hover .item,
.orbit .item:hover {
  animation-play-state: paused;
}

可将代码复制到codepen中进行预览：
https://codepen.io/pen/