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

首先 要使用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)文章
CSS3實(shí)現(xiàn)360度循環(huán)旋轉(zhuǎn)功能
這篇文章主要介紹了CSS3實(shí)現(xiàn)360度循環(huán)旋轉(zhuǎn)功能,整個div360度旋轉(zhuǎn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考2022-01-25css3 實(shí)現(xiàn)圓形旋轉(zhuǎn)倒計(jì)時
這篇文章主要介紹了css3 實(shí)現(xiàn)圓形旋轉(zhuǎn)倒計(jì)時功能,需要的朋友可以參考下2018-02-24CSS3實(shí)現(xiàn)頭像旋轉(zhuǎn)效果
本篇文章主要介紹了CSS3實(shí)現(xiàn)頭像旋轉(zhuǎn)效果,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-13純CSS3制作的鼠標(biāo)懸停時邊框旋轉(zhuǎn)
本文給大家分享一段css3代碼實(shí)現(xiàn)鼠標(biāo)懸停時邊框旋轉(zhuǎn)的效果,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-01-03CSS3使用雙旋轉(zhuǎn)實(shí)現(xiàn)福到了的迎春喜慶特效代碼
春節(jié)快到了,因?yàn)橐咔橐呀?jīng)好久沒有回老家了,今年終于可以回家過年了,我已經(jīng)抑制不住自己激動的心情了。因此,我利用css3的旋轉(zhuǎn)做了一個福到了的特效,而且是雙旋轉(zhuǎn),感興2023-01-29