1
<!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>Document</title>
<style>
.loading{
width: 59px;
height: 40px;
margin: 60px auto;
text-align: center;
/* border: 1px solid black; */
}
span{
width: 5px;
height: 100%;
display: inline-block;
background-color: burlywood;
/* infinite 无线循环ease-in-out两头慢*/
animation: ani 1.2s infinite ease-in-out;
}
span:nth-child(2){
animation-delay: -1s;
}
span:nth-child(3){
animation-delay: -0.6s;
}
span:nth-child(4){
animation-delay: -0.5s;
}
span:nth-child(5){
animation-delay: -1.3s;
}
span:nth-child(6){
animation-delay: -1.6s;
}
@keyframes ani{
0%{
transform: scaleY(0.4);
}
15%{
transform: scaleY(0.7);
}
25%{
transform: scaleY(1);
}
35%{
transform: scaleY(0.7);
}
45%{
transform: scaleY(0.6);
}
60%{
transform: scaleY(0.5);
}
75%{
transform:scaleY(0.4);
}
85%{
transform: scaleY(0.6);
}
100%{
transform: scaleY(1);
}
}
</style>
</head>
<body>
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
2
<!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>Document</title>
<style>
html {
font-size: 10px;
}
.loading {
/* rem是相对于html标签里面设置字体大小 1rem=html设置的font-size的大小 */
width: 3rem;
height: 3rem;
margin: 100px auto;
position: relative;
/* border: 1px solid rebeccapurple; */
}
.circle {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* border: 1px solid rgb(166, 132, 201); */
}
.circle span:nth-child(1){
left: 0;
top: 0;
}
.circle span:nth-child(2){
right: 0;
top: 0;
}
.circle span:nth-child(3){
right: 0;
bottom: 0;
}
.circle span:nth-child(4){
bottom: 0;
left: 0;
}
span{
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: royalblue;
display: inline-block;
animation: ani infinite ease-in-out 1.2s;
}
.circle2{
transform: rotateZ(45deg);
}
.circle1 span:nth-child(1){
animation-delay:-1.1s;
}
.circle2 span:nth-child(1){
animation-delay:-0.9s;
}
.circle1 span:nth-child(2){
animation-delay:-0.8s;
}
.circle2 span:nth-child(2){
animation-delay:-0.6s;
}
.circle1 span:nth-child(3){
animation-delay:-0.5s;
}
.circle2 span:nth-child(3){
animation-delay:-0.4s;
}
.circle1 span:nth-child(4){
animation-delay:-0.3s;
}
.circle2 span:nth-child(4){
animation-delay:-0.1s;
}
@keyframes ani{
0%{
transform: scale(0);
}
40%{
transform: scale(1.0);
}
80%{
transform: scale(0);
}
100%{
transform: scale(0);
}
}
</style>
</head>
<body>
<div class="loading">
<div class="circle circle1">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="circle circle2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
// 在窗口发生变化的时候会触发,动态修改根元素字体大小
window.onresize = function () {
document.documentElement.style.fontSize = document.documentElement.clientWidth/100+'px'
}
</script>
</body>
</html>