CSS3 加载样式

最新推荐文章于 2021-05-24 10:58:35 发布
最新推荐文章于 2021-05-24 10:58:35 发布
阅读量272 收藏 1
点赞数
分类专栏： The Art of Finger 文章标签： CSS3 加载样式 animation keyframes winner winner chicken dinner
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/findfly1990/article/details/79002272
版权

animation属性 + @keyframes 实现简易的【加载中】样式


load_test.html

<html>
<head>
	<link rel="stylesheet" type="text/css" href="load_style.css">

</head>
<body>
	<!-- 1 ~ 3  -->	
	<div>
		<input id='process_state_1' class='transform'></input>
		<input id='process_state_2' class='transform'></input>
		<input id='process_state_3' class='transform'></input>
	</div>
	
	<div class='block'> </div>
	
	<!-- 4.   -->
	<div>
		<input id='process_0' class='transform'></input>
		<input id='process_1' class='transform'></input>
		<input id='process_2' class='transform'></input>
		<input id='process_3' class='transform'></input>
		<input id='process_4' class='transform'></input>
		<input id='process_5' class='transform'></input>
		<input id='process_6' class='transform'></input>
		<input id='process_7' class='transform'></input>
		<input id='process_8' class='transform'></input>
		<input id='process_9' class='transform'></input>
	</div>
</body>
</html>
load_style.css 

/**
	loading 样式制作
*/

* {
	padding: 0px;
	margin: 0px;
}

body {
	margin-top: 100px;
	background: rgba(221, 221, 221, 1);
	text-align: center;
}

.block {
	height: 50px;
}

/** 模板网址： http://www.runoob.com/try/try.php?filename=trycss3_animation3 */

/** 1. 根据例子的尝试 */
/*
.transform {
	position: relative;
	text-align: center;
	width: 100px;
	height: 100px;
	background: red;
	font-size: 20px;
	font-weight: bolder;
	color: white;
	border-radius: 20px;
	border-width: 0px;
	animation: inprocess 2s;
	animation-iteration-count: infinite; 
}

@keyframes inprocess {
	0% {background: red; left: 0px; top: 0px;}
	25% {background: yellow; left: 200px; top: 0px;}
	50% {background: blue; left: 200px; top: 200px;}
	75% {background: green; left: 0px; top: 200px;}
	100% {background: red; left: 0px; top: 0px;}
}
*/

/** 2. 稍加改变 */
/*
.transform {
	position: relative;
	text-align: center;
	width: 100px;
	height: 100px;
	background: red;
	font-size: 20px;
	font-weight: bolder;
	color: white;
	border-radius: 20px;
	border-width: 0px;
	animation: inprocess 2s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_test {
	0% {background: red; left: 0px; top: 0px;}
	50% {background: blue; left: 200px; top: 0px;}
	100% {background: red; left: 0px; top: 0px;}
}
*/

/** 3. 力学传递 */

.transform {
	position: relative;
	text-align: center;
	width: 40px;
	height: 40px;
	background: white;
	font-size: 14px;
	font-weight: bolder;
	color: #83ccae;
	border-radius: 20px;
	border-width: 0px;
}

#process_state_1 {
	animation: inprocess_left 3s;
	animation-iteration-count: infinite;
}

#process_state_2 {
	animation: inprocess_middle 3s;
	animation-iteration-count: infinite;
}

#process_state_3 {
	animation: inprocess_right 3s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_left {
	0% {background: #83ccae; left: -200px;}
	25% {background: white; left: 0px;}
	50% {background: white; left: 0px;}
	75% {background: white; left: 0px;}
	100% {background: #83ccae; left: -200px;}
}

@keyframes inprocess_middle {
	0% {background: white; left: 0px;}
	25% {background: #83ccae; left: 0px;}
	50% {background: white; left: 0px;}
	75% {background: #83ccae; left: 0px;}
	100% {background: white; left: 0px;}
}

@keyframes inprocess_right {
	0% {background: white; left: 0px;}
	25% {background: white; left: 0px;}
	50% {background: #83ccae; left: 200px;}
	75% {background: white; left: 0px;}
	100% {background: white; left: 0px;}
}

#process_0 {
	animation: inprocess_0 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_0 {
	0% {background: #83ccae;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_1 {
	animation: inprocess_1 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_1 {
	0% {background: white;}
	5% {background: white;}
	10% {background: #83ccae;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_2 {
	animation: inprocess_2 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_2 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: #83ccae;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_3 {
	animation: inprocess_3 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_3 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: #83ccae;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_4 {
	animation: inprocess_4 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_4 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: #83ccae;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_5 {
	animation: inprocess_5 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_5 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: #83ccae;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_6 {
	animation: inprocess_6 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_6 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: #83ccae;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_7 {
	animation: inprocess_7 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_7 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: #83ccae;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_8 {
	animation: inprocess_8 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_8 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: #83ccae;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_9 {
	animation: inprocess_9 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_9 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: #83ccae;}
}

各自保存文件，Just Run!



CallME大师
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 加载中样式,简洁的纯CSS加载样式
weixin_30822467的博客
08-03 673
.loader {position:fixed;left:50%;top:50%;margin:-0.2em 0 0 -0.2em;text-indent:-9999em;border-top:0.3em solid rgba(0,0,0,0.1);border-right:0.3em solid rgba(0,0,0,0.1);border-bottom:0.3em solid rgba(0,0...
轻松掌握 CSS，实现 loading 加载中的多种形式
最新发布
Shids_的博客
02-08 6488
轻松掌握 CSS，实现 loading 加载中的多种形式
css3加载图标样式_loading加载动画图标代码
01-08
css3加载图标样式_loading加载动画图标代码css3加载图标样式_loading加载动画图标代码css3加载图标样式_loading加载动画图标代码css3加载图标样式_loading加载动画图标代码
CSS3三种加载样式
yu_qiushui的博客
04-18 2237
&lt;!DOCTYPE html"&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;        &lt;title&gt;CSS3三种不同的加载样式&lt;/title&gt; 
简单的css加载样式
罗汉松驻扎的工作基地
05-24 286
网站里面经常需要用到一个加载中的样式，例如转圈圈： 参考资料： https://www.jq22.com/webqd3811 其实原始是做一个 置顶的DIV ， 用于盖住底下的编辑框，不然用户继续编辑。 这个置顶的div 加入一个转圈的css 。代码如下 首先是style代码： .loader { position: fixed; left: 50%; top: 50%; margin: -0.2em 0 0 -0.2em; text...
Load样式——1
07-27 85
1.html代码 <div class="spinner"> <div class="rect1">L</div> <div class="rect2">O</div> <div class="rect3">A</div> <div class="rec...
css3 加载动画
09-14
在现代网页设计中，CSS3加载动画已经成为提升用户体验的重要元素，它们在页面内容加载时提供视觉反馈，使得用户知道网站正在工作并等待响应。CSS3加载动画利用了CSS3的新特性，如转换（Transitions）、动画...
纯CSS3进度条渐变加载特效
07-24
本文将深入探讨“纯CSS3进度条渐变加载特效”这一主题，帮助开发者了解如何利用CSS3的关键帧动画（keyframes）创建创新、有趣的进度条加载效果。 首先，我们要明白CSS3是什么。CSS3是级联样式表的第三版，它引入了...
css3加载动画
04-27
在现代网页设计中，CSS3加载动画已经成为提升用户体验的重要元素之一。"齿轮"主题的CSS3加载动画尤其受到青睐，因为它既具科技感，又能直观地传达“正在处理”或“等待”的信息。本文将深入探讨如何利用CSS3创建轻量...
CSS3加载动画特效代码
03-20
**CSS3加载动画特效代码详解** CSS3是 Cascading Style Sheets 的第三版，它为网页设计带来了许多新的特性和功能，极大地丰富了网页的表现力。其中，CSS3加载动画是现代网页设计中不可或缺的一部分，它们通常在页面...
前端Loading样式
09-06
web开发 常用CSS样式 感觉不错，可以看看 loading.... 的效果
loading样式，12种，颜色可修改
09-03
12种loading样式，css样式，需要的朋友可以看下，颜色可修改
CSS3三种不同的加载样式
11-05
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的样式控制功能，其中就包括了各种各样的加载样式。加载样式通常是指页面内容加载时显示的动画效果，用于告知用户页面正在处理数据或等待加载完成。在CSS3...
【webpack】-- 样式加载
大灰狼的小绵羊哥哥的博客
03-12 1293
http://www.cnblogs.com/stoneniqiu/p/6534538.html 主题 Webpack CSS body { background: cornsilk; } 然后在index.js中引入 import './main.css'; 再运行npm start,在http://localhost:8080/中打开 这时候
纯CSS3动画实现加载样式
wangzhneg123的博客
02-23 329
效果展示： 代码展示： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;纯CSS3动画实现加载样式&lt;/title&gt; &lt;style&gt; .loader {     position:fixed;     left:50%
css实现加载样式
想好了再写！
04-25 156
效果图如下： <div class="donutSpinner"></div> <style> .donutSpinner { display: inline-block; border: 4px solid hsl(222 100% 95%); border-left-color: hsl(243 80% 62%); border-radius: 50%
纯CSS 加载样式
qq_35359074的博客
08-21 231
          先看下效果图     &lt;style rel="stylesheet"&gt;                 #iframeFather {                     z-index: 1000000;                      position: absolute;                     display: bloc...
文字加载样式
weixin_44540247的博客
07-18 321
对前端这一块来说，很多人都喜欢把页面或者是一些操作做的美观，更多的还会做一些进度条或者是加载样式等等，这些对于程序员来说都是小事一桩，但在用户手中看着就很神奇，跳转加载中，文字能自动变换颜色，是怎么做到这样一个动画的加载效果呢？ 我做了一个简单的加载效果。 文字加载效果变换颜色，那么肯定需要定义好显示的文字，其次就是变换的颜色，和变化的速度，那么我们先定义几个变量，分别表示显示的文字、变换的颜色...
加载不同的样式
赤道与北极
01-23 903
有的需求需要在页面不同时候加载不同的样式，原来有这么一招，页面上：     runat="server" id="defaultcss" />注意红色字体部分。在后台cs代码中，在需要加载不一样css的地方写上：defaultcss.Attributes["href"] = "/css/abcd.css";记得加上有效的路径。
CSS3超链接样式与HTML5协同打造新颖界面
CSS3是用于定义网页显示格式的样式表语言，与HTML5有良好的兼容性，是现代网页设计的重要组成部分。章节详细讲解了CSS的选择器、颜色与背景、字体设置、文本属性、超链接样式、列表、表格、CSS轮廓以及浮动元素等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值