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

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

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

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

在這里插入圖片描述

圓都是動態(tài)的。
步驟如下：
1、transform屬性使用：
我們只需要利用這個屬性設置我們需要這個點在圓上的那個位置。transform:rotate(你需要的度數(shù)deg)。另外我們需要注意一個點（如果是需要小圓分布在大圓的圓邊上，我們需要給大圓設置相對屬性position: relative，給小圓設置絕對屬性position: absolute，來防止小圓跑到大圓外了）。這樣我們就完成了第一步。
2、transform-origin屬性使用：
首先我們需要明白transform-origin屬性的意義。其可以設置3個屬性，我理解為分別為依次XYZ三個軸。我們這里需要使用XY2個軸。其默認屬性是 50% 50% 0。那么這是啥意思呢？很簡單，就是以設置了這個transform-origin屬性的節(jié)點的左上角為起始點。向X軸移動50%，Y軸移動50%。當然如果你想要的中心點不再該節(jié)點內，可以使用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);
    }
  }

完成了

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