让老司机带你用纯css制作浮动加载动画，让基础躁起来

这是用纯css来写的一个效果图，动画效果还是挺有意思的哦~

很多初学者小伙伴都以为css只要要会那么少量就ok了，很简单，其实css还是很多你所不知道的内容哦。

分享之前还是要推荐一下小编的web前台学习群：121404239，有技术知识点分享，还有小编整理好的web前台资料和教程哦！

html代码：

css代码：

@-webkit-keyframes mainAnimation {

0% {

width: 50px;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

20% {

width: 50px;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

40% {

width: 150px;

-webkit-transform: translateX(-50px) translateY(0px) rotate(0deg);

transform: translateX(-50px) translateY(0px) rotate(0deg);

}

60% {

width: 150px;

-webkit-transform-origin: bottom right;

transform-origin: bottom right;

-webkit-transform: translateX(-150px) translateY(0px) rotate(90deg);

transform: translateX(-150px) translateY(0px) rotate(90deg);

}

80% {

width: 50px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(90deg);

transform: translateX(-25px) translateY(0px) rotate(90deg);

}

100% {

width: 50px;

-webkit-transform: translateX(-50px) translateY(0px) rotate(90deg);

transform: translateX(-50px) translateY(0px) rotate(90deg);

}

}

@keyframes mainAnimation {

0% {

width: 50px;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

20% {

width: 50px;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

40% {

width: 150px;

-webkit-transform: translateX(-50px) translateY(0px) rotate(0deg);

transform: translateX(-50px) translateY(0px) rotate(0deg);

}

60% {

width: 150px;

-webkit-transform-origin: bottom right;

transform-origin: bottom right;

-webkit-transform: translateX(-150px) translateY(0px) rotate(90deg);

transform: translateX(-150px) translateY(0px) rotate(90deg);

}

80% {

width: 50px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(90deg);

transform: translateX(-25px) translateY(0px) rotate(90deg);

}

100% {

width: 50px;

-webkit-transform: translateX(-50px) translateY(0px) rotate(90deg);

transform: translateX(-50px) translateY(0px) rotate(90deg);

}

}

@-webkit-keyframes secundaryAnimation {

0% {

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

20% {

-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);

transform: translateX(0px) translateY(0px) rotate(180deg);

}

40% {

-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);

transform: translateX(0px) translateY(0px) rotate(180deg);

}

60% {

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

80% {

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

100% {

-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);

transform: translateX(0px) translateY(0px) rotate(180deg);

}

}

@keyframes secundaryAnimation {

0% {

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

20% {

-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);

transform: translateX(0px) translateY(0px) rotate(180deg);

}

40% {

-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);

transform: translateX(0px) translateY(0px) rotate(180deg);

}

60% {

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

80% {

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

}

100% {

-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);

transform: translateX(0px) translateY(0px) rotate(180deg);

}

}

@-webkit-keyframes shadowAnimation {

0% {

width: 150px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);

transform: translateX(-25px) translateY(0px) rotate(0deg);

}

20% {

width: 75px;

-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);

transform: translateX(37.5px) translateY(0px) rotate(0deg);

}

40% {

width: 200px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);

transform: translateX(-25px) translateY(0px) rotate(0deg);

}

60% {

width: 75px;

-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);

transform: translateX(37.5px) translateY(0px) rotate(0deg);

}

80% {

width: 75px;

-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);

transform: translateX(37.5px) translateY(0px) rotate(0deg);

}

100% {

width: 150px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);

transform: translateX(-25px) translateY(0px) rotate(0deg);

}

}

@keyframes shadowAnimation {

0% {

width: 150px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);

transform: translateX(-25px) translateY(0px) rotate(0deg);

}

20% {

width: 75px;

-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);

transform: translateX(37.5px) translateY(0px) rotate(0deg);

}

40% {

width: 200px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);

transform: translateX(-25px) translateY(0px) rotate(0deg);

}

60% {

width: 75px;

-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);

transform: translateX(37.5px) translateY(0px) rotate(0deg);

}

80% {

width: 75px;

-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);

transform: translateX(37.5px) translateY(0px) rotate(0deg);

}

100% {

width: 150px;

-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);

transform: translateX(-25px) translateY(0px) rotate(0deg);

}

}

@-webkit-keyframes float {

0% {

top: 50%;

}

50% {

top: 51%;

}

100% {

top: 50%;

}

}

@keyframes float {

0% {

top: 50%;

}

50% {

top: 51%;

}

100% {

top: 50%;

}

}

html, body {

height: 100%;

}

body {

position: relative;

background: #99d2e4;

background: linear-gradient(135deg, #99d2e4 0%, #ffd4da 100%);

}

.loader {

position: absolute;

width: 50px;

height: 50px;

top: 50%;

left: 50%;

margin-top: -25px;

margin-left: -25px;

background-color: #FFF5A5;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

-webkit-animation: mainAnimation 2.6s ease 0s infinite forwards;

animation: mainAnimation 2.6s ease 0s infinite forwards;

z-index: 2;

}

.loader:after {

content: '';

display: inline-block;

position: absolute;

width: 50px;

height: 50px;

top: 0;

left: -50px;

background-color: #FFF5A5;

-webkit-transform-origin: top right;

transform-origin: top right;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

-webkit-animation: secundaryAnimation 2.6s ease 0s infinite forwards;

animation: secundaryAnimation 2.6s ease 0s infinite forwards;

}

.shadow {

position: absolute;

width: 100px;

height: 10px;

top: 50%;

left: 50%;

margin-top: 50px;

margin-left: -75px;

border-radius: 50%;

background-color: #95a5a6;

-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);

transform: translateX(0px) translateY(0px) rotate(0deg);

-webkit-animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards;

animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards;

z-index: 1;

}

.logo {

position: absolute;

bottom: 20px;

left: 50%;

width: 42px;

height: 42px;

padding: 12px 5px;

margin-left: -21px;

-webkit-box-sizing: border-box;

box-sizing: border-box;

background-color: white;

border-radius: 50%;

-webkit-transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.logo:hover {

-webkit-transform: scale(1.4);

transform: scale(1.4);

}

.logo img {

width: 100%;

height: auto;

margin: 0 auto;

}