前言

Hello！小伙伴！

非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～

 

自我介绍 ଘ(੭ˊᵕˋ)੭

昵称：海轰

标签：程序猿｜C++选手｜学生

简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）

学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！

 

【动画消消乐】 平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？ 便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！

效果展示

Demo代码

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.         <link rel="stylesheet" href="style.css">
  9.         <title>Document</title>
  10.     </head>
  12.     <body>
  13.         <section>
  14.             <div class="circle">
  15.                 <div class="wave"></div>
  16.             </div>
  17.         </section>
  18.     </body>
  20. </html>

CSS

  1. /*
  2. 模版css样式
  3. 仅供演示使用
  4. */
  6. html, body {
  7. 	margin: 0;
  8. 	height: 100%;
  9. } 
  11. body {
  12. 	display: flex;
  13. 	justify-content: center;
  14. 	align-items: center;
  15. 	background-color: #12383e;
  16. }
  18. section {
  19. 	width: 650px;
  20. 	height: 300px;
  21. 	padding: 10px;
  22. 	position: relative;
  23. 	display: flex;
  24. 	align-items: center;
  25. 	justify-content: center;
  26. 	border-radius: 20px;
  27. 	border: 18px solid white;
  28. 	overflow: hidden;
  29. }
  31. section::before {
  32. 	content: 'CSS';
  33. 	width: 150px;
  34. 	height: 150px;
  35. 	text-align: center;
  36. 	line-height: 250px;
  37. 	background-color: #00cec9;
  38. 	position: absolute;
  39. 	top: -76px;
  40. 	right: -76px;
  41. 	transform: translate(50%, -50%);
  42. 	font-size: 32px;
  43. 	font-weight: 500;
  44. 	font-family: sans-serif;
  45. 	color: white;
  46. 	transform: rotate(45deg);
  47. }
  49. section::after {
  50. 	content: '';
  51. 	position: absolute;
  52. 	width: 100%;
  53. 	height: 100%;
  54. 	border: 10px solid white;
  55. 	border-radius: 20px;
  56. }
  58. /* 实现代码 */
  60. .circle {
  61. 	position: relative;
  62. 	width: 200px;
  63. 	height: 200px;
  64. 	background: #b0f4ff;
  65. 	border-radius: 50%;
  66. 	overflow: hidden;
  67. 	animation: loadingBreath 5s infinite linear;
  68. }
  70. .circle::before {
  71. 	content: 'Loading...';
  72. 	position: absolute;
  73. 	top: 50%;
  74. 	left: 50%;
  75. 	transform: translate(-50%, -50%);
  76. 	font-size: 18px;
  77. 	letter-spacing: 2px;
  78. 	color: #10a789;
  79. 	font-family: sans-serif;
  80. 	z-index: 2;
  81. }
  83. .circle::after {
  84. 	content: '';
  85. 	position: absolute;
  86. 	width: 100%;
  87. 	height: 25%;
  88. 	bottom: 0;
  89. 	background-image: linear-gradient(to top, #12c8e0, #36e9ff, #5ffbf1);
  90. 	animation: loadingRun 5s linear infinite;
  91. }
  93. .wave::before {
  94. 	content: '';
  95. 	position: absolute;
  96. 	left: -50%;
  97. 	width: 200%;
  98. 	height: 200%;
  99. 	z-index: 1;
  100. 	background-color: #85f7fb;
  101. 	border-radius: 52% 25% 62% 69%/25% 38%;
  102. 	animation: loadingWave 5s linear infinite;
  103. }
  105. .wave::after {
  106. 	content: '';
  107. 	position: absolute;
  108. 	left: -50%;
  109. 	width: 200%;
  110. 	height: 200%;
  111. 	z-index: 1;
  112. 	background-color: #d0f4ff;
  113. 	border-radius: 42% 38% 40% 62%/28% 35%;
  114. 	animation: loadingWave 5s ease-in-out infinite;
  115. }
  117. /* 呼吸灯动画 */
  119. @keyframes loadingBreath {
  120. 	0% {
  121. 		box-shadow: 0 0 5px 0 #85f7fb;
  122. 	}
  123. 	25% {
  124. 		box-shadow: 0 0 20px 0 #85f7fb;
  125. 	}
  126. 	50% {
  127. 		box-shadow: 0 0 5px 0 #85f7fb;
  128. 	}
  129. 	75% {
  130. 		box-shadow: 0 0 20px 0 #85f7fb;
  131. 	}
  132. 	100% {
  133. 		box-shadow: 0 0 5px 0 #85f7fb;
  134. 	}
  135. }
  137. /* 底部液体上升动画 */
  139. @keyframes loadingRun {
  140. 	0% {
  141. 		height: 25%;
  142. 	}
  143. 	100% {
  144. 		height: 100%;
  145. 	}
  146. }
  148. /* wave动画 */
  150. @keyframes loadingWave {
  151. 	0% {
  152. 		top: -100%;
  153. 		transform: rotate(0);
  154. 	}
  155. 	100% {
  156. 		top: -200%;
  157. 		transform: rotate(360deg);
  158. 	}
  159. }

原理详解

步骤1

从效果图上分析

可以将其分为两个部分

  • 容器
  • 波浪

这里使用两个div，一个为circle类，一个为wave类，分别代表容器和wave

  1.             <div class="circle">
  2.                 <div class="wave"></div>
  3.             </div>

步骤2

设置circle类

  • 相对定位
  • 宽度、高度均为200px
  • 背景色：#b0f4ff
  • 圆角：50%
  1. .circle {
  2. 	position: relative;
  3. 	width: 200px;
  4. 	height: 200px;
  5. 	background: #b0f4ff;
  6. 	border-radius: 50%;
  7. }

效果图如下：

步骤3

利用.circle::befor伪元素

用于显示“Loading...”字样

设置为

  • 绝对定位
  • 使其位于正中间（ top: 50%; left: 50%; transform: translate(-50%, -50%);）
  • 字体大小：18px
  • 颜色：#10a789;
  • z-index：2（比1大就行 使其文字处于最上层）
  1. .circle::before {
  2. 	content: 'Loading...';
  3. 	position: absolute;
  4. 	top: 50%;
  5. 	left: 50%;
  6. 	transform: translate(-50%, -50%);
  7. 	font-size: 18px;
  8. 	letter-spacing: 2px;
  9. 	color: #10a789;
  10. 	font-family: sans-serif;
  11. 	z-index: 2;
  12. }

效果图如下：

步骤4

利用.circle::after伪元素

设置为

  • 绝对定位（bottom: 0; ）
  • 宽度：100%
  • 高度：25%
  • 背景颜色为渐变色 linear-gradient(to top, #12c8e0, #36e9ff, #5ffbf1);
  1. .circle::after {
  2. 	content: '';
  3. 	position: absolute;
  4. 	width: 100%;
  5. 	height: 25%;
  6. 	bottom: 0;
  7. 	background-image: linear-gradient(to top, #12c8e0, #36e9ff, #5ffbf1);
  8. }

效果图如下：

步骤5

为.circle::after伪元素添加动画

使其随时间其高度逐渐增大

只需要明确两个关键帧

  • 初始位置：height: 25%
  • 结束位置：height: 100%
  1. .circle::after {
  2. 	animation: loadingRun 5s linear infinite;
  3. }
  5. @keyframes loadingRun {
  6. 	0% {
  7. 		height: 25%;
  8. 	}
  9. 	100% {
  10. 		height: 100%;
  11. 	}
  12. }

效果图如下：

步骤6

对circle设置隐藏溢出

  1. .circle {
  2. 	overflow: hidden;
  3. }

效果图如下：

步骤7

这里先注释circle隐藏溢出 以及 circle::after动画 便于后面单独分析

  1. .circle {
  2. 	/* overflow: hidden; */
  3. }
  4. .circle::after {
  5. 	/* animation: loadingRun 5s linear infinite; */
  6. }

然后我们使用wave的两个伪元素.wave::before、.wave::afte与cirle::after产生波浪的效果

首先设置wave::before

  • 绝对定位（left: -50%;）
  • 宽度、高度均为200%
  • z-index：1
  • 背景色：#85f7fb
  • border-radius: 52% 25% 62% 69%/25% 38%; 重点
  1. .wave::before {
  2. 	content: '';
  3. 	position: absolute;
  4. 	left: -50%;
  5. 	width: 200%;
  6. 	height: 200%;
  7. 	z-index: 1;
  8. 	background-color: #85f7fb;
  9. 	border-radius: 52% 25% 62% 69%/25% 38%;/*重点*/
  10. }

效果图如下：



注：.wave::before z-index为1 大于circile(0) 小于.circle::before(2)

为.wave::before 添加动画

效果描述

自身不断旋转的同时 也不断上升

  1. .wave::before {
  2. 	animation: loadingWave 5s linear infinite;
  3. }
  5. @keyframes loadingWave {
  6. 	0% {
  7. 		top: -100%;
  8. 		transform: rotate(0);
  9. 	}
  10. 	100% {
  11. 		top: -200%;
  12. 		transform: rotate(360deg);
  13. 	}
  14. }

效果图如下：

同理，对wave::after进行同样的设置

不同在于ç四边圆角率与before不同、颜色浅一点

  1. border-radius: 42% 38% 40% 62%/28% 35%;
  2. background-color: #d0f4ff;

其他都一样



当wave::after、before运用同样的动画时

效果图如下：

步骤8

取消circle隐藏溢出 以及 circle::after动画

  1. .circle {
  2. 	overflow: hidden;
  3. }
  4. .circle::after {
  5. 	 animation: loadingRun 5s linear infinite;
  6. }

效果图如下：

步骤9

最后为cirlce添加一个呼吸灯动画效果

  1. .circle {
  2. 	animation: loadingBreath 5s infinite linear;
  3. }
  5. ```css
  7. @keyframes loadingBreath {
  8. 	0% {
  9. 		box-shadow: 0 0 5px 0 #85f7fb;
  10. 	}
  11. 	25% {
  12. 		box-shadow: 0 0 20px 0 #85f7fb;
  13. 	}
  14. 	50% {
  15. 		box-shadow: 0 0 5px 0 #85f7fb;
  16. 	}
  17. 	75% {
  18. 		box-shadow: 0 0 20px 0 #85f7fb;
  19. 	}
  20. 	100% {
  21. 		box-shadow: 0 0 5px 0 #85f7fb;
  22. 	}
  23. }

得到最终效果图

结语

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

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

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

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

谢谢支持️

学习参考：

https://www.bilibili.com/video/BV1Ai4y1t7od

https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before

【动画消消乐｜CSS】086.炫酷水波浪Loading过渡动画的更多相关文章

  1. 17.纯 CSS 创作炫酷的同心矩形旋转动画

    原文地址:https://segmentfault.com/a/1190000014807564 感想: 这个特效不难,但是这想法可能想不到,哈哈,怎么又废了. HTML代码: <div cla ...

  2. 如何用纯 CSS 创作炫酷的同心矩形旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...

  3. 前端每日实战：17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频 ...

  4. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  5. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  6. 开源分享三（炫酷的Android Loading动画）

    开源分享三(炫酷的Android Loading动画) 分享GitHub上的一些Loading,为了提升产品用户体验,一个好的Loading必然是不可缺少的,对于一些耗时需要用户等待的页面来说会转移用 ...

  7. 使用css实现炫酷的横屏滚动效果

    炫酷的横屏滚动效果css实现 DEMO: https://codepen.io/kobako/pen/BxVLLm 我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是 ...

  8. 教你用原生CSS写炫酷页面切换效果，跟第三方组件说拜拜

    因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看.有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客. 样式介绍 给大 ...

  9. 17.1拓展之纯 CSS 创作炫酷的同心圆旋转动画

    效果地址:https://codepen.io/flyingliao/pen/ebjEMm?editors=1100 HTML代码: <div class="loader"& ...

随机推荐

  1. Gerrit GitLab GitHub的几点不同

    代码评审的方式不一样 GitHub是基于Pull Request 进行代码评审; GitLab是基于Merge Request 进行代码评审; Gerrit是基于Change Request 进行代码 ...

  2. 关于HTML的常用标签

    目录 前言 html常用标签 排版标签 图像标签 链接标签 注释标签 预格式化文本pre标签&特殊字符 语义化标签 前言 本文主要是对html的常用标签一个总结归纳,对所学的内容做一个查漏补缺 ...

  3. SpringMVC（4）数据绑定-1

    在SpringMVC(3)URL请求到Action的映射规则我们介绍了请求是如何映射到一个action上的,下一步当然是如何获取到请求中的数据,这就引出了本篇所要讲的内容-数据绑定. 首先看一下都有哪 ...

  4. kali安装angr

    最近打算重新学习一波angr,先把环境搭好 1. 先安装virtualenv,这玩意是可以创建一个纯净的python环境,我陷入了沉思,pyenv好像也可以 这里利用豆瓣的源下载,非常快而且很舒服 p ...

  5. vim程序编辑器---常用操作整理

    vim程序编辑器---常用操作整理 移动光标方法 o 在光标行的下一行,进入编辑模式 $ 移动到光标这行,最末尾的地方 G(大写) 移动到文件最末行 :set  nu 文件显示行数 :set  non ...

  6. 深入理解Java容器——HashMap

    目录 存储结构 初始化 put resize 树化 get 为什么equals和hashCode要同时重写? 为何HashMap的数组长度一定是2的次幂? 线程安全 参考 存储结构 JDK1.8前是数 ...

  7. Adaptive AUTOSAR 学习笔记 6 - 架构 - 方法论和 Manifest

    本系列学习笔记基于 AUTOSAR Adaptive Platform 官方文档 R20-11 版本 AUTOSAR_EXP_PlatformDesign.pdf 缩写 AP:AUTOSAR Adap ...

  8. 日常学习-001-Get和Post的区别

    首先说明参考链接:https://mp.weixin.qq.com/s/W68JzNIoUpm9hyXinOzkMw 以下为个人观后总结. 初级理解: GET和POST的区别 1.get传送的参数长度 ...

  9. 管理员的基本防范措施 Linux系统安全及应用

    系统安全及应用一.账号安全基本措施① 系统账号清理② 密码安全控制③ 命令历史限制④ 终端自动注销二.SU命令切换用户① 用途及用法② 验证密码③ 限制使用su命令的用户④ 查看su操作记录补充三.L ...

  10. C语言：变量

    变量: 1.在程序运行过程中,值可以改变的量称为变量 2.每个变量都有一个名字,称为变量名 3.每个变量都必须进行变量说明,指明变量的类型 4.每个变量都有一个对应的地址,写法:&变量名 5. ...