css3个性loading,CSS3实现8种Loading效果

最新推荐文章于 2024-07-24 10:22:02 发布
最新推荐文章于 2024-07-24 10:22:02 发布
阅读量247 收藏
点赞数
文章标签： css3个性loading

第一种效果

72b161042589

1.gif

代码如下：

.loading{

width: 80px;

height: 40px;

margin: 0 auto;

margin-top:100px;

}

.loading span{

display: inline-block;

width: 8px;

height: 100%;

border-radius: 4px;

background: lightgreen;

-webkit-animation: load 1.04s ease infinite;

}

@-webkit-keyframes load{

0%,100%{

height: 40px;

background: lightgreen;

}

50%{

height: 60px;

margin-top: -20px;

background: lightblue;

}

}

.loading span:nth-child(2){

-webkit-animation-delay:0.13s;

}

.loading span:nth-child(3){

-webkit-animation-delay:0.26s;

}

.loading span:nth-child(4){

-webkit-animation-delay:0.39s;

}

.loading span:nth-child(5){

-webkit-animation-delay:0.52s;

}

第二种效果

72b161042589

2.gif

代码如下：

.loading{

width: 80px;

height: 80px;

border-radius: 50%;

margin: 0 auto;

margin-top:100px;

position: relative;

border:5px solid lightgreen;

-webkit-animation: turn 2s linear infinite;

}

.loading span{

display: inline-block;

width: 30px;

height: 30px;

border-radius: 50%;

background: lightgreen;

position: absolute;

left: 50%;

margin-top: -15px;

margin-left: -15px;

-webkit-animation: changeBgColor 2s linear infinite;

}

@-webkit-keyframes changeBgColor{

0%{

background: lightgreen;

}

100%{

background: lightblue;

}

}

@-webkit-keyframes turn{

0%{

-webkit-transform: rotate(0deg);

border-color: lightgreen;

}

100%{

-webkit-transform: rotate(360deg);

border-color: lightblue;

}

}

第三种效果

72b161042589

3.gif

代码如下：

.loading{

width: 150px;

height: 15px;

margin: 0 auto;

margin-top:100px;

text-align: center;

}

.loading span{

display: inline-block;

width: 15px;

height: 100%;

margin-right: 5px;

background: lightgreen;

-webkit-animation: load 1.04s ease infinite;

}

.loading span:last-child{

margin-right: 0px;

}

@-webkit-keyframes load{

0%{

opacity: 1;

-webkit-transform: scale(1.2);

}

100%{

opacity: .2;

-webkit-transform: scale(.2);

}

}

.loading span:nth-child(1){

-webkit-animation-delay:0.13s;

}

.loading span:nth-child(2){

-webkit-animation-delay:0.26s;

}

.loading span:nth-child(3){

-webkit-animation-delay:0.39s;

}

.loading span:nth-child(4){

-webkit-animation-delay:0.52s;

}

.loading span:nth-child(5){

-webkit-animation-delay:0.65s;

}

第四种效果

72b161042589

4.gif

代码如下：

.loading{

width: 150px;

height: 8px;

border-radius: 4px;

margin: 0 auto;

margin-top:100px;

position: relative;

background: lightblue;

overflow: hidden;

}

.loading span{

display:block;

width: 100%;

height: 100%;

border-radius: 3px;

background: lightgreen;

-webkit-animation: changePosition 4s linear infinite;

}

@-webkit-keyframes changePosition{

0%{

-webkit-transform: translate(-150px);

}

50%{

-webkit-transform: translate(0);

}

100%{

-webkit-transform: translate(150px);

}

}

第五种效果

72b161042589

5.gif

代码如下：

.loading{

width: 200px;

height: 60px;

margin: 0 auto;

margin-top: 100px;

position: relative;

}

.loading span{

width: 50px;

height: 30px;

border-radius: 50%;

background: lightgreen;

position: absolute;

top: 50%;

margin-top: -15px;

overflow: hidden;

-webkit-animation: changePosition 2.08s linear infinite;

}

@-webkit-keyframes changePosition{

0%,100%{

-webkit-transform: translate(70px);

}

20%{

width: 50px;

height: 30px;

margin-top:-15px;

-webkit-transform: translate(0px);

}

30%{

width: 20px;

height: 60px;

margin-top:-30px;

-webkit-transform: translate(0px);

}

35%{

width: 50px;

height: 30px;

margin-top:-15px;

-webkit-transform: translate(5px);

background: lightblue;

}

70%{

width: 50px;

height: 30px;

margin-top:-15px;

-webkit-transform: translate(160px);

}

80%{

width: 20px;

height: 60px;

margin-top:-30px;

-webkit-transform: translate(160px);

}

85%{

width: 50px;

height: 30px;

margin-top:-15px;

-webkit-transform: translate(155px);

background: lightgreen;

}

}

第六种效果

72b161042589

6.gif

代码如下：

.loadEffect{

width: 100px;

height: 100px;

position: relative;

margin: 0 auto;

margin-top:100px;

}

.loadEffect span{

display: inline-block;

width: 30px;

height: 10px;

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

background: lightgreen;

position: absolute;

-webkit-animation: load 1.04s ease infinite;

}

@-webkit-keyframes load{

0%{

opacity: 1;

}

100%{

opacity: 0.2;

}

}

.loadEffect span:nth-child(1){

left: 0;

top: 50%;

margin-top:-5px;

-webkit-animation-delay:0.13s;

}

.loadEffect span:nth-child(2){

left: 10px;

top: 20px;

-webkit-transform: rotate(45deg);

-webkit-animation-delay:0.26s;

}

.loadEffect span:nth-child(3){

left: 50%;

top: 10px;

margin-left: -15px;

-webkit-transform: rotate(90deg);

-webkit-animation-delay:0.39s;

}

.loadEffect span:nth-child(4){

top: 20px;

right:10px;

-webkit-transform: rotate(135deg);

-webkit-animation-delay:0.52s;

}

.loadEffect span:nth-child(5){

right: 0;

top: 50%;

margin-top:-5px;

-webkit-transform: rotate(180deg);

-webkit-animation-delay:0.65s;

}

.loadEffect span:nth-child(6){

right: 10px;

bottom:20px;

-webkit-transform: rotate(225deg);

-webkit-animation-delay:0.78s;

}

.loadEffect span:nth-child(7){

bottom: 10px;

left: 50%;

margin-left: -15px;

-webkit-transform: rotate(270deg);

-webkit-animation-delay:0.91s;

}

.loadEffect span:nth-child(8){

bottom: 20px;

left: 10px;

-webkit-transform: rotate(315deg);

-webkit-animation-delay:1.04s;

}

第七种效果

72b161042589

7.gif

代码如下：

.loadEffect {

width: 100px;

height: 100px;

margin: 0 auto;

margin-top:100px;

position: relative;

}

.loadEffect div{

width: 100%;

height: 100%;

position: absolute;

-webkit-animation: load 2.08s linear infinite;

}

.loadEffect div span{

display: inline-block;

width: 20px;

height: 20px;

border-radius: 50%;

background: lightgreen;

position: absolute;

left: 50%;

margin-top: -10px;

margin-left: -10px;

}

@-webkit-keyframes load{

0%{

-webkit-transform: rotate(0deg);

}

10%{

-webkit-transform: rotate(45deg);

}

50%{

opacity: 1;

-webkit-transform: rotate(160deg);

}

62%{

opacity: 0;

}

65%{

opacity: 0;

-webkit-transform: rotate(200deg);

}

90%{

-webkit-transform: rotate(340deg);

}

100%{

-webkit-transform: rotate(360deg);

}

}

.loadEffect div:nth-child(1){

-webkit-animation-delay:0.2s;

}

.loadEffect div:nth-child(2){

-webkit-animation-delay:0.4s;

}

.loadEffect div:nth-child(3){

-webkit-animation-delay:0.6s;

}

.loadEffect div:nth-child(4){

-webkit-animation-delay:0.8s;

}

第八种效果

72b161042589

8.gif

代码如下：

.loading{

width: 60px;

height: 60px;

margin: 0 auto;

margin-top:100px;

position: relative;

-webkit-animation: load 3s linear infinite;

}

.loading div{

width: 100%;

height: 100%;

position: absolute;

}

.loading span{

display: inline-block;

width: 20px;

height: 20px;

border-radius: 50%;

background: #99CC66;

position: absolute;

left: 50%;

margin-top: -10px;

margin-left: -10px;

-webkit-animation: changeBgColor 3s ease infinite;

}

@-webkit-keyframes load{

0%{

-webkit-transform: rotate(0deg);

}

33.3%{

-webkit-transform: rotate(120deg);

}

66.6%{

-webkit-transform: rotate(240deg);

}

100%{

-webkit-transform: rotate(360deg);

}

}

@-webkit-keyframes changeBgColor{

0%,100%{

background: #99CC66;

}

33.3%{

background: #FFFF66;

}

66.6%{

background: #FF6666;

}

}

.loading div:nth-child(2){

-webkit-transform: rotate(120deg);

}

.loading div:nth-child(3){

-webkit-transform: rotate(240deg);

}

.loading div:nth-child(2) span{

-webkit-animation-delay: 1s;

}

.loading div:nth-child(3) span{

-webkit-animation-delay: 2s;

}

好好讲话就好好
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯CSS3实现的8种Loading动画效果
09-25
主要介绍了纯CSS3实现的8种Loading动画效果,效果简洁、超酷、符合当前前端的流行风格,需要的朋友可以参考下
css3超炫8种loading加载特效
weixin_30822451的博客
04-30 513
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt...
【css3动画】分享几组手写Loading...加载中...样式
最新发布
一位前行者的博客
07-24 610
在网页开发中，加载动画是提升用户体验的重要元素之一。本文将分享三种不同的Loading…加载中…样式，每种样式都具有独特的视觉效果和动画表现。你可以根据自己的项目需求选择合适的样式，或者将它们作为灵感来创建自己的加载动画。
使用 CSS3 实现超炫的 Loading（加载）动画效果
weixin_30530939的博客
05-30 464
　SpinKit 是一套网页动画效果，包含8种基于CSS3实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览） 您可能感兴趣的相...
CSS3-loading动画（一）
weixin_30677617的博客
07-10 147
前两天从一个网站中看到了一些比较好的loading动画效果，是用纯CSS3来写的，感觉不错，就尝试着照着效果来自己写出来。 在开始之前，先复习一个小知识：CSS3新增的关键帧动画，可以用来实现很多的动画，我们可以通过animation-delay来控制动画延迟执行，来实现丰富的效果。 当animation-delay的值为正值时，动画将被延迟从初始状态开始执行； 当animation-del...
CSS3实现10种Loading效果
09-24
CSS3实现10种Loading效果的知识点包括： 1. Loading效果概念：在网页或应用中，Loading效果通常用于在数据加载或页面切换时向用户表明系统正在工作，增加用户等待的耐心。这些效果通过动画展示，可以使用多种技术...
css3实现加载loading特效小动画效果
06-12
总结来说，CSS3加载loading特效小动画效果是通过结合关键帧动画、变换（transform）、过渡（transition）以及颜色和背景的动态变化来实现的。这些技术的运用让网页加载不再枯燥，而是成为了一种视觉享受。在实际开发...
CSS3轻松实现清新 Loading 效果的简单实例
09-27
在本文中，我们将探讨如何使用CSS3轻松创建清新的加载（Loading）效果。CSS3引入了许多新特性，其中动画（Animation）和过渡（Transition）功能为网页设计带来了丰富的视觉效果，使得无需JavaScript或其他复杂的编程...
CSS3实现十种Loading效果
10-10
本文将深入探讨如何使用CSS3来创建十种不同的加载效果，这些效果利用了CSS3的新特性，如动画、渐变、变换和透明度控制等。由于部分效果采用了SVG（Scalable Vector Graphics）技术，因此它们可能不适用于低版本的IE...
纯CSS3实现8款超好看的Loading加载动画特效
02-19
纯CSS3实现8款Loading加载动画特效，可以比拟gif动画效果的8个创新绿色Loading加载特效，动画效果非常漂亮。 这是一款非常不错的导航菜单，鼠标悬停导航上面文章内容遮罩变暗，鼠标离开文章高亮显示。
纯css3 加载loading动画特效。亲测可用
08-24
很实用的 loading 等待动画特效。纯css3
CSS3动画之DIY Loading动画
12-13
首先要知道什么是CSS3动画？然后才能做出自己想要的动画效果。下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍，希望对你有用。 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。 使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。 要创建CSS3动画，那么首先就要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 当在
28个非常漂亮的css3制作的loading动画
05-27
适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
css3实现loading动画
qq_39905409的博客
12-29 1004
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> .loading { width: 76px; height: 60px; position: absolute; top: 50.
loading窗口动画 web_【每日一学】用css3玩转loading动画
weixin_39621060的博客
12-19 51
今天用css3实现loading，做下笔记，方便后面记住了。html>loading.container{width:300px;height:300px;position:relative;margin:50pxauto;}.circle{width:100px;height:100px;position:absolute;border-radius:50%;}#one{l...
CSS3-loading动画
liuhao9999的博客
07-28 286
代码】CSS3-loading动画。
CSS3 动画loading
weixin_37892321的博客
03-17 111
Css .spinner { margin: 100px auto; width: 20px; height: 20px; position: relative; } .container1 > div, .container2 > div, .container3 > div { width: 6px; height: 6px; background-color: #333; ...
css3实现loading点的加载动画
06-10
可以使用CSS3的伪元素和动画属性来实现loading点的加载动画，以下是一个简单的示例： HTML代码： ```html <div class="loading"> <div></div> <div></div> <div></div> </div> ``` CSS代码： ```css .loading { display: flex; justify-content: center; align-items: center; height: 100vh; } .loading div { width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #000; animation: loading 0.8s ease-in-out infinite; } .loading div:nth-child(2) { animation-delay: 0.2s; } .loading div:nth-child(3) { animation-delay: 0.4s; } @keyframes loading { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } ``` 解释一下： - 父元素 `.loading` 使用 flex 布局，居中子元素； - 子元素 `.loading div` 是三个小圆点，通过 `margin` 和 `border-radius` 等属性设置样式； - 使用 `animation` 属性定义动画，并通过 `animation-delay` 属性设置不同的延迟时间，让三个小圆点错开； - `@keyframes` 规则定义动画的关键帧，通过 `transform: scale()` 属性控制圆点的大小，实现点的出现和消失效果； - 最后，把三个小圆点放到一个父元素中，就可以实现loading点的加载动画了。 希望这个示例能够帮到你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值