css实现加载旋转动画

先看效果：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css加载旋转动画</title><style>*{margin: 0;padding: 0;}.loading-screen{width: 100%;     height: 100vh;background: white;position: fixed;display: flex;align-items: center;justify-content: center;}.loading{width: 80px;display: flex;flex-wrap: wrap;animation: rotate 3s linear infinite;}@keyframes rotate{to{transform: rotate(360deg);}}.loading span{width: 32px;height: 32px;background: red;margin: 4px;animation: scale 1.5s linear infinite;}@keyframes scale{50%{transform: scale(1.2);}}.loading span:nth-child(1){border-radius: 50% 50% 0 50%;background: #e77f67;transform-origin: bottom right;}.loading span:nth-child(2){border-radius: 50% 50% 50% 0;background: #778beb;transform-origin: bottom left;animation-delay: 0.5s;}.loading span:nth-child(3){border-radius: 50% 0 50% 50%;background: #f8a5c2;transform-origin: top right;animation-delay: 1.5s;}.loading span:nth-child(4){border-radius:  0 50% 50% 50%;background: #f5cd79;transform-origin: top left;animation: 1s;}</style>
</head>
<body><div class="loading-screen"><div class="loading"><span></span><span></span><span></span><span></span></div></div>
</body>
</html>

其他小案例：

css实现颜色渐变小动画

css代码实现3D动画翻转 - 鱿鱼游戏卡片制作

css实现旋转的小流星动画

只用js代码实现电子时钟，精确到毫秒

简单的js代码实现主题色切换

点击主页看更多css小动画，js小案例…

我的主页

css实现加载旋转动画相关推荐

好看的css预加载旋转动画与流光字体
今天刚好在做这个功能,就实现一个预加载的动画效果,随手记录一.预加载旋转动画 Html <view class="concentric_round"></vi ...
html 载入中,用纯CSS实现加载中动画效果
今天要介绍的是用简单的CSS--只用CSS,不用Gif--制作"加载中-"动画效果.先看看效果: 上面的这个加载中效果,以前是用gif动图实现的,但随着CSS的进步,CSS动画功能 ...
css编写加载页面动画效果
一.html代码 <div id="loader-wrapper"><div id="loader" ...
CSS 实现加载动画之四-圆点旋转
原文:CSS 实现加载动画之四-圆点旋转圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以 ...
CSS 实现加载动画之五-光盘旋转
今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...
CSS 实现加载动画之一-菊花旋转
CSS 实现加载动画之一-菊花旋转原文:CSS 实现加载动画之一-菊花旋转最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意 ...
css光盘转动,CSS 实现加载动画之五-光盘旋转
CSS 实现加载动画之五-光盘旋转今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分 ...
html间隔代码_HTML+CSS基础入门开发，经典Loading加载缩放动画特效
大家好,本篇文章分享经典Loading加载缩放动画特效,欢迎参考和指正. 效果图: Loading加载缩放动画特效 HTML代码: CSS代码: 知识点: animation:是CSS3的动画属性,这 ...
css实现加载中loading动画效果
1 效果 2 实现原理原理很简单: 1 设置100px宽高的div,再设置成圆形border-radius:50%: 2 设置border一定宽度和颜色,再设置border-left为同样宽度和另一 ...
5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画
目录 1 视频 2 知识点 2.1 CSS calc() 函数 2.2 CSS var() 函数 2.3 CSS3 box-shadow 属性 2.4 CSS3 box-sizing 属性 2.5 C ...

css实现加载旋转动画

css实现加载旋转动画相关推荐

最新文章

热门文章