前言

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="box"><div></div><div></div><div></div><div></div></div></section></body></html>

CSS

html, body {margin: 0;height: 100%;
}body {display: flex;justify-content: center;align-items: center;background-color: #5e825a;animation: backColor 4s infinite;
}section {width: 650px;height: 300px;padding: 10px;position: relative;display: flex;align-items: center;justify-content: center;border: 2px solid white;
}.box {width: 100px;height: 100px;display: flex;flex-wrap: wrap;
}.box>div:nth-child(1) {width: 50px;height: 50px;background-color: #c0f0b9;animation: load1 4s infinite;
}.box>div:nth-child(2) {width: 50px;height: 50px;background-color: #f0d8ad;animation: load2 4s infinite;
}.box>div:nth-child(3) {width: 50px;height: 50px;background-color: #f0addb;animation: load3 4s infinite;
}.box>div:nth-child(4) {width: 50px;height: 50px;background-color: #c4d8f0;animation: load4 4s infinite;
}@keyframes load1 {from {transform: translate(0);}25% {transform: translate(100%);}50% {transform: translate(100%, 100%);}75% {transform: translate(0, 100%);}
}@keyframes load2 {from {transform: translate(0);}25% {transform: translate(0, 100%);}50% {transform: translate(-100%, 100%);}75% {transform: translate(-100%, 0);}
}@keyframes load3 {from {transform: translate(0);}25% {transform: translate(0, -100%);}50% {transform: translate(100%, -100%);}75% {transform: translate(100%);}
}@keyframes load4 {from {transform: translate(0);}25% {transform: translate(-100%, 0);}50% {transform: translate(-100%, -100%);}75% {transform: translate(0, -100%);}
}@keyframes backColor {from {background-color: #5e825a;}25% {background-color: #82466e;}50% {background-color: #425e82;}75% {background-color: #423827;}
}

原理详解

步骤1

使用一个div作为包含四个小方块的大容器

其中每个小方块也是用一个div表示

            <div class="box"><div></div><div></div><div></div><div></div></div>

设置为

宽度、高度均为100px
flex布局
背景色：蓝色

.box {width: 100px;height: 100px;display: flex;flex-wrap: wrap;// 换行background-color: blue;
}

效果图如下

步骤2

分别设置四个小方块均匀分布

宽度、高度均为50px
颜色为四种（自定义）


.box>div:nth-child(1) {width: 50px;height: 50px;background-color: #c0f0b9;
}.box>div:nth-child(2) {width: 50px;height: 50px;background-color: #f0d8ad;
}.box>div:nth-child(3) {width: 50px;height: 50px;background-color: #f0addb;
}.box>div:nth-child(4) {width: 50px;height: 50px;background-color: #c4d8f0;
}

效果图如下

步骤3

为每个小方块添加动画

这里以一个方块为例

动画简化为关键四个步骤

右移
再下移
再左移
最后上移

右移说明：

下移说明：

左移说明：

上移说明：

主要借助transform属性进行方块的移动

.box>div:nth-child(1) {animation: load1 4s infinite;
}@keyframes load1 {from {transform: translate(0);}25% {transform: translate(100%);}50% {transform: translate(100%, 100%);}75% {transform: translate(0, 100%);}
}

方块的移动效果如下

注意：translate(x, y)是以最开始的位置作为参考点的

步骤4

其他方块的动画原理也是一样的

不同的就是起始位置不同

编写动画效果的时候注意下需要移动方向的顺序即可（一共就4个移动方向顺序可以组合）


.box>div:nth-child(1) {animation: load1 4s infinite;
}.box>div:nth-child(2) {animation: load2 4s infinite;
}.box>div:nth-child(3) {animation: load3 4s infinite;
}.box>div:nth-child(4) {animation: load4 4s infinite;
} @keyframes load1 {from {transform: translate(0);}25% {transform: translate(100%);}50% {transform: translate(100%, 100%);}75% {transform: translate(0, 100%);}
}@keyframes load2 {from {transform: translate(0);}25% {transform: translate(0, 100%);}50% {transform: translate(-100%, 100%);}75% {transform: translate(-100%, 0);}
}@keyframes load3 {from {transform: translate(0);}25% {transform: translate(0, -100%);}50% {transform: translate(100%, -100%);}75% {transform: translate(100%);}
}@keyframes load4 {from {transform: translate(0);}25% {transform: translate(-100%, 0);}50% {transform: translate(-100%, -100%);}75% {transform: translate(0, -100%);}
}

效果图如下

步骤5

注释掉box的背景色

.box {width: 100px;height: 100px;display: flex;flex-wrap: wrap;/* background-color: blue; */
}

步骤6

在全局背景设置中添加动画

使得全局背景颜色随着方块的移动而随着变色

body {animation: backColor 4s infinite;
}@keyframes backColor {from {background-color: #5e825a;}25% {background-color: #82466e;}50% {background-color: #425e82;}75% {background-color: #423827;}
}

得到最终效果图

结语

文章仅作为学习笔记，记录从0到1的一个过程。

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

我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧

写作不易 「点赞」+「收藏」+「转发」

谢谢支持❤️

【动画消消乐】一个小清新类型的全局网页过渡动画 075相关推荐

用RecyclerView做一个小清新的Gallery效果
一.简介 RecyclerView现在已经是越来越强大,且不说已经被大家用到滚瓜烂熟的代替ListView的基础功能,现在RecyclerView还可以取代ViewPager实现Banner效果,当然 ...
教你用AI十步绘制一个小清新的风车插画
作为一个设计师,小清新的插画是必须要会制作的,小千今天就来教大家用10步就绘制一个风车插画,看到就是学到. 一.绘制房子的基础图形,先使用矩形工具(M)绘制一个120×140PX的白色矩形,作为风车房 ...
android 弹出菜单环形,『Android自定义View实战』实现一个小清新的弹出式圆环菜单...
前言 Android表现快捷菜单的形式有很多种,比如使用PopupWindow弹出来的小弹窗,类似QQ的侧拉功能菜单,以及之前讲过的弧形菜单( Android 自定义弧形旋转菜单栏--卫星菜单),这次 ...
一个小清新的知识管理和问题讨论平台
在上一期的<一个小团队使用的知识管理方案与工具>推文中,我们介绍了一些 Atlassian Confluence(简称 Confluence)的一些基本特性. 今天的这篇推文主要来介绍一下 ...
一个小清新搜索引擎试用感受 - 多吉搜索引擎(dogegoge)
网址:https://www.dogedoge.com/ 首先用中文作为关键字进行搜索: 搜索结果的界面非常干净,没有竞价排名等广告. 这里有个小开关可以在中文网页和英文网页中切换: 再换成两个纯英文 ...
云桌面可附加桌面文件的程序_给我几分钟，还你一个小清新的电脑桌面
点击上方蓝字看更多精彩内容今天小卢带大家给电脑桌面做个美容先来看看效果吧觉得还不错的朋友下面就跟小卢一起动起手来吧首先需要准备的东西有如图所示的软件,以及一套风格统一的图标. StartIs ...
关于所有支持多人游戏本地联机/steam远程同乐一个小技巧
这个技巧有什么好处对比远程同乐, 延迟低,不需要加速器,不需要挂梯子.只要有一名主机玩家拥有该游戏其他玩家也能共享. 我该怎么知道我想玩的这款多人游戏支不支持本地联机/远程同乐支不支持本地联机:百 ...
分享一个小清新的论坛源码
项目描述 Hi,大家好,今天分享的项目是<小型论坛系统源码>,本系统分用户前台和管理员后台. 用户前台主要功能有: 用户注册用户登录浏览帖子回复帖子修改个人资料管理员后台的功能有 ...
PS教程！手把手教你打造一个配色小清新的地图图标
@P大点S微博 :今天的教程是一个小清新风格的定位图标,操作不复杂,重点是图标样式的应用.源文件已打包,来收! PSD源文件打包下载:http://pan.baidu.com/s/1qWYXqlm ...
升级版Python学习教程：SQLAlchemy太庞大，不妨试试这位小清新-Peewee
SQLAlchemy 功能很强大,文档很丰富,是一个重量级的 ORM 框架.本篇Python学习教程给大家介绍一个小清新,轻量级 ORM 框架 Peewee,支持 Python 2.7+ 和 3.4+ ...

【动画消消乐】一个小清新类型的全局网页过渡动画 075

前言

效果展示

Demo代码

原理详解

步骤1

步骤2

步骤3

步骤4

步骤5

步骤6

结语

【动画消消乐】一个小清新类型的全局网页过渡动画 075相关推荐

最新文章

热门文章

【动画消消乐 】一个小清新类型的全局网页过渡动画 075

前言

效果展示

Demo代码

原理详解

步骤1

步骤2

步骤3

步骤4

步骤5

步骤6

结语

【动画消消乐 】一个小清新类型的全局网页过渡动画 075相关推荐

最新文章

热门文章

【动画消消乐】一个小清新类型的全局网页过渡动画 075

【动画消消乐】一个小清新类型的全局网页过渡动画 075相关推荐