前言

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实现卡通齿轮效果相关推荐

[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
[css] 使用纯css来创建一个滑块
[css] 使用纯css来创建一个滑块 .checke{position: relative;-webkit-appearance: none;width:90px;height: 44px;line ...
[css] 使用纯css能否监控到用户的一些信息？怎么实现？
[css] 使用纯css能否监控到用户的一些信息?怎么实现? 利用:active 伪类实现监控用户的点击 .button-1:active::after {content: url(./pixel.g ...
html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...
css海浪动画代码,不行一行代码，纯css实现海浪动态效果！
直入主题:首先画一个简单的盒子: 利用::before与::after画两个圆角值(radius)不同的不规则圆形: 父元素设置overflow: hidden 最后加上animation动画让两个不 ...
html超市代码,前端 CSS : 5# 纯 CSS 实现24小时超市
介绍原文链接感謝 comehope 大佬的 [前端每日实战] 效果预览源代码地址代码解读 1. html 结构命名规则使用了 BEM 常规样式初始化 * { margin: 0; paddi ...
css 语音,纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
语音气泡是一种很流行的效果,在很多社交网站上可以看到评论使用这样的效果来实现,对于游客来说非常有吸引力,但我发现很多这样的效果都是依赖于HTML或JavaScript来实现的非常麻烦.本教程包含各种形 ...

【动画消消乐｜CSS】083.纯CSS实现卡通齿轮效果

前言

效果展示

Demo代码

原理详解

步骤1

步骤2

步骤3

步骤4

步骤5

举一反三

结语

【动画消消乐｜CSS】083.纯CSS实现卡通齿轮效果相关推荐

最新文章

热门文章