css圆环加载效果，两种效果

最新推荐文章于 2024-05-24 12:56:59 发布
原创 最新推荐文章于 2024-05-24 12:56:59 发布 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3

本文介绍两种在H5页面中实现加载动画的方法，一种通过元素的缩放变化，另一种利用透明度变化，以实现视觉上的旋转加载效果。

场景：在H5页面发送请求或者是其他需要反馈操作的时候，出来的加载效果。之前使用的时候图片，但是在适配的时候，图片的效果比较差，所以就手动写了两种效果。

第一种

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dot1</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0
		}
		body {
			margin: 0;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #EEE;
		}
		.box {
			width: 4em;
			height: 4em;
			position: relative;
			margin: auto;
		}

		.box .dots {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		.box .dots:before {
			content: '';
			display: block;
			margin: 0 auto;
			width: 15%;
			height: 15%;
			background-color: #00BFFF;
			border-radius: 50%;
			animation: animate 1.2s infinite ease-in-out both;
		}

		.box .childDots2 {
			transform: rotate(30deg);
		}

		.box .childDots3 {
			transform: rotate(60deg);
		}

		.box .childDots4 {
			transform: rotate(90deg);
		}

		.box .childDots5 {
			transform: rotate(120deg);
		}

		.box .childDots6 {
			transform: rotate(150deg);
		}

		.box .childDots7 {
			transform: rotate(180deg);
		}

		.box .childDots8 {
			transform: rotate(210deg);
		}

		.box .childDots9 {
			transform: rotate(240deg);
		}

		.box .childDots10 {
			transform: rotate(270deg);
		}

		.box .childDots11 {
			transform: rotate(300deg);
		}

		.box .childDots12 {
			transform: rotate(330deg);
		}

		.box .childDots2:before {
			animation-delay: -1.1s;
		}

		.box .childDots3:before {
			animation-delay: -1s;
		}

		.box .childDots4:before {
			animation-delay: -0.9s;
		}

		.box .childDots5:before {
			animation-delay: -0.8s;
		}

		.box .childDots6:before {
			animation-delay: -0.7s;
		}

		.box .childDots7:before {
			animation-delay: -0.6s;
		}

		.box .childDots8:before {
			animation-delay: -0.5s;
		}

		.box .childDots9:before {
			animation-delay: -0.4s;
		}

		.box .childDots10:before {
			animation-delay: -0.3s;
		}

		.box .childDots11:before {
			animation-delay: -0.2s;
		}

		.box .childDots12:before {
			animation-delay: -0.1s;
		}

		@-webkit-keyframes animate {

			0%,
			80%,
			100% {
				transform: scale(0);
			}

			40% {
				transform: scale(1);
			}
		}

		@keyframes animate {

			0%,
			80%,
			100% {
				transform: scale(0);
			}

			40% {
				transform: scale(1);
			}
		}
	</style>
</head>
<body>
	<div class='box'>
		<div class='dots childDots1'></div>
		<div class='dots childDots2'></div>
		<div class='dots childDots3'></div>
		<div class='dots childDots4'></div>
		<div class='dots childDots5'></div>
		<div class='dots childDots6'></div>
		<div class='dots childDots7'></div>
		<div class='dots childDots8'></div>
		<div class='dots childDots9'></div>
		<div class='dots childDots10'></div>
		<div class='dots childDots11'></div>
		<div class='dots childDots12'></div>
	</div>
</body>
</html>

效果
在这里插入图片描述

第二种

代码


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dot2</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0
		}
		body {
			margin: 0;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #EEE;
		}
		.box {
			position: relative;
			margin: auto;
			width: 4em;
			height: 4em;					
		}

		.box .dots {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;			
		}

		.box .dots:before {
			content: '';
			display: block;
			margin: 0 auto;
			width: 15%;
			height: 15%;
			background-color: #00BFFF;
			border-radius: 50%;			
			animation: animate 1.2s infinite ease-in-out both;
		}

		.box .childDots2 {
			transform: rotate(30deg);
		}

		.box .childDots3 {
			transform: rotate(60deg);
		}

		.box .childDots4 {
			transform: rotate(90deg);
		}

		.box .childDots5 {
			transform: rotate(120deg);
		}

		.box .childDots6 {
			transform: rotate(150deg);
		}

		.box .childDots7 {
			transform: rotate(180deg);
		}

		.box .childDots8 {
			transform: rotate(210deg);
		}

		.box .childDots9 {
			transform: rotate(240deg);
		}

		.box .childDots10 {
			transform: rotate(270deg);
		}

		.box .childDots11 {
			transform: rotate(300deg);
		}

		.box .childDots12 {
			transform: rotate(330deg);
		}

		.box .childDots2:before {
			animation-delay: -1.1s;
		}

		.box .childDots3:before {
			animation-delay: -1s;
		}

		.box .childDots4:before {
			animation-delay: -0.9s;
		}

		.box .childDots5:before {
			animation-delay: -0.8s;
		}

		.box .childDots6:before {
			animation-delay: -0.7s;
		}

		.box .childDots7:before {
			animation-delay: -0.6s;
		}

		.box .childDots8:before {
			animation-delay: -0.5s;
		}

		.box .childDots9:before {
			animation-delay: -0.4s;
		}

		.box .childDots10:before {
			animation-delay: -0.3s;
		}

		.box .childDots11:before {
			animation-delay: -0.2s;
		}

		.box .childDots12:before {
			animation-delay: -0.1s;
		}

		@-webkit-keyframes animate {

			0%,
			39%,
			100% {
				opacity: 0;
			}

			40% {
				opacity: 1;
			}
		}

		@keyframes animate {

			0%,
			39%,
			100% {
				opacity: 0;
			}

			40% {
				opacity: 1;
			}
		}
	</style>
</head>
<body>
	<div class='box'>
		<div class='dots childDots1'></div>
		<div class='dots childDots2'></div>
		<div class='dots childDots3'></div>
		<div class='dots childDots4'></div>
		<div class='dots childDots5'></div>
		<div class='dots childDots6'></div>
		<div class='dots childDots7'></div>
		<div class='dots childDots8'></div>
		<div class='dots childDots9'></div>
		<div class='dots childDots10'></div>
		<div class='dots childDots11'></div>
		<div class='dots childDots12'></div>
	</div>
</body>
</html>

效果
在这里插入图片描述

总结

上面两种写法都是比较“蠢”的写法。都是在一开始就把所有的画好，让它们围成一个圆。然后通过改变css 的属性来达到视觉上的旋转加载的效果。第一种是通过放大缩小；第二种是使用透明度。
也可以通过只写几个固定的小圆点，在将大小或者透明度设置好，然后整体旋转Box 这个div来真正的“旋转”。

当然也有更多的写法，这两种就是最简单的把我的思路写出来，没有再去进一步修改。

CSS锥形渐变实现环形进度条
qq_40289557的博客
10-27 6476
本章简单介绍一下CSS锥形渐变（conic-gradient）在可视化图表中的应用场景。采用vue+原生css的形式进行案例展示、在了解本章节之前，需要对vue框架、css变量、css属性conic-gradient有一定程度的认识
使用CSS实现圆环流水灯、跑马灯、加载渐变动画效果
weixin_52231116的博客
05-30 3604
本文主要使用CSS实现圆环流水灯、跑马灯、加载动画效果，以及介绍了常见的几种 transform 的变形函数
CSS3圆环旋转加载loading动画特效
06-11
这是一款简单好看的CSS3圆环旋转加载loading动画特效，纯CSS3实现多层圆环页面加载动画效果。
css圆环的六种实现方式
逝水年华的博客
02-27 5061
1.通过伪类实现 .circle1{ position: relative; width: 80px; height: 80px; line-height: 80px; border-radius: 50%; background: white; ...
圆圈加载效果
cscj365的专栏
10-21 447
代码来自wordpress 主题 r-flat
使用CSS3写圆环加载动画
u010837861的博客
10-26 5558
第一次在优快云写文章，请各位看客将就哦，如有哪里不足请尽管提，本人会有责改之哒~ 功能介绍： 红色沿着灰色弧运动，并填满。如下图： 实现技术点： 1.先画两个圆，一个灰色，一个红色; 2.使用样式遮罩mask的 radial-gradient把圆的中间截掉，并且截掉的部分是透明的，最终成弧； 3.对红色圆使用clip-path: polygon(point1,point2,point3,poi...
CSS3加载动画效果特效代码
03-20
【CSS3加载动画效果特效代码】是利用现代浏览器支持的CSS3特性来创建吸引人的加载动画，这些动画在网页内容加载期间提供视觉反馈，提升用户体验。CSS3加载动画的四款设计分别是：帽子加载、进度条加载、圆圈加载以及...
CSS3实现多层圆环加载动画的教程与代码
标题提到的“纯CSS3多层圆环加载动画特效代码”指出该内容涉及的技术是CSS3，并且是一种加载动画特效。CSS3是层叠样式表第三版，也是最新的样式表标准，它引入了许多新的属性和功能，使得Web设计师可以在不使用图片...
绿色风格CSS3加载动画效果代码集
4. 太极图加载动画：太极图是具有中国特色的传统符号，通过使用CSS3的transform属性中的rotate函数来旋转太极图的黑白两半，可以创造出旋转的加载效果。此外，还可以结合使用CSS的@keyframes定义旋转动画的起始和...
圆环加载的效果学名叫什么
最新发布
03-24
另外，用户提到的“圆环加载效果”可能指的是类似进度环的效果，也就是“Circular Progress Indicator”，这在Material Design中有明确的设计规范，用来显示不确定进度或确定进度。比如，不确定进度时，环会持续旋转...
Java实现圆圈旋转效果，等待、加载、刷新、旋转进度条
08-11
Java代码实现圆圈旋转效果，比如在线看电影缓存时的旋转圆圈，网页刷新时的旋转圆圈，等待时
[css] 小案例---简版轮播图
qq_14993591的博客
08-06 237
仿京东 <!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"> <title&g
好用的圆圈 “加载加载” 效果 （也有dialog里面的加载）
矿工的博客
03-08 581
转载请注明出处：王亟亟的大牛之路 早上写了一个关于MD的文章，下午给编译器调了个色，感觉要上天了，所以为了试颜色就出了这篇文章，让大家一起瞎一下 好了废话不说，这一片给大家介绍一个当做Dialog作用的自定义View 效果图:  How to use？ Gradle dependencies { com.camnter.easyarcload
有趣的css - 两个圆形加载效果
设计师工作日常
05-24 1504
一款小清新的加载动画，适用于 app 列表加载，页面加载或者弹层内容延迟加载等场景。
CSS 圆环 动态旋转加载效果
程序猿小白的博客
09-25 1195
<div id="loading"></div> css: #loading{ font-size: 0.1rem; position: relative; margin: 0.06rem 0.52rem; float: left; text-indent: -9999em; border-top: 0.05rem solid rgba(239,211,69); border-ri...
css 3d环形,css环形加载动画
weixin_39624332的博客
08-04 337
@charset "utf-8";* {border:0;box-sizing:border-box;margin:0;padding:0;}:root {font-size:calc(16px + (24 - 16)*(100vw - 320px)/ (1280 - 320));}body,.preloader {display:flex;}body {background:#000;color...
css圆环
KkaBum的博客
09-03 385
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .round1,.round2,.roun...
自定义View实现圆形百分比加载的效果
lisiruxiaoniu的博客
09-03 566
自定义一个类集成view重写ondraw()方法实现如图效果,随着数字百分比增加和减少外圆颜色依次填充和减少，且外圆颜色是随着百分比增加颜色加深。第一次进入加载到100%暂停。点击自动循环按钮后当进度增加到100%后依次再倒退到0，来回反复。点击暂停按钮数字、圆圈都停止. 首先创建一个自定义类,继承View public class MyView extends View{
Css实现圆环：
SunPeng的博客
07-15 1821
Css实现圆环
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

余九月丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值