每日小練習之css3的loading（part4）

最新推荐文章于 2021-10-27 18:48:42 发布
最新推荐文章于 2021-10-27 18:48:42 发布
阅读量248 收藏
点赞数
分类专栏： 每日一練
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41406727/article/details/88996708
版权

純 css3編寫loading功能 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>loading</title>

</head>
<style>
	.loading {
		width: 100%;
		height: 100%;
		overflow: hidden;

	}

	.loader {
		display: flex;
		margin: 10px;
		height: 200px;
		border: 1px solid #A52A2A;
		align-items: center;
		justify-content: center;
	}

	.loader_1 {
		width: 35px;
		height: 35px;
		position: relative;
	}

	.loader_1>i {
		border-radius: 50%;
		display: block;
		width: 100%;
		height: 100%;
		background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), color-stop(30%, #333), to(#333));
		background: -webkit-linear-gradient(transparent 0%, transparent 70%, #333 30%, #333 100%);
		background: -o-linear-gradient(transparent 0%, transparent 70%, #333 30%, #333 100%);
		background: linear-gradient(transparent 0%, transparent 70%, #333 30%, #333 100%);
		-webkit-animation: loading-1 .6s linear 0s infinite;
		animation: loading-1 .6s linear 0s infinite;
	}

	@-webkit-keyframes loading-1 {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes loading-1 {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	.loader_2>i {
		width: 2px;
		border-radius: 2px;
		margin: 0 2px;
		background: #333;
		height: 35px;
		display: inline-block;
	}

	.loader_2>i:nth-child(1) {
		-webkit-animation: loading-2 .6s linear 0s infinite;
		animation: loading-2 .6s linear 0s infinite;
	}

	.loader_2>i:nth-child(2) {
		-webkit-animation: loading-2 .6s linear .1s infinite;
		animation: loading-2 .6s linear .1s infinite;
	}

	.loader_2>i:nth-child(3) {
		-webkit-animation: loading-2 .6s linear .2s infinite;
		animation: loading-2 .6s linear .2s infinite;
	}

	.loader_2>i:nth-child(4) {
		-webkit-animation: loading-2 .6s linear .3s infinite;
		animation: loading-2 .6s linear .3s infinite;
	}

	.loader_2>i:nth-child(5) {
		-webkit-animation: loading-2 .6s linear .4s infinite;
		animation: loading-2 .6s linear .4s infinite;
	}

	@-webkit-keyframes loading-2 {
		0% {
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
		}

		50% {
			-webkit-transform: scaleY(0.4);
			transform: scaleY(0.4);
		}

		100% {
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
		}
	}

	@keyframes loading-2 {
		0% {
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
		}

		50% {
			-webkit-transform: scaleY(0.4);
			transform: scaleY(0.4);
		}

		100% {
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
		}
	}

	.loader_3 {
		position: relative;
	}

	.loader_3>i {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		position: absolute;
		display: block;
		background-color: #333;
	}

	@-webkit-keyframes loading-3 {
		50% {
			opacity: 0.5;
			-webkit-transform: scale(0.5);
			transform: scale(0.5);
		}

		100% {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}

	@keyframes loading-3 {
		50% {
			opacity: 0.3;
			-webkit-transform: scale(0.5);
			transform: scale(0.5);
		}

		100% {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}

	.loader_3>i:nth-child(1) {
		top: 25px;
		left: 0px;
		-webkit-animation: loading-3 1s ease 0s infinite;
		animation: loading-3 1s ease 0s infinite;
	}

	.loader_3>i:nth-child(2) {
		top: 17px;
		left: 17px;
		-webkit-animation: loading-3 1s ease -.12s infinite;
		animation: loading-3 1s ease -.12s infinite;
	}

	.loader_3>i:nth-child(3) {
		top: 0px;
		left: 25px;
		-webkit-animation: loading-3 1s ease -.24s infinite;
		animation: loading-3 1s ease -.24s infinite;
	}

	.loader_3>i:nth-child(4) {
		top: -17px;
		left: 17px;
		-webkit-animation: loading-3 1s ease -.36s infinite;
		animation: loading-3 1s ease -.36s infinite;
	}

	.loader_3>i:nth-child(5) {
		top: -25px;
		left: 0px;
		-webkit-animation: loading-3 1s ease -.48s infinite;
		animation: loading-3 1s ease -.48s infinite;
	}

	.loader_3>i:nth-child(6) {
		top: -17px;
		left: -17px;
		-webkit-animation: loading-3 1s ease -.6s infinite;
		animation: loading-3 1s ease -.6s infinite;
	}

	.loader_3>i:nth-child(7) {
		top: 0px;
		left: -25px;
		-webkit-animation: loading-3 1s ease -.72s infinite;
		animation: loading-3 1s ease -.72s infinite;
	}

	.loader_3>i:nth-child(8) {
		top: 17px;
		left: -17px;
		-webkit-animation: loading-3 1s ease -.84s infinite;
		animation: loading-3 1s ease -.84s infinite;
	}

	.loader_4 {
		width: 60px;
		height: 60px;
		position: relative;
	}

	.loader_4>i {
		width: 60px;
		height: 60px;
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		background: #333;
		border-radius: 50%;
	}

	@-webkit-keyframes loading-4 {
		0% {
			-webkit-transform: scale(.4);
			transform: scale(.4);
		}

		5% {
			opacity: 1;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 0;
		}
	}

	@keyframes loading-4 {
		0% {
			-webkit-transform: scale(.4);
			transform: scale(.4);
		}

		5% {
			opacity: 1;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 0;
		}
	}

	.loader_4>i:nth-child(1) {
		-webkit-animation: loading-4 1s linear 0s infinite;
		animation: loading-4 1s linear 0s infinite;
	}

	.loader_4>i:nth-child(2) {
		-webkit-animation: loading-4 1s linear .2s infinite;
		animation: loading-4 1s linear .2s infinite;
	}

	.loader_4>i:nth-child(3) {
		-webkit-animation: loading-4 1s linear .4s infinite;
		animation: loading-4 1s linear .4s infinite;
	}

	.loader_5 {
		width: 40px;
		height: 40px;
		position: relative;
	}

	.loader_5>i {
		border-radius: 50%;
		border: 2px solid #333;
		border-color: transparent #333;
		display: block;
		position: absolute;
	}

	.loader_5>i:first-child {
		width: 35px;
		height: 35px;
		left: 0;
		top: 0;
		-webkit-animation: loading-5 1s ease-in-out 0s infinite;
		animation: loading-5 1s ease-in-out 0s infinite;
	}

	.loader_5>i:last-child {
		top: 10px;
		width: 15px;
		height: 15px;
		left: 10px;
		-webkit-animation: loading-5 1s ease-in-out .5s infinite reverse;
		animation: loading-5 1s ease-in-out .5s infinite reverse;
	}

	@-webkit-keyframes loading-5 {
		0% {
			-webkit-transform: rotate(0deg) scale(1);
			transform: rotate(0deg) scale(1);
		}

		50% {
			-webkit-transform: rotate(180deg) scale(.5);
			transform: rotate(180deg) scale(.5);
		}

		100% {
			-webkit-transform: rotate(360deg) scale(1);
			transform: rotate(360deg) scale(1);
		}
	}

	@keyframes loading-5 {
		0% {
			-webkit-transform: rotate(0deg) scale(1);
			transform: rotate(0deg) scale(1);
		}

		50% {
			-webkit-transform: rotate(180deg) scale(.5);
			transform: rotate(180deg) scale(.5);
		}

		100% {
			-webkit-transform: rotate(360deg) scale(1);
			transform: rotate(360deg) scale(1);
		}
	}

	.loader_6 {
		width: 80px;
		height: 20px;
		position: relative;
	}

	.loader_6>i {
		position: absolute;
		width: 20px;
		height: 20px;
		margin-right: 10px;
		border-radius: 50%;
		background: #333;
		display: block;
	}

	.loader_6>i:nth-child(1) {
		-webkit-animation: loading-6 2s linear 0s infinite;
		animation: loading-6 2s linear 0s infinite;
	}

	.loader_6>i:nth-child(2) {
		-webkit-animation: loading-6 2s linear -0.4s infinite;
		animation: loading-6 2s linear -0.4s infinite;
	}

	.loader_6>i:nth-child(3) {
		-webkit-animation: loading-6 2s linear -0.8s infinite;
		animation: loading-6 2s linear -0.8s infinite;
	}

	.loader_6>i:nth-child(4) {
		-webkit-animation: loading-6 2s linear -1.2s infinite;
		animation: loading-6 2s linear -1.2s infinite;
	}

	.loader_6>i:nth-child(5) {
		-webkit-animation: loading-6 2s linear -1.6s infinite;
		animation: loading-6 2s linear -1.6s infinite;
	}

	@-webkit-keyframes loading-6 {
		0% {
			left: 100px;
			top: 0;
		}

		80% {
			left: 0;
			top: 0;
		}

		85% {
			left: 0;
			top: -20px;
			width: 20px;
			height: 20px;
		}

		90% {
			width: 40px;
			height: 20px;
		}

		95% {
			left: 100px;
			top: -20px;
			width: 20px;
			height: 20px;
		}

		100% {
			left: 100px;
			top: 0;
		}
	}

	@keyframes loading-6 {
		0% {
			left: 100px;
			top: 0;
		}

		80% {
			left: 0;
			top: 0;
		}

		85% {
			left: 0;
			top: -20px;
			width: 20px;
			height: 20px;
		}

		90% {
			width: 40px;
			height: 20px;
		}

		95% {
			left: 100px;
			top: -20px;
			width: 20px;
			height: 20px;
		}

		100% {
			left: 100px;
			top: 0;
		}
	}
</style>

<body>
	<div class="loading">
		<div class="loader ">
			<div class="loader_1">
				<i></i>
			</div>

		</div>
		<div class="loader">
			<div class="loader_2">
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
			</div>
		</div>
		<div class="loader">
			<div class="loader_3">
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
			</div>
		</div>
		<div class="loader">
			<div class="loader_4">
				<i></i>
				<i></i>
				<i></i>
			</div>
		</div>
		<div class="loader">
			<div class="loader_5">
				<i></i>
				<i></i>
			</div>
		</div>
		<div class="loader">
			<div class="loader_6">
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
			</div>
		</div>
	</div>
</body>

</html>

結果：

那是遇知吧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS loading 动画案例
qq_42847094的博客
08-16 816
CSS loading 动画案例 效果： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .loading{ margin: 0 auto; width: 300px; height: 300px; position: relative
MongoDB+ES+Graylog+JAVA练习手册
xxm的个人世界杯要开始了
10-24 728
graylog是一个日志管理的神奇工具，之前C家有用过，感觉良好。 之前曾经找运维小哥试过安装一次，但有些诸如MongoDB、ElasitcSearc的问题没有得到处理，最后不了了之了~~~ 今天在与开发同学聊到微信公众号开发一些日志问题的时候，又想起了Graylog，于是打算自己折腾一下看看，主要参考的教程是： 【详细】JAVA项目如何快速集成graylog日志系统—简书 此外还有一些官方的...
css3 实现loading动画
花神的博客
09-07 565
&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
css 实现一个loading旋转，减少img请求，变相提升网络加载速度
weixin_33725270的博客
07-12 2034
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt; .l
18种各式各样的loading，纯html5+css3无图片
mrtuzi的专栏
12-01 3489
网友总结的18种各式各样的loading，纯html5+css3无图片，我再次整理下 <!DOCTYPE html> <html lang='zh_CN'> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-s...
css实现加载中loading动画效果
popstarqq的博客
10-27 1万+
1 效果 2 实现原理 原理很简单： 1 设置100px宽高的div，再设置成圆形border-radius：50%； 2 设置border一定宽度和颜色，再设置border-left为同样宽度和另一种颜色； 3 设置animation动画，让div旋转起来就可以；通过from和to设置旋转角度即可 3全部代码: <!DOCTYPE html> <html> <head> <title>css实现加载中loading动画效果&lt.
前端网站资源精编！！
qianduan666a的博客
07-16 9170
前端网站资源精编！！ 目录: 1-------- 走进前端 2-------- jQuery 3-------- CSS 4-------- Angularjs 5-------- ES6 6-------- React 7-------- 移动端API 8-------- avalon 9-------- Requriejs 10-------- vue 11-------- Seajs 12-------- Less,sass 13-------- Markdown 14-------- D3
asp.net知识库
06-18
ASP.NET 2.0使用Web Part创建应用程序之二（共二） 体验 .net2.0 的优雅（2） -- ASP.net 主题和皮肤 NET2.0系列介绍（一）.NET 2.0 中Web 应用程序主题的切换 ASP.NET 2.0 中Web 应用程序主题的切换 2.0正式版中...
jQuery基础(五)一Ajax应用与常用插件-imooc
Hello World
04-12 309
第1章 jQuery 实现Ajax应用 本章介绍jQuery中支持Ajax的各种方法和函数，阐述通过Ajax交互的过程与常用方法,重点介绍核心方法$.ajax()的运用技巧。通过ajax全局事件的介绍，进一步巩固前面所学基础内容。 1-1 使用load()方法异步请求数据 1-2 使用getJSON()方法异步加载JSON格式数据 1-3 使用getScript()方法异步加载并执行...
浏览器顶部loading(来自知乎)
徐同保的专栏
01-24 842
  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,height=device-height"&gt;
JS：网站loading界面实现
彼方_的博客
10-13 1042
loading界面的样式写在</head>前，优先渲染这个界面 <head> <title>loading</title> <style type="text/css"> #loader{ width: 100%;height: 100%;background: white; position: fixed;top: 0;left: 0;/*相对浏览器窗口定位*/ display: flex;align-items: cen
用纯css实现炫酷loading和实现搜索图标
前端攻城狮
10-14 730
最近刚好遇到UI要求，需要实现一个比较炫的loading和用css实现搜索图标，记录一下 1、loading <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css实现load
CSS3之动画(animation)和四个小案例
al654123的博客
03-08 2453
一、动画(animation) 1.动画概述 可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。 2.语法 1.0%是动画的开始可以用from替代，100%是动画的完成可用to替代。 2.在CSS中用@keyframes中定义动画的样式，在用选择器调用animation调用动画 3.动画是是元素从一种样式逐渐变化成另一种样式的效果。可以任意改变动画节点。 @keyframes...
html的c3loading大全
zuggs_的博客
12-12 451
整理了一份c3loading大全，直接复制进html即可。。。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS加载动画</title> <style> body { background-colo...
css3 loading （缓冲，等待效果实现）
在线学习web前端开发教程
01-19 4016
效果一 HTML <div class="zh-loading"><ul><li></li><li></li><li></li><li></li></ul></div> CSS web前端开发学习Q-q-u-n： 731771211，分享学习...
vue中加载loading
热门推荐
每天学习一点点
05-14 3万+
首先在components文件夹中新建一个loading.vue组件: 1.loading.vue组件内容如下： <template> <div class="markbox" v-show="loading" style="background-color: rgba(0, 0, 0, 0.5);"> <div class="sun-lo...
动感Loading文字
weixin_30500663的博客
09-12 191
<html> <head> <title>动感Loading文字</title> <script language="javascript"> <!-- text = "Loading..."; i = 0; function fl...
css 图片旋转
施主请别摸老衲的脸
04-25 321
这里我用了border来代替图片.ta_c{margin:auto;border:1px solid red;width:150px;height:150px;border-radius: 10px;}@-webkit-keyframes circle{0% {-webkit-transform: rotate(0deg);} //如果需要调整旋转的方向 自行添加代码100% {-webkit-t...
css预加载
seven_an的博客
07-01 4101
1、预备素材： 2、html元素： 请稍侯.. --> 3、css样式： .mask-loading { width: 100%; min-height: 100%; text-align: center; top: 0; bottom: 0; position: fixed; opacity: 0.8;
CSS3实现背景模糊技巧详解
"这篇文档总结了使用CSS3实现背景模糊的三种方法，主要涉及CSS的滤镜功能和伪元素的应用。" 在Web开发中，CSS3引入了许多新特性，其中包括对背景图像进行模糊处理的功能。这使得设计师可以创造出更具视觉吸引力的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值