效果如圖，多個(gè)物體在軌道上繞中心物體旋轉(zhuǎn)，當(dāng)旋轉(zhuǎn)到物體后面時(shí)將被遮擋。主要使用css實(shí)現(xiàn)，為了簡(jiǎn)化代碼，引入less進(jìn)行處理。

html結(jié)構(gòu)

// 中心物體
<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代碼

本質(zhì)上是使用動(dòng)畫(huà)控制軌道帶動(dòng)內(nèi)部的物體進(jìn)行旋轉(zhuǎn)，計(jì)算出每個(gè)物體在橢圓軌道上的位置，使用絕對(duì)定位放置物體。由于軌道上物體有多個(gè)，代碼做了橢圓位置等分計(jì)算處理，使用less根據(jù)軌道大小和物體個(gè)數(shù)動(dòng)態(tài)計(jì)算各個(gè)物體的位置，要添加或減少物體個(gè)數(shù)只需要在html上添加相應(yīng)類(lèi)名的物體并修改less代碼中的@num變量即可。
遮擋效果是通過(guò)z-index制造視覺(jué)差來(lái)實(shí)現(xiàn)的。

// 軌道旋轉(zhuǎn)動(dòng)畫(huà)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;
// 動(dòng)畫(huà)時(shí)間
@time: 30s;
// 元素個(gè)數(shù)
@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));
}
// 旋轉(zhuǎn)中心
.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;
  }
  //   對(duì)每個(gè)元素進(jìn)行定位
  .locateItem(@num);
}
// 鼠標(biāo)懸停 動(dòng)畫(huà)暫停
.orbit:hover,
.orbit:hover .item,
.orbit .item:hover {
  animation-play-state: paused;
}

可將代碼復(fù)制到codepen中進(jìn)行預(yù)覽：
https://codepen.io/pen/文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-771900.html

到了這里，關(guān)于前端css/less繞橢圓軌道旋轉(zhuǎn)動(dòng)畫(huà) 帶遮擋效果 3D的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！