david2tdw
commented
4 years ago Open david2tdw opened 4 years ago
david2tdw
commented
4 years ago david2tdw
commented
4 years ago <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #403833;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 300px;
display: flex;
align-items: center;
user-select: none;
cursor: default;
}
.loader div {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
background: #ffffff;
text-align: center;
line-height: 60px;
font-size: 22px;
margin: 0 5px;
animation: bounce 1.5s infinite ease-in-out;
}
.loader div::after {
content: '';
position: absolute;
bottom: -40px;
left: 10px;
width: 40px;
height: 20px;
border-radius: 50%;
background: #322b27;
}
.loader div:nth-child(1) {
background: #db2f00;
color: #ffffff;
animation: bounceFirst 1.5s infinite ease-in-out;
}
.loader div:nth-child(2) {
background: #ff6d37;
color: #ffffff;
animation-delay: 50ms;
}
.loader div:nth-child(3) {
background: #ffa489;
color: #ffffff;
animation-delay: 100ms;
}
.loader div:nth-child(4) {
background: #f2f2f2;
color: #555;
animation-delay: 150ms;
}
.loader div:nth-child(5) {
background: #99d3d4;
color: #ffffff;
animation-delay: 200ms;
}
.loader div:nth-child(6) {
background: #56bebf;
color: #ffffff;
animation-delay: 250ms;
}
.loader div:nth-child(7) {
background: #13a3a5;
color: #ffffff;
animation-delay: 300ms;
}
@keyframes bounceFirst {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(-50px);
}
28% {
transform: translateX(-50px);
}
50% {
transform: translateX(100px);
}
80%,
100% {
transform: translateX(0px);
}
}
@keyframes bounce {
0% {
transform: translateX(0px);
}
28% {
transform: translateX(0px);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0px);
}
}
</style>
</head>
<body>
<div class="loader">
<div>l</div>
<div>o</div>
<div>a</div>
<div>d</div>
<div>i</div>
<div>n</div>
<div>g</div>
</div>
</body>
</html>位置调整：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #403833;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
cursor: default;
user-select: none;
}
.text {
position: absolute;
font-size: 14px;
color: #ffffff;
animation: text 2s infinite;
}
.horizontal {
position: absolute;
top: 0em;
left: 0em;
/* border: 1px solid #000; */
}
.vertical {
position: absolute;
top: -1.5em;
left: 1.7em;
transform: rotate(90deg);
}
.circlesup {
position: absolute;
top: -1em;
left: 0.5em;
}
.circlesdown {
position: absolute;
top: 1.2em;
left: 2.6em;
transform: rotate(180deg);
}
.circle {
position: absolute;
width: 15em;
height: 15em;
z-index: 5;
animation: rotate 2s infinite;
/* border: 1px solid red; */
}
.circle:after {
content: '';
width: 2em;
height: 2em;
border-radius: 50%;
position: absolute;
background: #13a3a5;
}
.circle:nth-child(2) {
z-index: 4;
animation-delay: 100ms;
}
.circle:nth-child(2)::after {
background: #56bebf;
transform: scale(0.8, 0.8);
}
.circle:nth-child(3) {
z-index: 3;
animation-delay: 225ms;
}
.circle:nth-child(3):after {
background: #ffa489;
transform: scale(0.6, 0.6);
}
.circle:nth-child(4) {
z-index: 2;
animation-delay: 350ms;
}
.circle:nth-child(4):after {
background: #ff6d37;
transform: scale(0.4, 0.4);
}
.circle:nth-child(5) {
z-index: 2;
animation-delay: 475ms;
}
.circle:nth-child(5):after {
background: #db2f00;
transform: scale(0.2, 0.2);
}
@keyframes text {
0% {
transform: scale(0.2, 0.2);
}
50% {
transform: scale(1, 1);
}
60% {
transform: scale(1, 1);
}
100% {
transform: scale(0.2, 0.2);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
5% {
transform: rotate(0deg);
animation-timing-function: ease-in;
}
70% {
transform: rotate(360deg);
animation-timing-function: ease-out;
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader">
<div class="text">loading...</div>
<div class="horizontal">
<div class="circlesup">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="circlesdown">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="vertical">
<div class="circlesup">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="circlesdown">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>多个\<span>之间不要换行，否则\<span>之间的间距会变大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>loading #9</title>
<style>
body {
background-color: #f2f2f2;
font-size: 100%;
font-weight: 900;
height: 100%;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
user-select: none;
cursor: default;
}
.loader .txt {
font-size: 14em;
text-transform: uppercase;
text-shadow:0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.1),
0 3px 5px rgba(0,0,0,.1),
0 5px 10px rgba(0,0,0,.1),
0 10px 10px rgba(0,0,0,.1),
0 20px 20px rgba(0,0,0,.15);
white-space: nowrap;
}
.loader .txt span{
animation: text cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.2s infinite;
color: #F2F2EF;
}
.loader .txt span:nth-child(1) {
animation-delay: 0ms;
}
.loader .txt span:nth-child(2) {
animation-delay: 100ms;
}
.loader .txt span:nth-child(3) {
animation-delay: 200ms;
}
.loader .txt span:nth-child(4) {
animation-delay: 300ms;
}
.loader .txt span:nth-child(5) {
animation-delay: 400ms;
}
.loader .txt span:nth-child(6) {
animation-delay: 500ms;
}
.loader .txt span:nth-child(7) {
animation-delay: 600ms;
}
@keyframes text {
0% {
color: #f2f2f2;
}
40% {
color:#fff;
}
70%, 100% {
color: #f2f2f2;
}
}
</style>
</head>
<body>
<div class="loader">
<span class="txt">
<span>L</span><span>o</span><span>a</span><span>d</span><span>i</span><span>n</span><span>g</span></span>
</span>
</div>
</body>
</html>