【動畫消消樂｜CSS】083.純CSS實現卡通齒輪效果

海轟Pro發表於2021-08-14
動畫CSS

前言

Hello！小夥伴！
非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～
 
自我介紹 ଘ(੭ˊᵕˋ)੭
暱稱：海轟
標籤：程式猿｜C++選手｜學生
簡介：因C語言結識程式設計，隨後轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C++/Linux（真的真的太難了～）
學習經驗：紮實基礎 + 多做筆記 + 多敲程式碼 + 多思考 + 學好英語！
 
【動畫消消樂】 平時學習生活比較枯燥，無意之間對一些網頁、應用程式的過渡/載入動畫產生了濃厚的興趣，想知道具體是如何實現的？ 便在空閒的時候學習下如何使用css實現一些簡單的動畫效果，文章僅供作為自己的學習筆記，記錄學習生活，爭取理解動畫的原理，多多“消滅”動畫！

效果展示

在這裡插入圖片描述

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，一個作為齒輪外部，一個作為內部空心部分

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

設定gear

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

效果圖如下
在這裡插入圖片描述
再設定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

新增齒輪外部分的凹凸不平的那個部分（不知道具體叫啥？？）
在這裡插入圖片描述

一共設定8個 需要使用到4個div （一個div可以顯示出2個）

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

設定div為

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

效果圖如下

在這裡插入圖片描述

步驟4

給每個div設定旋轉角度，分別是

  • 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新增一個旋轉動畫

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

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

得到最終效果圖

在這裡插入圖片描述

舉一反三

修改

  • 增加2個div
  • 修改旋轉角度（0 30 60 90 120 150deg）

效果圖如下：

在這裡插入圖片描述

結語

文章僅作為學習筆記，記錄從0到1的一個過程

希望對您有所幫助，如有錯誤歡迎小夥伴指正～

我是 海轟ଘ(੭ˊᵕˋ)੭

如果您覺得寫得可以的話，請點個贊吧

謝謝支援❤️
在這裡插入圖片描述

相關文章