前言

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的一个过程

希望对您有所帮助，如有错误欢迎小伙伴指正～

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

如果您觉得写得可以的话，请点个赞吧

谢谢支持️

【动画消消乐｜CSS】083.纯CSS实现卡通齿轮效果的更多相关文章

  1. CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  2. 【CSS】纯css实现立体摆放图片效果

    1.  元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...

  3. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  4. 【css】纯css实现文字循环滚动效果

    不用js来实现. html: <div class="box"> <p class="animate"> 文字滚动的内容文字滚动的内容文 ...

  5. 瀑布流的实现纯CSS实现Jquery实现

    瀑布流的实现 注:本文部分图片自百度下载,如有侵权,联系删图. 首先,选择几张图片布局到HTML内容中.HTML如下所示. <div class="wrapper"> ...

  6. 【动画消消乐】HTML+CSS 自定义加载动画 061

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

  7. 【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解）

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

  8. 【动画消消乐】HTML+CSS 自定义加载动画 064（currentColor的妙用！）

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

  9. 【动画消消乐】HTML+CSS 自定义加载动画 065

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

随机推荐

  1. SpringCloud 微服务最佳开发实践

    Maven规范 所有项目必须要有一个统一的parent模块 所有微服务工程都依赖这个parent,parent用于管理依赖版本,maven仓库,jar版本的统一升级维护 在parent下层可以有 co ...

  2. 『心善渊』Selenium3.0基础 — 21、Selenium实现绕过验证码进行登陆

    目录 1.验证码问题 2.处理验证码的方法 3.Selenium绕过验证码登陆的实现 4.总结 5.补充练习 1.验证码问题 对于Web应用来说,大部分的系统在用户登录时,都要求用户输入验证码.验证码 ...

  3. 使用了gitlab管理pipeline，Jenkinsfile 中在出现克隆命令流水线执行会混乱

    Jenkins_pipeline关闭默认检出 问题描述 在使用 Pipeline(流水线)过程中,如果使用了(Pipeline script from SCM)远程 Git 的 Jenkinsfile ...

  4. 【转载】CentOS-Docker安装MongoDB(单点)

    下载镜像 $ docker pull mongo 创建相关目录 $ mkdir -p /usr/mongo/data /usr/mongo/dump 运行镜像 $ docker run --resta ...

  5. 【故障公告】redis 服务器宕机引发博客站点故障

    非常抱歉,今天下午 17:10~17:40 左右,由于博客系统所使用的 redis 服务器宕机,造成博客站点无法正常访问,由此给您带来很大的麻烦,请您谅解. 我们会针对这次故障改进 redis 服务器 ...

  6. 记两道最近做的pwn题（ciscn_2019）

    这两题为什么要记录呢,一个是我发现网上很多教程没写清楚(也可能是我太菜了),二是细节点很多,不同的大佬方式不太一样,有很多细节需要注意 ciscn_2019_es_2 这题是栈迁移的题,先上exp 1 ...

  7. "Shortest" pair of paths[题解]

    "Shortest" pair of paths 题目大意 给出 \(n\) 个点,\(m\) 条边,除第一个点和最后一个点外,其他所有的点都只能被经过一次,要求找到两条从第一个点 ...

  8. Grafana、Prometheus-监控平台

    一:Grafana 简介与部署 安利一个生产环境正在使用的监控和告警平台:grafana,它是一个开源的可对指标和日志进行查询.可视化和告警的平台. docker 安装官方文档:https://gra ...

  9. Pytest单元测试框架之setup/teardown模块示例操作

    """模块级(setup_module/teardown_module)开始于模块始末,全局的函数级(setup_function/teardown_function)只 ...

  10. 【剑指offer】55 - I. 二叉树的深度

    剑指 Offer 55 - I. 二叉树的深度 知识点:二叉树,递归 题目描述 输入一棵二叉树的根节点,求该树的深度.从根节点到叶节点依次经过的节点(含根.叶节点)形成树的一条路径,最长路径的长度为树 ...