【動畫消消樂|CSS】083.純CSS實現(xiàn)卡通齒輪效果

前言

Hello枫夺!小伙伴!

非常感謝您閱讀海轟的文章绘闷,倘若文中有錯誤的地方橡庞,歡迎您指出~
?

自我介紹 ?(?ˊ?ˋ)?

昵稱:海轟

標(biāo)簽:程序猿|C++選手|學(xué)生

簡介:因C語言結(jié)識編程,隨后轉(zhuǎn)入計算機(jī)專業(yè)印蔗,有幸拿過國獎扒最、省獎等,已保研华嘹。目前正在學(xué)習(xí)C++/Linux(真的真的太難了~)

學(xué)習(xí)經(jīng)驗:扎實基礎(chǔ) + 多做筆記 + 多敲代碼 + 多思考 + 學(xué)好英語吧趣!
?

<font color="red" font-wight="800">【動畫消消樂】</font> 平時學(xué)習(xí)生活比較枯燥,無意之間對一些網(wǎng)頁耙厚、應(yīng)用程序的過渡/加載動畫產(chǎn)生了濃厚的興趣强挫,想知道具體是如何實現(xiàn)的? 便在空閑的時候?qū)W習(xí)下如何使用css實現(xiàn)一些簡單的動畫效果薛躬,文章僅供作為自己的學(xué)習(xí)筆記俯渤,記錄學(xué)習(xí)生活,爭取理解動畫的原理型宝,多多“消滅”動畫八匠!

效果展示

在這里插入圖片描述

Demo代碼

HTML

<!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">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>

    <body>
        <section>

            <div class="gear">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="hole"></div>
        </section>
    </body>

</html>

CSS

html, body {
    margin: 0;
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: gainsboro;
    /* background: #222f3e; */
}

section {
    width: 650px;
    height: 300px;
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid orange;
}

.gear {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #f98db9;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rotate 12s infinite linear;
}

.gear div {
    position: absolute;
    width: 30px;
    height: 150px;
    background: #f98db9;
    border-radius: 8px;
}

.gear div:nth-child(1) {
    transform: rotate(0deg);
}

.gear div:nth-child(2) {
    transform: rotate(45deg);
}

.gear div:nth-child(3) {
    transform: rotate(90deg);
}

.gear div:nth-child(4) {
    transform: rotate(135deg);
}

.hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

原理詳解

步驟1

使用兩個div,一個作為齒輪外部趴酣,一個作為內(nèi)部空心部分

          <div class="gear"></div>
          <div class="hole"></div>

設(shè)置gear

  • 寬度臀叙、高度均為120px
  • 背景色為粉紅色
  • flex布局(上下左右都居中)
.gear {
    width: 120px;
    height: 120px;
    background-color: #f98db9;
    display: flex;
    justify-content: center;
    align-items: center;
}

效果圖如下


在這里插入圖片描述

再設(shè)置hole

  • 絕對定位(使其位于正中心)
  • 寬度、高度均為50px
  • 背景色為白色
.hole {
    /*位于正中心*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 50px;
    height: 50px;
    background-color: white;
} 

效果圖如下

在這里插入圖片描述

步驟2

gear和hole同時圓角化

.gear {
    border-radius: 50%;
}
.hole {
    border-radius: 50%;
} 

效果圖如下

在這里插入圖片描述

步驟3

添加齒輪外部分的凹凸不平的那個部分(不知道具體叫啥价卤?劝萤?)


在這里插入圖片描述

一共設(shè)置8個 需要使用到4個div (一個div可以顯示出2個)

            <div class="gear">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>

設(shè)置div為

  • 絕對定位(重要!)
  • 寬度30px 高度150px
  • 顏色:粉色
  • border-radius: 8px;
.gear div {
    position: absolute;
    width: 30px;
    height: 150px;
    background: #f98db9;
    border-radius: 8px;
}

效果圖如下

在這里插入圖片描述

步驟4

給每個div設(shè)置旋轉(zhuǎn)角度慎璧,分別是

  • 0deg
  • 45deg
  • 90deg
  • 135deg
.gear div:nth-child(1) {
    transform: rotate(0deg);
}

.gear div:nth-child(2) {
    transform: rotate(45deg);
}

.gear div:nth-child(3) {
    transform: rotate(90deg);
}

.gear div:nth-child(4) {
    transform: rotate(135deg);
}

效果圖如下

在這里插入圖片描述

步驟5

最后再為gear添加一個旋轉(zhuǎn)動畫

.gear {
    animation: rotate 12s infinite linear;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

得到最終效果圖

在這里插入圖片描述

舉一反三

修改

  • 增加2個div
  • 修改旋轉(zhuǎn)角度(0 30 60 90 120 150deg)

效果圖如下:

在這里插入圖片描述

結(jié)語

文章僅作為學(xué)習(xí)筆記床嫌,記錄從0到1的一個過程

希望對您有所幫助,如有錯誤歡迎小伙伴指正~

我是 <font color="#0984e3">海轟?(?ˊ?ˋ)?</font>

如果您覺得寫得可以的話胸私,請點(diǎn)個贊吧

謝謝支持??


在這里插入圖片描述
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末厌处,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子岁疼,更是在濱河造成了極大的恐慌阔涉,老刑警劉巖缆娃,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異瑰排,居然都是意外死亡贯要,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進(jìn)店門椭住,熙熙樓的掌柜王于貴愁眉苦臉地迎上來崇渗,“玉大人,你說我怎么就攤上這事京郑≌悖” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵些举,是天一觀的道長跟狱。 經(jīng)常有香客問我,道長户魏,這世上最難降的妖魔是什么驶臊? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮绪抛,結(jié)果婚禮上资铡,老公的妹妹穿的比我還像新娘。我一直安慰自己幢码,他們只是感情好笤休,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著症副,像睡著了一般店雅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上贞铣,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天闹啦,我揣著相機(jī)與錄音,去河邊找鬼辕坝。 笑死窍奋,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的酱畅。 我是一名探鬼主播琳袄,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼纺酸!你這毒婦竟也來了窖逗?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤餐蔬,失蹤者是張志新(化名)和其女友劉穎碎紊,沒想到半個月后佑附,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡仗考,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年音同,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片痴鳄。...
    茶點(diǎn)故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡瘟斜,死狀恐怖缸夹,靈堂內(nèi)的尸體忽然破棺而出痪寻,到底是詐尸還是另有隱情,我是刑警寧澤虽惭,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布橡类,位于F島的核電站,受9級特大地震影響芽唇,放射性物質(zhì)發(fā)生泄漏顾画。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一匆笤、第九天 我趴在偏房一處隱蔽的房頂上張望研侣。 院中可真熱鬧,春花似錦炮捧、人聲如沸庶诡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽末誓。三九已至,卻和暖如春书蚪,著一層夾襖步出監(jiān)牢的瞬間喇澡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工殊校, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留晴玖,地道東北人。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓为流,卻偏偏與公主長得像呕屎,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子艺谆,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評論 2 361

推薦閱讀更多精彩內(nèi)容