超酷的 CSS3 loading 预加载动画特效

给大家介绍一款超酷CSS3 loading预加载动画特效。

该loading特效共有4种不同的效果，分别通过不同的CSS3 keyframes帧动画来完成。

HTML结构

4种loading预加载动画的HTML结构分别如下：

<!-- 效果一 -->
<div class="spinner-box"><div class="circle-border"><div class="circle-core"></div></div>
</div><!-- 效果二 -->
<div class="spinner-box"><div class="configure-border-1">  <div class="configure-core"></div></div>  <div class="configure-border-2"><div class="configure-core"></div></div>
</div><!-- 效果三 -->
<div class="spinner-box"><div class="pulse-container">  <div class="pulse-bubble pulse-bubble-1"></div><div class="pulse-bubble pulse-bubble-2"></div><div class="pulse-bubble pulse-bubble-3"></div></div>
</div><!-- 效果四 -->
<div class="spinner-box"><div class="solar-system"><div class="earth-orbit orbit"><div class="planet earth"></div><div class="venus-orbit orbit"><div class="planet venus"></div><div class="mercury-orbit orbit"><div class="planet mercury"></div><div class="sun"></div></div></div></div></div>
</div>

CSS样式

然后分别为它们添加下面的CSS样式。

/* KEYFRAMES */@keyframes spin {from {transform: rotate(0);}to{transform: rotate(359deg);}
}@keyframes configure-clockwise {0% {transform: rotate(0);}25% {transform: rotate(90deg);}50% {transform: rotate(180deg);}75% {transform: rotate(270deg);}100% {transform: rotate(359deg);}
}@keyframes configure-xclockwise {0% {transform: rotate(45deg);}25% {transform: rotate(-45deg);}50% {transform: rotate(-135deg);}75% {transform: rotate(-215deg);}100% {transform: rotate(-305deg);}
}@keyframes pulse {from {opacity: 1;transform: scale(1);}to {opacity: .25;transform: scale(.75);}
}/* GRID STYLING */* {box-sizing: border-box;
}body {min-height: 100vh;background-color: #37474f;display: flex;justify-content: space-between;flex-wrap: wrap;align-items: flex-start;
}.spinner-box {width: 300px;height: 300px;display: flex;justify-content: center;align-items: center;background-color: transparent;
}/* SPINNING CIRCLE */.circle-border {width: 150px;height: 150px;padding: 3px;display: flex;justify-content: center;align-items: center;border-radius: 50%;background: rgb(63,249,220);background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);animation: spin .8s linear 0s infinite;
}.circle-core {width: 100%;height: 100%;background-color: #37474f;border-radius: 50%;
}/* X-ROTATING BOXES */.configure-border-1 {width: 115px;height: 115px;padding: 3px;position: absolute;display: flex;justify-content: center;align-items: center;background: #ffab91;animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
}.configure-border-2 {width: 115px;height: 115px;padding: 3px;left: -115px;display: flex;justify-content: center;align-items: center;background: rgb(63,249,220);transform: rotate(45deg);animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
}.configure-core {width: 100%;height: 100%;background-color: #37474f;
}/* PULSE BUBBLES */.pulse-container {width: 120px;display: flex;justify-content: space-between;align-items: center;
}.pulse-bubble {width: 20px;height: 20px;border-radius: 50%;background-color: #3ff9dc;
}.pulse-bubble-1 {animation: pulse .4s ease 0s infinite alternate;
}
.pulse-bubble-2 {animation: pulse .4s ease .2s infinite alternate;
}
.pulse-bubble-3 {animation: pulse .4s ease .4s infinite alternate;
}/* SOLAR SYSTEM */.solar-system {width: 250px;height: 250px;display: flex;justify-content: center;align-items: center;
}.orbit {position: relative;display: flex;justify-content: center;align-items: center;border: 1px solid #ffffffa5;border-radius: 50%;
}.earth-orbit {width: 165px;height: 165px;-webkit-animation: spin 12s linear 0s infinite;
}.venus-orbit {width: 120px;height: 120px;-webkit-animation: spin 7.4s linear 0s infinite;
}.mercury-orbit {width: 90px;height: 90px;-webkit-animation: spin 3s linear 0s infinite;
}.planet {position: absolute;top: -5px;width: 10px;height: 10px;border-radius: 50%;background-color: #3ff9dc;
}.sun {width: 35px;height: 35px;border-radius: 50%;background-color: #ffab91;
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

超酷的 CSS3 loading 预加载动画特效相关推荐

html5 黑色圆圈,html5 css3圆形百分比加载动画特效
特效描述:html5 css3 圆形百分比加载动画特效.html5 css3 loading加载动画,圆形百分比进度条加载动画,加载完成显示健康度检测得分情况. 代码结构 1. 引入JS 2. HT ...
html旋转的等到的圆圈,CSS3 Loading 旋转圆盘加载动画
前面介绍过多个css3 loading加载动画的实例,今天继续介绍另一个实例,这个实例用css3实现旋转圆盘的预加载动画. css代码#preloader{ position:relative; wi ...
css3彩色放大缩小发光loading文字加载动画js特效
下载地址 css3彩色放大缩小发光loading文字加载动画特效,文字样式有霓虹灯效果,文字也支持中文汉字. dd:
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...
html5圆圈闪烁,html5 css3圆形波浪百分比加载动画特效
一款简单漂亮的html5 css3圆形波浪百分比加载动画特效,非常好看的波浪滚动上升动画效果,也可用于百分比展示. 查看演示下载资源: 28 次下载资源下载积分: 20 积分 js代码 var ...
html5 loader,7种基于GSAP的SVG Loader加载动画特效
这是一组效果非常炫酷的基于GSAP的SVG Loader加载动画特效.这组SVG加载动画特效共有7种效果,分别使用GSAP对SVG进行操纵,制作出各种炫酷的Loading加载动画效果. 这些SVG加载 ...
android listview 预加载动画,Android - 使用预加载的数据库填充ListView
我想使用我已经使用SQLite数据库浏览器创建的预加载数据库来填充listview.但是,我不断收紧.对于DatabaseHelper类,我精确地在http://www.reigndesign.com ...

超酷的 CSS3 loading 预加载动画特效

超酷的 CSS3 loading 预加载动画特效相关推荐

最新文章

热门文章