css 加载动画如何生效,css3 动画加载效果

最新推荐文章于 2024-05-30 10:50:01 发布
最新推荐文章于 2024-05-30 10:50:01 发布
阅读量147 收藏
点赞数
文章标签： css 加载动画如何生效

来看看效果：

css代码：

body, html, *{

padding: 0px;

margin: 0px;

}

body, html {

width: 100%;

background-color: #FFF;

}

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

#loader

{

height: 100vh;

width: 100%;

position: fixed;

top: 0px;

left: 0px;

background: #FFF;

z-index: 20;

}

.loader-content

{

border-radius: 150px;

height: 300px;

width: 300px;

background-color: #4385f6;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%,-50%) scale(1);

-ms-transform: translate(-50%,-50%) scale(1);

-o-transform: translate(-50%,-50%) scale(1);

transform: translate(-50%,-50%) scale(1);

-webkit-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);

-moz-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);

-o-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);

transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);

}

.loader-content.hide

{

opacity: 0;

-webkit-transform: translate(-50%,-50%) scale(0.9);

-ms-transform: translate(-50%,-50%) scale(0.9);

-o-transform: translate(-50%,-50%) scale(0.9);

transform: translate(-50%,-50%) scale(0.9);

}

.loader-turn-1

{

height: 110px;

width: 110px;

border: 5px solid #FFF;

border-right: 5px solid #4385f6;

border-radius: 60px;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

animation:loader-anim 2s linear infinite;

-webkit-animation:loader-anim 2s linear infinite;

animation-direction: reverse;

}

.loader-turn-2

{

height: 90px;

width: 90px;

border: 5px solid #FFF;

border-right: 5px solid #4385f6;

border-radius: 45px;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

animation:loader-anim 1.5s linear infinite;

-webkit-animation:loader-anim 1.5s linear infinite;

}

@-webkit-keyframes loader-anim {

0% {

-webkit-transform: translate(-50%,-50%) rotate(0deg);

-ms-transform: translate(-50%,-50%) rotate(0deg);

-o-transform: translate(-50%,-50%) rotate(0deg);

transform: translate(-50%,-50%) rotate(0deg);

}

100% {

-webkit-transform: translate(-50%,-50%) rotate(360deg);

-ms-transform: translate(-50%,-50%) rotate(360deg);

-o-transform: translate(-50%,-50%) rotate(360deg);

transform: translate(-50%,-50%) rotate(360deg);

}

}

@keyframes loader-anim {

0% {

-webkit-transform: translate(-50%,-50%) rotate(0deg);

-ms-transform: translate(-50%,-50%) rotate(0deg);

-o-transform: translate(-50%,-50%) rotate(0deg);

transform: translate(-50%,-50%) rotate(0deg);

}

100% {

-webkit-transform: translate(-50%,-50%) rotate(360deg);

-ms-transform: translate(-50%,-50%) rotate(360deg);

-o-transform: translate(-50%,-50%) rotate(360deg);

transform: translate(-50%,-50%) rotate(360deg);

}

}

#loader.load .loader-turn-1

{

animation:loader-anim-load-2 1s ease forwards;

-webkit-animation:loader-anim-load-2 1s ease forwards;

}

@-webkit-keyframes loader-anim-load-2 {

0% {

-webkit-transform: translate(-50%,-50%) rotate(-360deg);

-ms-transform: translate(-50%,-50%) rotate(-360deg);

-o-transform: translate(-50%,-50%) rotate(-360deg);

transform: translate(-50%,-50%) rotate(-360deg);

}

50% {

-webkit-transform: translate(-50%,-50%) rotate(-50deg);

-ms-transform: translate(-50%,-50%) rotate(-50deg);

-o-transform: translate(-50%,-50%) rotate(-50deg);

transform: translate(-50%,-50%) rotate(-50deg);

}

70% {

-webkit-transform: translate(-50%,-50%) rotate(10deg);

-ms-transform: translate(-50%,-50%) rotate(10deg);

-o-transform: translate(-50%,-50%) rotate(10deg);

transform: translate(-50%,-50%) rotate(10deg);

}

100% {

-webkit-transform: translate(-50%,-50%) rotate(0deg);

-ms-transform: translate(-50%,-50%) rotate(0deg);

-o-transform: translate(-50%,-50%) rotate(0deg);

transform: translate(-50%,-50%) rotate(0deg);

}

}

@keyframes loader-anim-load-2 {

0% {

-webkit-transform: translate(-50%,-50%) rotate(-360deg);

-ms-transform: translate(-50%,-50%) rotate(-360deg);

-o-transform: translate(-50%,-50%) rotate(-360deg);

transform: translate(-50%,-50%) rotate(-360deg);

}

50% {

-webkit-transform: translate(-50%,-50%) rotate(-50deg);

-ms-transform: translate(-50%,-50%) rotate(-50deg);

-o-transform: translate(-50%,-50%) rotate(-50deg);

transform: translate(-50%,-50%) rotate(-50deg);

}

70% {

-webkit-transform: translate(-50%,-50%) rotate(10deg);

-ms-transform: translate(-50%,-50%) rotate(10deg);

-o-transform: translate(-50%,-50%) rotate(10deg);

transform: translate(-50%,-50%) rotate(10deg);

}

100% {

-webkit-transform: translate(-50%,-50%) rotate(0deg);

-ms-transform: translate(-50%,-50%) rotate(0deg);

-o-transform: translate(-50%,-50%) rotate(0deg);

transform: translate(-50%,-50%) rotate(0deg);

}

}

#loader.load .loader-turn-2

{

animation:loader-anim-load-1 1s ease forwards;

-webkit-animation:loader-anim-load-1 1s ease forwards;

}

@-webkit-keyframes loader-anim-load-1 {

0% {

-webkit-transform: translate(-50%,-50%) rotate(360deg);

-ms-transform: translate(-50%,-50%) rotate(360deg);

-o-transform: translate(-50%,-50%) rotate(360deg);

transform: translate(-50%,-50%) rotate(360deg);

}

50% {

-webkit-transform: translate(-50%,-50%) rotate(-50deg);

-ms-transform: translate(-50%,-50%) rotate(-50deg);

-o-transform: translate(-50%,-50%) rotate(-50deg);

transform: translate(-50%,-50%) rotate(-50deg);

}

70% {

-webkit-transform: translate(-50%,-50%) rotate(10deg);

-ms-transform: translate(-50%,-50%) rotate(10deg);

-o-transform: translate(-50%,-50%) rotate(10deg);

transform: translate(-50%,-50%) rotate(10deg);

}

100% {

-webkit-transform: translate(-50%,-50%) rotate(0deg);

-ms-transform: translate(-50%,-50%) rotate(0deg);

-o-transform: translate(-50%,-50%) rotate(0deg);

transform: translate(-50%,-50%) rotate(0deg);

}

}

@keyframes loader-anim-load-1 {

0% {

-webkit-transform: translate(-50%,-50%) rotate(360deg);

-ms-transform: translate(-50%,-50%) rotate(360deg);

-o-transform: translate(-50%,-50%) rotate(360deg);

transform: translate(-50%,-50%) rotate(360deg);

}

50% {

-webkit-transform: translate(-50%,-50%) rotate(-50deg);

-ms-transform: translate(-50%,-50%) rotate(-50deg);

-o-transform: translate(-50%,-50%) rotate(-50deg);

transform: translate(-50%,-50%) rotate(-50deg);

}

70% {

-webkit-transform: translate(-50%,-50%) rotate(10deg);

-ms-transform: translate(-50%,-50%) rotate(10deg);

-o-transform: translate(-50%,-50%) rotate(10deg);

transform: translate(-50%,-50%) rotate(10deg);

}

100% {

-webkit-transform: translate(-50%,-50%) rotate(0deg);

-ms-transform: translate(-50%,-50%) rotate(0deg);

-o-transform: translate(-50%,-50%) rotate(0deg);

transform: translate(-50%,-50%) rotate(0deg);

}

}

HTML：

羊眉吐气A
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3动画-加载中···
ens600的博客
01-13 214
像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法：scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度。 第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用：translateY(n)：定义 2D 转换，沿着 Y 轴移动元素，从而实现小球沿Y方向来回移动。...
css 加载中效果的动画
PrimaryColor
09-09 162
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ..
39个纯CSS加载动画
09-04
39个纯CSS加载动画 各种动画效果采用纯css进行编写 下载下来之后 直接使用浏览器即可查看效果 没有其他依赖
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
热门推荐
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
使用CSS实现圆环流水灯、跑马灯、加载渐变动画效果
最新发布
weixin_52231116的博客
05-30 1829
本文主要使用CSS实现圆环流水灯、跑马灯、加载动画效果，以及介绍了常见的几种 transform 的变形函数
css加载动画
weixin_41897680的博客
09-25 8222
前言 感觉css动画真的很有意思，奈何太菜，想不出来。下面的这些例子都是从网上找的，我自己手敲的。教程来源也会进行标注。 加载动画 动画1 教程：点此查看 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
手把手实现 CSS 加载动画（一）
p1967914901的博客
08-07 4448
接下来便是旋转这三个圆，最方便的做法便是将容器进行旋转，但有一个地方需要注意，我们是要等三个圆移动到最远的位置后开始旋转。既然是加载动画，我们不可能让他在角落展示吧，我们当然需要将它水平垂直居中，水平垂直居中的方式有很多，这里就不再赘述了。现在你已经看到了三个黑乎乎的圆已经重合在容器中间（为了方便观察，我们给容器加了一个背景颜色）。好了，到现在我们已经完成了初始状态，接下来我们要为它们分别定义动画。接下来我们来绘制三个圆，首先一开始三个圆是在容器中间。，这就是动画开始时一个圆分裂成三个圆的停顿时刻；...
八种炫酷纯CSS加载动画代码
weixin_43923808的博客
05-12 7370
加载1CSS源码.title{ width: 100%; text-align: center; margin:60px 0; font-size: 18px; color: #999; } .loadingOne{ width: 80px; height: 40px; margin: 0 auto; } .loadingOne span{ display: inline-block; width: 8px; hei..
css3实现加载loading特效小动画效果
06-12
除了旋转，CSS3还支持许多其他动画效果，如淡入淡出、缩放、平移等，可以组合使用创造出各种复杂的加载动画。例如，可以创建一个带有渐变背景色的矩形条形加载动画，通过改变矩形的宽度来模拟加载进度： ```css @...
使用css3实现超炫的loading加载动画效果
09-25
在本文中，我们将深入探讨如何使用CSS3来创建引人注目的加载动画效果，特别是针对“SpinKit”库中的几种加载动画。CSS3是层叠样式表的第三版，引入了许多新特性，其中包括动画（Animations），这使得创建动态且平滑...
CSS3白色圆点加载动画特效
06-24
CSS3作为现代网页设计的核心技术之一，提供了丰富的样式功能和动画效果，其中就包括我们今天要讨论的“CSS3白色圆点加载动画特效”。这个特效通过简单的HTML结构和CSS3的动画属性，实现了美观且高效的加载指示器。 ...
CSS3加载动画网站Loading特效
06-24
综上所述，"CSS3加载动画网站Loading特效"是网页设计中的一个重要元素，它利用CSS3的转换、过渡和动画功能创造出吸引人的视觉效果，提升用户体验。而"jiaoben5304"可能是一个具体的加载动画样例，包含多种风格和色彩...
纯CSS3积木方块加载动画特效
06-24
在本文中，我们将深入探讨如何实现“纯CSS3积木方块加载动画特效”，这是一个巧妙地利用CSS3特性的3D效果方块加载动画。这个特效不仅视觉上引人注目，而且完全不依赖JavaScript，这使得它在网页设计中具有很高的实用...
纯css 加载动画
weixin_54255895的博客
03-20 554
【代码】纯css 加载动画。
【CSS 常用加载动画效果】
前端-CV全粘工程师
08-24 934
【代码】【CSS 常用加载动画效果】
简约CSS加载动画
weixin_53007319的博客
07-14 209
属性确定了转动中心点，正方形定在左下角，三个圆圈转点则是定在自身之外。容器作为父元素用于定位，正方形和三个圆圈通过CSS中。盒子作为圆圈蒙版层定位到容器中心，将中心部分遮掩。1.正方形和三个小原围绕盒子中心点转动。容器先转化为一个圆圈，后通过CSS中。2.遮掩外围多余部分。3.遮掩中心多余部分。
十六种炫酷纯css加载动画（一）
孟繁胜游的博客
12-12 7472
一个好的开篇，会给你这个项目增加不少分值。 有没有遇到过打开页面加载一段时间，页面内容才加载出来。在等待加载的过程中页面却是空白页，给用户的体验特别不好，会让项目降一个档次。下面的十六种炫酷炸裂的css加载动画，会让你在等待的过程中，体验视觉盛宴，给用户不一般的加载体验，对，就是纯css3的炫酷加载动画，请看效果！ 码字不易，且行且珍惜。 加载1 css源码 .title{ width:...
css加载动画代码示例
04-25
当我们需要在网页中展示加载过程时，可以使用CSS加载动画来提供用户体验。以下是一个简单的CSS加载动画示例： HTML代码： ```html <div class="loader"></div> ``` CSS代码： ```css .loader { border: 8px solid...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值