纯CSS3实现各种loading效果
生活随笔
收集整理的這篇文章主要介紹了
纯CSS3实现各种loading效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
動(dòng)畫效果參考連接：http://www.webhek.com/post/css-loaders.html
效果如下：
以上這些效果都是用一個(gè)div加css3動(dòng)畫實(shí)現(xiàn)的，看起來效果似乎不錯(cuò)。如果不考慮IE9兼容性的話，有一定的使用價(jià)值。
css3，canvas等實(shí)現(xiàn)的各種炫酷動(dòng)畫可參考網(wǎng)站：https://www.html5tricks.com/tag/loading動(dòng)畫/
1.第一個(gè)動(dòng)畫的實(shí)現(xiàn)
我們來看一看第一個(gè)三條杠加載動(dòng)畫的實(shí)現(xiàn)代碼
<style>
body{
background: #56b4ab;
}
.loader,
.loader:before,
.loader:after {
background: #FFF;
/*
* load1：執(zhí)行的動(dòng)畫名
* 1s：執(zhí)行一秒
* infinite：執(zhí)行無限次
* ease-in-out：動(dòng)畫以低速開始和結(jié)束
*/
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
}
.loader {
text-indent: -9999em;
margin: 40% auto;
position: relative;
font-size: 11px;
/* 延時(shí)0.16s */
animation-delay: 0.16s;
}
.loader:after {
left: 1.5em;
/* 延時(shí)0.32s */
animation-delay: 0.32s;
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #FFF;
height: 4em;
}
40% {
/* 實(shí)現(xiàn)上部拉伸 */
box-shadow: 0 -2em #ffffff;
/* 實(shí)現(xiàn)下部拉伸 */
height: 5em;
}
}
</style>
<div class="loader">加載中...</div>
這里為了減少代碼量，并沒有做兼容性處理，一般我們需要在上述代碼animation、animation-delay、keyframes前加入-webkit-在寫一次樣式。
上面代碼中寬高等都是用的em作為單位，這個(gè)的好處在于可以用font-size來控制其大小。
2.第二個(gè)動(dòng)畫的實(shí)現(xiàn)
body{
background: #56b4ab;
}
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
}
.loader:before,
.loader:after {
position: absolute;
top: -0.1em;
content: '';
width: 5.2em;
height: 10.2em;
background: #56b4ab;
}
.loader {
font-size: 11px;
text-indent: -99999em;
margin: 30% auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em #FFF;
}
.loader:before {
border-radius: 10.2em 0 0 10.2em;
left: -0.1em;
/* 設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置 */
transform-origin: 5.2em 5.1em;
/*
* load2：執(zhí)行的動(dòng)畫名
* 2s：執(zhí)行2秒
* infinite：執(zhí)行無限次
* 1.5s：延時(shí)1.5秒
*/
animation: load2 2s infinite 1.5s;
}
.loader:after {
border-radius: 0 10.2em 10.2em 0;
left: 5.1em;
transform-origin: 0px 5.1em;
animation: load2 2s infinite;
}
@keyframes load2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
這個(gè)動(dòng)畫主要利用了旋轉(zhuǎn)和顏色遮擋來實(shí)現(xiàn)動(dòng)畫效果。
3.第三個(gè)動(dòng)畫的實(shí)現(xiàn)
body{
background: #56b4ab;
}
.loader {
font-size: 10px;
margin: 30% auto;
text-indent: -9999em;
width: 11em;
height: 11em;
border-radius: 50%;
/* 線性漸變，從左到右，從白色到透明，0％代表起點(diǎn)和100％是終點(diǎn) */
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
animation: load3 1.4s infinite linear;
}
.loader:before,
.loader:after{
content: '';
position: absolute;
top: 0;
left: 0;
}
.loader:before {
width: 50%;
height: 50%;
background: #FFF;
border-radius: 100% 0 0 0;
}
.loader:after {
background: #56b4ab;
width: 75%;
height: 75%;
border-radius: 50%;
margin: auto;
bottom: 0;
right: 0;
}
@keyframes load3 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
實(shí)現(xiàn)：線性漸變+顏色遮擋+旋轉(zhuǎn)
4.第四個(gè)動(dòng)畫的實(shí)現(xiàn)
body{
background: #56b4ab;
}
.loader {
font-size: 20px;
margin: 45% auto;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
/* liner：規(guī)定以相同速度開始至結(jié)束的過渡效果*/
animation: load4 1.3s infinite linear;
}
@keyframes load4 {
0%,
100% {
box-shadow:
0em -3em 0em 0.2em #ffffff,
2em -2em 0 0em #ffffff,
3em 0em 0 -0.5em #ffffff,
2em 2em 0 -0.5em #ffffff,
0em 3em 0 -0.5em #ffffff,
-2em 2em 0 -0.5em #ffffff,
-3em 0em 0 -0.5em #ffffff,
-2em -2em 0 0em #ffffff;
}
12.5% {
box-shadow:
0em -3em 0em 0em #ffffff,
2em -2em 0 0.2em #ffffff,
3em 0em 0 0em #ffffff,
2em 2em 0 -0.5em #ffffff,
0em 3em 0 -0.5em #ffffff,
-2em 2em 0 -0.5em #ffffff,
-3em 0em 0 -0.5em #ffffff,
-2em -2em 0 -0.5em #ffffff;
}
25% {
box-shadow:
0em -3em 0em -0.5em #ffffff,
2em -2em 0 0em #ffffff,
3em 0em 0 0.2em #ffffff,
2em 2em 0 0em #ffffff,
0em 3em 0 -0.5em #ffffff,
-2em 2em 0 -0.5em #ffffff,
-3em 0em 0 -0.5em #ffffff,
-2em -2em 0 -0.5em #ffffff;
}
37.5% {
box-shadow:
0em -3em 0em -0.5em #ffffff,
2em -2em 0 -0.5em #ffffff,
3em 0em 0 0em #ffffff,
2em 2em 0 0.2em #ffffff,
0em 3em 0 0em #ffffff,
-2em 2em 0 -0.5em #ffffff,
-3em 0em 0 -0.5em #ffffff,
-2em -2em 0 -0.5em #ffffff;
}
50% {
box-shadow:
0em -3em 0em -0.5em #ffffff,
2em -2em 0 -0.5em #ffffff,
3em 0em 0 -0.5em #ffffff,
2em 2em 0 0em #ffffff,
0em 3em 0 0.2em #ffffff,
-2em 2em 0 0em #ffffff,
-3em 0em 0 -0.5em #ffffff,
-2em -2em 0 -0.5em #ffffff;
}
62.5% {
box-shadow:
0em -3em 0em -0.5em #ffffff,
2em -2em 0 -0.5em #ffffff,
3em 0em 0 -0.5em #ffffff,
2em 2em 0 -0.5em #ffffff,
0em 3em 0 0em #ffffff,
-2em 2em 0 0.2em #ffffff,
-3em 0em 0 0em #ffffff,
-2em -2em 0 -0.5em #ffffff;
}
75% {
box-shadow:
0em -3em 0em -0.5em #ffffff,
2em -2em 0 -0.5em #ffffff,
3em 0em 0 -0.5em #ffffff,
2em 2em 0 -0.5em #ffffff,
0em 3em 0 -0.5em #ffffff,
-2em 2em 0 0em #ffffff,
-3em 0em 0 0.2em #ffffff,
-2em -2em 0 0em #ffffff;
}
87.5% {
box-shadow:
0em -3em 0em 0em #ffffff,
2em -2em 0 -0.5em #ffffff,
3em 0em 0 -0.5em #ffffff,
2em 2em 0 -0.5em #ffffff,
0em 3em 0 -0.5em #ffffff,
-2em 2em 0 0em #ffffff,
-3em 0em 0 0em #ffffff,
-2em -2em 0 0.2em #ffffff;
}
}
總結(jié)
以上是生活随笔為你收集整理的纯CSS3实现各种loading效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css实现标题左右横线
- 下一篇： 提高CSS 开发效率的常用代码片段