让我们来完成一些纯CSS优美的加载动效，下一篇持续更新中...

爱蹦跶的大A阿

已于 2023-12-25 13:41:43 修改

阅读量1.5k

点赞数 52

分类专栏： CSS动画文章标签： css 前端

于 2023-12-25 10:09:25 首次发布

本文链接：https://blog.csdn.net/qq_41152573/article/details/135191443

版权

CSS动画专栏收录该内容

7 篇文章 0 订阅

订阅专栏

📢鸿蒙专栏：想学鸿蒙的，冲

📢C语言专栏：想学C语言的，冲

📢VUE专栏：想学VUE的，冲这里

📢Krpano专栏：想学Krpano的，冲

🔔上述专栏，都在不定期持续更新中！！！！！！！！！！！！！

一、前言

CSS动画是网页中添加趣味性的重要方式之一。过渡动效不仅可以提高用户的体验,也可以增强页面的美观度。一个优雅的加载动画,能为等待页面加载的用户带来更好的体验。

本文将介绍几种常见的CSS加载动效的实现方法。加载动效主要应用于两个场景:页面加载时的加载动画,以及Ajax请求时的加载提示。这两种场景下,加载动画可以消除用户的等待焦虑,让页面跳转和内容更新更流畅自然。

具体来说,本文将通过几个简单示例,展示如何利用CSS的transition、animation、transform等属性,实现圆环旋转动画、文字 liquid 动效、方块缩放加载等优美的加载效果。这些动画大多基于CSS3的新特性,兼容性较好,可以应用于各类Web项目中。

相比于JS或GIF动画,CSS动画文件体积更小,性能开销更低。同时代码量少,实现难度不大,非常适合各种Loading场景。让我们开始这个CSS动画的学习之旅吧!

博主最近左思右想，终于~ 翠花上菜

二、实例

✨第一种

这是一个极其简单的跷跷板加载效果，完全是用的HTML+CSS

让我们来看一下HTML代码

<body>
	<div class="bar">
		<div class="ball"></div>
	</div>
</body>

恩？完事了？

恩！！！对 HTML就是这么简单，主要是画一个木板

让我们来继续完成CSS代码

html,body{
	width:100%;
	height: 100%;
	background: #000;
}
.ball {
	position: relative;
	bottom: 50px;
	left: calc(100% - 20px);
	width: 50px;
	height: 50px;
	background: #fff;
	border-radius: 50%;
	animation: ball-move8234 3s ease-in-out 1s infinite alternate;
}
		
.ball::after {
	position: absolute;
	content: '';
	top: 25px;
	right: 5px;
	width: 5px;
	height: 5px;
	background: #000;
	border-radius: 50%;
}
		
.bar {
	width: 200px;
	height: 12.5px;
	background: #FFDAAF;
	border-radius: 30px;
	transform: rotate(-15deg);
    animation: up-down6123 3s ease-in-out 1s infinite alternate;
	margin: 400px auto;
}
		
@keyframes up-down6123 {
	from {
		transform: rotate(-15deg);
	}
		
   to {
		transform: rotate(15deg);
   }
}
		
@keyframes ball-move8234 {
    from {
		 left: calc(100% - 40px);
		 transform: rotate(360deg);
	}
		
    to {
		 left: calc(0% - 20px);
		 transform: rotate(0deg);
    }
}

嗯嗯嗯！这下第一种效果就完成了。大家应该都可以看懂吧~好的，那我就不解释了。什么？看不懂？看不懂也不解释😏，去学基础去！！！！！！！！！！！！

🔔注意

1、因为球是白色背景，那么我们就要把项目设置一个其它背景，不然都是白色的你可就看不见了

2、在项目中使用的时候最好给一个父级元素控制它的位置。不然它的位置可是在左上角。有了父级元素.bar里面的 margin: 400px auto;就可以删掉啦！

✨第二种

作为一个程序猿，我们在思考的时候就要做一个优雅的沉思者，比如：

优雅太优雅了！！！！！！！！！！！！！！！！！！！！

来吧，让我们来看一下HTML代码：

<div class="🤚">
	<div class="👉"></div>
	<div class="👉"></div>
	<div class="👉"></div>
	<div class="👉"></div>
	<div class="🌴"></div>		
	<div class="👍"></div>
</div>

不仅效果优雅，代码我也要优雅，恩就是这么傲娇，再来看一下CSS代码

.🤚 {
	--skin-color: #E4C560;
	--tap-speed: 0.6s;
	--tap-stagger: 0.1s;
	position: relative;
	width: 80px;
	height: 60px;
	margin-left: 80px;
}
		
.🤚:before {
	content: '';
	display: block;
	width: 180%;
	height: 75%;
	position: absolute;
	top: 70%;
	right: 20%;
	background-color: black;
	border-radius: 40px 10px;
	filter: blur(10px);
	opacity: 0.3;
}
		
.🌴 {
	display: block;
    width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
    background-color: var(--skin-color);
	border-radius: 10px 40px;
}
		
.👍 {
	position: absolute;
	width: 120%;
	height: 38px;
    background-color: var(--skin-color);
	bottom: -18%;
	right: 1%;
	transform-origin: calc(100% - 20px) 20px;
	transform: rotate(-20deg);
	border-radius: 30px 20px 20px 10px;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
	border-left: 2px solid rgba(0, 0, 0, 0.1);
}
		
.👍:after {
	width: 20%;
	height: 60%;
	content: '';
	background-color: rgba(255, 255, 255, 0.3);
	position: absolute;
	bottom: -8%;
	left: 5px;
	border-radius: 60% 10% 10% 30%;
	border-right: 2px solid rgba(0, 0, 0, 0.05);
}
		
.👉 {
	position: absolute;
	width: 80%;
	height: 35px;
	background-color: var(--skin-color);
	bottom: 32%;
	right: 64%;
	transform-origin: 100% 20px;
	animation-duration: calc(var(--tap-speed) * 2);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	transform: rotate(10deg);
}
		
.👉:before {
	content: '';
	position: absolute;
	width: 140%;
	height: 30px;
	background-color: var(--skin-color);
	bottom: 8%;
	right: 65%;
	transform-origin: calc(100% - 20px) 20px;
	transform: rotate(-60deg);
	border-radius: 20px;
}
		
		.👉:nth-child(1) {
		  animation-delay: 0;
		  filter: brightness(70%);
		  animation-name: tap-upper-1;
		}
		
		.👉:nth-child(2) {
		  animation-delay: var(--tap-stagger);
		  filter: brightness(80%);
		  animation-name: tap-upper-2;
		}
		
		.👉:nth-child(3) {
		  animation-delay: calc(var(--tap-stagger) * 2);
		  filter: brightness(90%);
		  animation-name: tap-upper-3;
		}
		
		.👉:nth-child(4) {
		  animation-delay: calc(var(--tap-stagger) * 3);
		  filter: brightness(100%);
		  animation-name: tap-upper-4;
		}
		
		@keyframes tap-upper-1 {
		  0%, 50%, 100% {
		    transform: rotate(10deg) scale(0.4);
		  }
		
		  40% {
		    transform: rotate(50deg) scale(0.4);
		  }
		}
		
		@keyframes tap-upper-2 {
		  0%, 50%, 100% {
		    transform: rotate(10deg) scale(0.6);
		  }
		
		  40% {
		    transform: rotate(50deg) scale(0.6);
		  }
		}
		
		@keyframes tap-upper-3 {
		  0%, 50%, 100% {
		    transform: rotate(10deg) scale(0.8);
		  }
		
		  40% {
		    transform: rotate(50deg) scale(0.8);
		  }
		}
		
		@keyframes tap-upper-4 {
		  0%, 50%, 100% {
		    transform: rotate(10deg) scale(1);
		  }
		
		  40% {
		    transform: rotate(50deg) scale(1);
		  }
		}

好了，代码到这里就结束了，快去试试把！优雅也结束了，让我们再来个实用的吧，不然要挨骂了，就知道优雅，产品经理也让你这么优雅吗😱

✨第三种

这种效果各位在管理端的项目应该会经常需要吧

来直接上代码

HTML：

<div class="typewriter">
    <div class="slide"><i></i></div>
    <div class="paper"></div>
    <div class="keyboard"></div>
</div>

CSS：

.typewriter {
  --blue: #5C86FF;
  --blue-dark: #275EFE;
  --key: #fff;
  --paper: #EEF0FD;
  --text: #D3D4EC;
  --tool: #FBC56C;
  --duration: 3s;
  position: relative;
  -webkit-animation: bounce05 var(--duration) linear infinite;
  animation: bounce05 var(--duration) linear infinite;
}

.typewriter .slide {
  width: 92px;
  height: 20px;
  border-radius: 3px;
  margin-left: 14px;
  transform: translateX(14px);
  background: linear-gradient(var(--blue), var(--blue-dark));
  -webkit-animation: slide05 var(--duration) ease infinite;
  animation: slide05 var(--duration) ease infinite;
}

.typewriter .slide:before, .typewriter .slide:after,
.typewriter .slide i:before {
  content: "";
  position: absolute;
  background: var(--tool);
}

.typewriter .slide:before {
  width: 2px;
  height: 8px;
  top: 6px;
  left: 100%;
}

.typewriter .slide:after {
  left: 94px;
  top: 3px;
  height: 14px;
  width: 6px;
  border-radius: 3px;
}

.typewriter .slide i {
  display: block;
  position: absolute;
  right: 100%;
  width: 6px;
  height: 4px;
  top: 4px;
  background: var(--tool);
}

.typewriter .slide i:before {
  right: 100%;
  top: -2px;
  width: 4px;
  border-radius: 2px;
  height: 14px;
}

.typewriter .paper {
  position: absolute;
  left: 24px;
  top: -26px;
  width: 40px;
  height: 46px;
  border-radius: 5px;
  background: var(--paper);
  transform: translateY(46px);
  -webkit-animation: paper05 var(--duration) linear infinite;
  animation: paper05 var(--duration) linear infinite;
}

.typewriter .paper:before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 7px;
  border-radius: 2px;
  height: 4px;
  transform: scaleY(0.8);
  background: var(--text);
  box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
}

.typewriter .keyboard {
  width: 120px;
  height: 56px;
  margin-top: -10px;
  z-index: 1;
  position: relative;
}

.typewriter .keyboard:before, .typewriter .keyboard:after {
  content: "";
  position: absolute;
}

.typewriter .keyboard:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  transform: perspective(10px) rotateX(2deg);
  transform-origin: 50% 100%;
}

.typewriter .keyboard:after {
  left: 2px;
  top: 25px;
  width: 11px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  -webkit-animation: keyboard05 var(--duration) linear infinite;
  animation: keyboard05 var(--duration) linear infinite;
}

@keyframes bounce05 {
  85%, 92%, 100% {
    transform: translateY(0);
  }

  89% {
    transform: translateY(-4px);
  }

  95% {
    transform: translateY(2px);
  }
}

@keyframes slide05 {
  5% {
    transform: translateX(14px);
  }

  15%, 30% {
    transform: translateX(6px);
  }

  40%, 55% {
    transform: translateX(0);
  }

  65%, 70% {
    transform: translateX(-4px);
  }

  80%, 89% {
    transform: translateX(-12px);
  }

  100% {
    transform: translateX(14px);
  }
}

@keyframes paper05 {
  5% {
    transform: translateY(46px);
  }

  20%, 30% {
    transform: translateY(34px);
  }

  40%, 55% {
    transform: translateY(22px);
  }

  65%, 70% {
    transform: translateY(10px);
  }

  80%, 85% {
    transform: translateY(0);
  }

  92%, 100% {
    transform: translateY(46px);
  }
}

@keyframes keyboard05 {
  5%, 12%, 21%, 30%, 39%, 48%, 57%, 66%, 75%, 84% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  9% {
    box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  18% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  27% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  36% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
  }

  45% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  54% {
    box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  63% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
  }

  72% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  81% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
}

本章内容到此结束，再会了各位，

三、结语

通过这些示例,我们可以看到利用CSS来创建加载动画是非常简单易行的。Transition、Animation和Transform等新特性为我们提供了丰富的动效实现工具。

一个优雅的加载动画可以极大地提升用户体验,是页面不可或缺的点睛之笔。除了本文介绍的几种方式,CSS动画还有很多有趣的玩法,可以创建出 UNIQUE的视觉效果。

当然,动效的使用还需要遵守一定的设计原则。过度的动画会增加认知负担,降低操作效率。开发者在使用时,需要权衡动效带来的视觉增强和认知成本。

总之,利用CSS开发加载动画非常简单,可以轻松为我们的Web项目添加生动的效果。同时,合理运用是动效成功的关键。让我们一起来探索CSS动画的奥秘,为用户创造更好的体验。

爱蹦跶的大A阿

关注

52
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
1
评论
让我们来完成一些纯CSS优美的加载动效，下一篇持续更新中...

CSS动画是网页中添加趣味性的重要方式之一。过渡动效不仅可以提高用户的体验,也可以增强页面的美观度。一个优雅的加载动画,能为等待页面加载的用户带来更好的体验。本文将介绍几种常见的CSS加载动效的实现方法。加载动效主要应用于两个场景:页面加载时的加载动画,以及Ajax请求时的加载提示。这两种场景下,加载动画可以消除用户的等待焦虑,让页面跳转和内容更新更流畅自然。
复制链接

扫一扫