css3 利用transform-origin 實現(xiàn)圓點分布在大圓上布局及旋轉(zhuǎn)特效

發(fā)布時間：2021-04-29 15:42:49 作者：12歲零120個月的孩子

這篇文章主要介紹了css3 利用transform-origin 實現(xiàn)圓點分布在大圓上布局及旋轉(zhuǎn)特效,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

首先要使用transform-origin屬性，必須使用transform 屬性，其有很多屬性，我們只需要用到transform的rotate屬性（設(shè)置2D旋轉(zhuǎn)角度），再搭配 transform-origin 設(shè)置其中心點。最后搭配css3動畫屬性animation。完成我們想要的效果。
先上效果圖：

在這里插入圖片描述

圓都是動態(tài)的。
步驟如下：
1、transform屬性使用：
我們只需要利用這個屬性設(shè)置我們需要這個點在圓上的那個位置。transform:rotate(你需要的度數(shù)deg)。另外我們需要注意一個點（如果是需要小圓分布在大圓的圓邊上，我們需要給大圓設(shè)置相對屬性position: relative，給小圓設(shè)置絕對屬性position: absolute，來防止小圓跑到大圓外了）。這樣我們就完成了第一步。
2、transform-origin屬性使用：
首先我們需要明白transform-origin屬性的意義。其可以設(shè)置3個屬性，我理解為分別為依次XYZ三個軸。我們這里需要使用XY2個軸。其默認(rèn)屬性是 50% 50% 0。那么這是啥意思呢？很簡單，就是以設(shè)置了這個transform-origin屬性的節(jié)點的左上角為起始點。向X軸移動50%，Y軸移動50%。當(dāng)然如果你想要的中心點不再該節(jié)點內(nèi)，可以使用PX來指定節(jié)點外的中心點
第二步我們就能得到一個分部在大圓邊界線上的小圓的效果了
3、animation屬性使用：
同樣，首先我們需要知道animation屬性為動畫，具體自己看文檔。我們需要的就是這句話

animation:myfirst 10s linear infinite;

myfirst：為綁定@keyframes用的Id
10s: 時間
linear: 勻速
infinite：持續(xù)不斷

最后搭配@keyframes

 @keyframes myfirst{
    0%{
      transform: rotate(0);
    }
    25%{
      transform:rotate(90deg);
    }
    50%{
      transform:rotate(180deg);
    }
    75%{
      transform:rotate(270deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }

完成了

到此這篇關(guān)于css3 利用transform-origin 實現(xiàn)圓點分布在大圓上布局及旋轉(zhuǎn)特效的文章就介紹到這了,更多相關(guān)css3實現(xiàn)圓點分布在大圓上布局及旋轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！