css實(shí)現(xiàn)橢圓繞圈動(dòng)畫

1.實(shí)現(xiàn)效果

raoqiu.gif

2.實(shí)現(xiàn)原理

2.1 box-shadow

box-shadow屬性可以設(shè)置一個(gè)或多個(gè)下拉陰影的框。
boxShadow 屬性把一個(gè)或多個(gè)下拉陰影添加到框上。該屬性是一個(gè)用逗號(hào)分隔陰影的列表，每個(gè)陰影由 2-4 個(gè)長度值、一個(gè)可選的顏色值和一個(gè)可選的 inset 關(guān)鍵字來規(guī)定。省略長度的值是 0。

語法：

box-shadow: h-shadow v-shadow blur spread color inset;
值 說明
h-shadow 必需的。水平陰影的位置。允許負(fù)值
v-shadow 必需的。垂直陰影的位置。允許負(fù)值
blur 可選。模糊距離
spread 可選。陰影的大小
color 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表
inset 可選。從外層的陰影（開始時(shí)）改變陰影內(nèi)側(cè)陰影

eg:

image.png
div{
width: 200px;
height: 100px;
background: #222;
box-shadow:
    0 0 0 6px #881515,
    0 0 0 10px #ceb0b0,
    0 0 0 15px #b0bace,
    0 2px 5px 10px #c7e0c7 inset;
}

2.2 CSS radial-gradient() 函數(shù)

radial-gradient() 函數(shù)用徑向漸變創(chuàng)建 "圖像"。
徑向漸變由中心點(diǎn)定義。為了創(chuàng)建徑向漸變你必須設(shè)置兩個(gè)終止色。

語法：

background:#000;//瀏覽器不支持時(shí)候展示
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
值 描述
shape 確定圓的類型：
ellipse (默認(rèn)): 指定橢圓形的徑向漸變。
circle ：指定圓形的徑向漸變
size 定義漸變的大小，可能值：
farthest-corner (默認(rèn)) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的角。
closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊。
closest-corner ： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角。
farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的邊
position 定義漸變的位置?？赡苤担?br>center（默認(rèn)）：設(shè)置中間為徑向漸變圓心的縱坐標(biāo)值。
top：設(shè)置頂部為徑向漸變圓心的縱坐標(biāo)值。
bottom：設(shè)置底部為徑向漸變圓心的縱坐標(biāo)值。
start-color, ..., last-color 用于指定漸變的起止顏色。

repeating-radial-gradient()：

repeating-radial-gradient() 函數(shù)用于創(chuàng)建重復(fù)的徑向漸變 "圖像"。

eg:


image.png
div {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid #222;
    background: radial-gradient(circle at 50% 50%, rgba(211, 28, 28) 5%, rgba(235, 178, 21) 30%, rgba(61, 132, 199) 50%);
  }

2.3 CSS3 transform:rotate

2.3.1 rotate(2D)

rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時(shí)針旋轉(zhuǎn)。

6e29a5ccecf84e5798e94253939284a0.gif

eg：

div{
    transform: rotate(30deg);
}

2.3.2 rotateX(3D)

rotateX：CSS3 允許您使用 3D 轉(zhuǎn)換來對(duì)元素進(jìn)行格式化。rotateX()方法，圍繞其在一個(gè)給定度數(shù)X軸旋轉(zhuǎn)的元素。

2.gif

eg:

div{
    transform: rotateX(30deg);
}

2.3.3 rotateY(3D)

rotateY:CSS3 允許您使用 3D 轉(zhuǎn)換來對(duì)元素進(jìn)行格式化。圍繞其在一個(gè)給定度數(shù)Y軸旋轉(zhuǎn)的元素。

4.gif

eg:

div{
    transform: rotateY(30deg);
}

2.3.4 rotateZ(3D)

rotateZ:CSS3 允許您使用 3D 轉(zhuǎn)換來對(duì)元素進(jìn)行格式化。定義沿 Z 軸的 3D 旋轉(zhuǎn)。rotateZ(a) 相當(dāng)于 rotate(a) or rotate3d(0, 0, 1, a)。

5.gif

eg:

div{
    transform: rotateZ(30deg);
}

2.3.5 rotate3d(3D)

rotate3d(x,y,z,angle) :定義 3D 旋轉(zhuǎn)。

6.gif

eg:

div{
    transform: rotate3d(1,1,1,30deg);
}

2.4 less的使用

Less （Leaner Style Sheets 的縮寫） 是一門向后兼容的 CSS 擴(kuò)展語言。這里呈現(xiàn)的是 Less 的官方文檔（中文版），包含了 Less 語言以及利用 JavaScript 開發(fā)的用于將 Less 樣式轉(zhuǎn)換成 CSS 樣式的 Less.js 工具。
因?yàn)?Less 和 CSS 非常像，因此很容易學(xué)習(xí)。而且 Less 僅對(duì) CSS 語言增加了少許方便的擴(kuò)展，這就是 Less 如此易學(xué)的原因之一。

在 Node.js 環(huán)境中使用 Less ：

npm install -g less

在瀏覽器環(huán)境中使用 Less ：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

2.4.1變量（Variables）

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

編譯為：

#header {
  width: 10px;
  height: 20px;
}

2.4.2 嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替層疊或與層疊結(jié)合使用的能力。假設(shè)我們有以下 CSS 代碼：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

用 Less 語言我們可以這樣書寫代碼：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

用 Less 書寫的代碼更加簡潔，并且模仿了 HTML 的組織結(jié)構(gòu)。

2.4.3 混合（Mixins）

混合（Mixin）是一種將一組屬性從一個(gè)規(guī)則集包含（或混入）到另一個(gè)規(guī)則集的方法。假設(shè)我們定義了一個(gè)類（class）如下：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

如果我們希望在其它規(guī)則集中使用這些屬性呢？沒問題，我們只需像下面這樣輸入所需屬性的類（class）名稱即可，如下所示：

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

.bordered 類所包含的屬性就將同時(shí)出現(xiàn)在 #menu a 和 .post a 中了。

2.4.4 extend

帶擴(kuò)展的選擇器插值，Extend無法將選擇器與變量匹配。如果選擇器包含變量，擴(kuò)展將忽略它。但是，extend 可以附加到插值選擇器。

減小 CSS 大小
Mixins 將所有屬性復(fù)制到選擇器中，這可能導(dǎo)致不必要的重復(fù)。因此，您可以使用 extends 而不是 mixins 將選擇器向上移動(dòng)到您希望使用的屬性，從而減少生成的 CSS。
示例 - 使用 mixin：

.my-inline-block() {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  .my-inline-block;
}
.thing2 {
  .my-inline-block;
}

輸出

.thing1 {
  display: inline-block;
  font-size: 0;
}
.thing2 {
  display: inline-block;
  font-size: 0;
}

示例（帶有擴(kuò)展）：

.my-inline-block {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}
.thing2 {
  &:extend(.my-inline-block);
}

輸出

.my-inline-block,
.thing1,
.thing2 {
  display: inline-block;
  font-size: 0;
}

3.實(shí)現(xiàn)步驟

  • 畫一個(gè)圓,為其添加偽元素，before設(shè)置box-shadow為圓添加立體感，after利用徑向漸變及rotate3d一些操作實(shí)現(xiàn)圓陰影，整體設(shè)置perspective透視1200px。


    image.png
<div class="ball"></div>

以下為less：

.i-b {
    display: inline-block;
  }
.p-3d {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.ball {
  &:extend(.i-b);
  // Extend 是一個(gè) Less 偽類，它將它所放置的選擇器與匹配它所引用的選擇器合并。
  width: 200px;
  height: 200px;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: #e6be74;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  &:extend(.p-3d);

  &:before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: -40px 10px 70px 10px rgba(0, 0, 0, 0.5) inset;
    z-index: 2;
  }

  &:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
    .trans-all(translateX(64px) rotateX(90deg) translateZ(-113px) rotateY(-30deg));
    z-index: -1;
  }
}

.trans-all(@content) {
  -webkit-transform: @content;
  -moz-transform: @content;
  -ms-transform: @content;
  -o-transform: @content;
  transform: @content;
}

  • 畫出第一道軌跡線（rotateZ+rotateY設(shè)置圓角度傾斜）。


    image.png
<div class="circle-line1"></div>

.circle-line1 {
    .create-circleLine(200px, 200px);
 }
.line {
  border-radius: 50%;
  position: absolute;
  border: 3px solid #5c5c6d;
  transform: rotateZ(60deg) rotateY(105deg);
  -webkit-transform: rotateZ(60deg) rotateY(105deg);
  &:extend(.p-3d);
}
.create-circleLine(@a, @b) {
  width: @a*2 ;
  height: @b*2;
  left: 50%;
  top: 50%;
  margin-left: -@a;
  margin-top: -@b;
  &:extend(.line);
}

  • 為第一道軌跡線設(shè)置前后偽元素，before和after設(shè)置圓點(diǎn)。


    image.png
.circle-line1 {
   .create-circleLine(200px, 200px);
   &::before {
     .create-circle(10px, 10px, #d87093, move);
     transform: rotateZ(0deg) translateX(200px) rotateZ(-0deg) rotateY(-105deg);
   }

   &::after {
     .create-circle(10px, 10px, #ad4eda, move4);
     transform: rotateZ(180deg) translateX(200px) rotateZ(-180deg) rotateY(-105deg);
   }
 }
 
.dot-center {
 border-radius: 50%;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
}

.create-circle(@a, @b, @color, @aname) {
 content: '';
 width: @a;
 height: @b;
 background: @color;
 filter: drop-shadow(10px 10px 10px @color);
 animation: @aname 20s linear infinite;
 &:extend(.dot-center);
}

  • 設(shè)置第一道軌跡線設(shè)置前后偽元素轉(zhuǎn)動(dòng)動(dòng)畫。


    7.gif
.circle-line1 {
 .create-circleLine(200px, 200px);
  &::before {
    .create-circle(10px, 10px, #d87093, move);
    transform: rotateZ(0deg) translateX(200px) rotateZ(-0deg) rotateY(-105deg);
    .create-keyframes(move, 0deg, 360deg, 200px, 105deg);
  }
  &::after {
    .create-circle(10px, 10px, #ad4eda, move4);
    transform: rotateZ(180deg) translateX(200px) rotateZ(-180deg) rotateY(-105deg);
    .create-keyframes(move4, -180deg, 180deg, 200px, 105deg);
  }
}
.create-keyframes(@name, @z, @z1, @radius, @y) {
   @keyframes @name {
     .create-animation(@z, @z1, @radius, @y)
   }
 }

.create-animation(@z, @z1, @radius, @y) {
 from {
   transform: rotateZ(@z) translateX(@radius) rotateZ(-@z) rotateY(-@y);
 }

 to {
   transform: rotateZ(@z1) translateX(@radius) rotateZ(-@z1) rotateY(-@y);
 }
}
  • 添加第二道，第三道軌跡，方法與上述內(nèi)容一致，區(qū)別在于圓半徑不同。

4.完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地球繞圈</title>
</head>
<link rel="stylesheet" href="../../common.css">
<link rel="stylesheet/less" href="./raoqiu.less" />
<body>
  <div class="ball">
    <div class="circle-line1"></div>
    <div class="circle-line2"></div>
    <div class="circle-line3"></div>
  </div>
</body>
<script src="../../less.1.7.3.js"></script>
</html>

  body {
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

  .i-b {
    display: inline-block;
  }

  .p-3d {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }

  .ball {
    &:extend(.i-b);
    width: 200px;
    height: 200px;
    margin: 0;
    border-radius: 50%;
    position: relative;
    background: #e6be74;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    &:extend(.p-3d);

    &:before {
      content: "";
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-shadow: -40px 10px 70px 10px rgba(0, 0, 0, 0.5) inset;
      z-index: 2;
    }

    &:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
      .trans-all(translateX(64px) rotateX(90deg) translateZ(-113px) rotateY(-30deg));
      z-index: -1;
    }
  }

  .trans-all(@content) {
    -webkit-transform: @content;
    -moz-transform: @content;
    -ms-transform: @content;
    -o-transform: @content;
    transform: @content;
  }

  .line {
    border-radius: 50%;
    position: absolute;
    border: 3px solid #5c5c6d;
    transform: rotateZ(60deg) rotateY(105deg);
    -webkit-transform: rotateZ(60deg) rotateY(105deg);
    &:extend(.p-3d);
  }

  .create-circleLine(@a, @b) {
    width: @a*2 ;
    height: @b*2;
    left: 50%;
    top: 50%;
    margin-left: -@a;
    margin-top: -@b;
    &:extend(.line);
  }

  .dot-center {
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }

  .create-circle(@a, @b, @color, @aname) {
    content: '';
    width: @a;
    height: @b;
    background: @color;
    filter: drop-shadow(10px 10px 10px @color);
    animation: @aname 20s linear infinite;
    &:extend(.dot-center);
  }

  .create-keyframes(@name, @z, @z1, @radius, @y) {
    @keyframes @name {
      .create-animation(@z, @z1, @radius, @y)
    }
  }

  .create-animation(@z, @z1, @radius, @y) {
    from {
      transform: rotateZ(@z) translateX(@radius) rotateZ(-@z) rotateY(-@y);
    }

    to {
      transform: rotateZ(@z1) translateX(@radius) rotateZ(-@z1) rotateY(-@y);
    }
  }

  .circle-line1 {
    .create-circleLine(200px, 200px);

    &::before {
      .create-circle(10px, 10px, #d87093, move);
      transform: rotateZ(0deg) translateX(200px) rotateZ(-0deg) rotateY(-105deg);
      .create-keyframes(move, 0deg, 360deg, 200px, 105deg);
    }

    &::after {
      .create-circle(10px, 10px, #ad4eda, move4);
      transform: rotateZ(180deg) translateX(200px) rotateZ(-180deg) rotateY(-105deg);
      .create-keyframes(move4, -180deg, 180deg, 200px, 105deg);
    }

  }

  .circle-line2 {
    .create-circleLine(250px, 250px);

    &::before {
      .create-circle(10px, 10px, #87ceeb, move2);
      .create-keyframes(move2, 0deg, 360deg, 250px, 105deg);

    }

    &::after {
      .create-circle(10px, 10px, #48dbbb, move5);
      .create-keyframes(move5, -180deg, 180deg, 250px, 105deg);

    }
  }

  .circle-line3 {
    .create-circleLine(160px, 160px);

    &::before {
      .create-circle(10px, 10px, #e44818, move3);
      .create-keyframes(move3, 0deg, 360deg, 160px, 105deg);
    }

    &::after {
      .create-circle(10px, 10px, #4396ce, move6);
      .create-keyframes(move6, -180deg, 180deg, 160px, 105deg);
    }

  }

5.更多css相關(guān)，蘇蘇的碼云。如果對(duì)你有幫助，歡迎你的star+訂閱！

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、屬性選擇器：id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,752評(píng)論 0贊 7
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定（選定）要進(jìn)行樣式設(shè)定的標(biāo)簽（元素）”。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,720評(píng)論 0贊 6
  • HTML 圖標(biāo)： meta標(biāo)簽 屬性： charset:指定網(wǎng)頁的字符集 name :指定的數(shù)據(jù)名稱 conten...
    ea91225ca48c閱讀 193評(píng)論 0贊 0
  • 一、簡介 參考CSS 教程[https://www.runoob.com/css/css-tutorial.htm...
    想聽丿伱說衹愛我閱讀 893評(píng)論 0贊 1
  • 一、 transition 過渡 1. 屬性 屬性版本繼承性描述transitionCSS3無復(fù)合屬性。檢索或設(shè)置...
    zerojs閱讀 434評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容