欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間:2021-04-29 15:42:49   作者:12歲零120個月的孩子   我要評論
這篇文章主要介紹了css3 利用transform-origin 實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)特效,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

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

在這里插入圖片描述

圓都是動態(tài)的。
步驟如下:
1、transform屬性使用:
我們只需要利用這個屬性設(shè)置我們需要這個點(diǎn)在圓上的那個位置。transform:rotate(你需要的度數(shù)deg)。另外我們需要注意一個點(diǎn)(如果是需要小圓分布在大圓的圓邊上,我們需要給大圓設(shè)置相對屬性position: relative,給小圓設(shè)置絕對屬性position: absolute,來防止小圓跑到大圓外了)。這樣我們就完成了第一步。
2、transform-origin屬性使用:
首先我們需要明白transform-origin屬性的意義。其可以設(shè)置3個屬性,我理解為分別為依次XYZ三個軸。我們這里需要使用XY2個軸。其默認(rèn)屬性是 50% 50% 0。那么這是啥意思呢?很簡單,就是以設(shè)置了這個transform-origin屬性的節(jié)點(diǎn)的左上角為起始點(diǎn)。向X軸移動50%,Y軸移動50%。當(dāng)然如果你想要的中心點(diǎn)不再該節(jié)點(diǎn)內(nèi),可以使用PX來指定節(jié)點(diǎn)外的中心點(diǎn)
第二步我們就能得到一個分部在大圓邊界線上的小圓的效果了
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 實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)特效的文章就介紹到這了,更多相關(guān)css3實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論